「ツールバー」の編集履歴（バックアップ）一覧はこちら

「ツールバー」(2017/01/06 (金) 15:14:17) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

firefox28以前は小さなアイコン(16px)と大きなアイコン(24px)だったが、
firefox29以降はツールバーアイコン(18px)とパネルアイコン(32px)に変更された。
ただし拡張機能が追加するツールバーアイコンには1pxのボーダーが自動で入るようなので、
用意するツールバー用アイコン画像は16pxにする。

#contents()
*ツールバーアイテムを作成する
例として再起動アイコンを追加
chrome.manifest
#highlight(manifest){
content    sample    content/
skin       sample    skin/
overlay    chrome://browser/content/browser.xul    chrome://sample/content/browser.xul}
browser.xul
#highlight(xml){
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://sample/skin/button.css" type="text/css"?>
<overlay id="sampleOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton id="restartButton"
        label="再起動"
        tooltiptext="Firefox を再起動します"
        class="toolbarbutton-1 chromeclass-toolbar-additional"
        oncommand="Application.restart();"/>
</toolbarpalette>

</overlay>}
button.css
#highlight(css){{
#restartButton {
    list-style-image : url("chrome://sample/skin/icon32.png");
}
#restartButton[cui-areatype="toolbar"] {
    list-style-image : url("chrome://sample/skin/icon16.png");
} }}

firefox28以前は小さなアイコン(16px)と大きなアイコン(24px)だったが、
firefox29以降はツールバーアイコン(18px)とパネルアイコン(32px)に変更された。
ただし拡張機能が追加するツールバーアイコンには1pxのボーダーが自動で入るようなので、
用意するツールバー用アイコン画像は16pxにする。

#contents()
*ツールバーアイテムを作成する
例として再起動アイコンを追加
chrome.manifest
#highlight(manifest){
content    sample    content/
skin       sample    skin/
overlay    chrome://browser/content/browser.xul    chrome://sample/content/browser.xul}
content/browser.xul
#highlight(xml){
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://sample/skin/button.css" type="text/css"?>
<overlay id="sampleOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton id="restartButton"
        label="再起動"
        tooltiptext="Firefox を再起動します"
        class="toolbarbutton-1 chromeclass-toolbar-additional"
        oncommand="Application.restart();"/>
</toolbarpalette>

</overlay>}
skin/button.css
#highlight(css){{
#restartButton {
    list-style-image : url("chrome://sample/skin/icon32.png");
}
#restartButton[cui-areatype="toolbar"] {
    list-style-image : url("chrome://sample/skin/icon16.png");
} }}