ツールバー - userChrome.js作成メモWiki

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

ツールバーアイテムを作成する

例として再起動アイコンを追加
chrome.manifest

content    sample    content/
skin       sample    skin/
overlay    chrome://browser/content/browser.xul    chrome://sample/content/browser.xul

content/browser.xul

<?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

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