html如何添加工具条,添加工具栏按钮 (定制工具栏)

Most toolbar buttons have an icon. To attach an image to the button we use standard Mozilla skinning facilities. If you're unfamiliar with how that works, read the skinning section of Jonah Bishop's excellent Toolbar Tutorial. Although the article covers creating an entire toolbar, rather than just a button, it has a great explanation of the techniques we'll use here.

图标大小

Toolbar buttons can have two different sizes -- big and small. This means you'll need to provide two icons for each of your toolbar buttons. The dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications):

Application (Theme name)

Big icon size

Small icon size

Firefox 1.0 (Winstripe)

24x24

16x16

Thunderbird 1.0 (Qute)

24x24

16x16

CSS 样式表

To set the image for your toolbar button, use the following CSS rules:

/* skin/toolbar-button.css */

#myextension-button {

list-style-image: url("chrome://myextension/skin/btn_large.png");

}

toolbar[iconsize="small"] #myextension-button {

list-style-image: url("chrome://myextension/skin/btn_small.png");

}

应用样式表

Remember to attach the stylesheet you created to both the overlay file and the Customize Toolbar window. To attach it to the overlay, put this processing instruction (PI) at the top of the overlay file:

Note: The CSS file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. This is very important because the toolbar customization dialog won't work correctly without this.

To include the style on your chrome.manifest file:

If you are developing for Firefox 1.0, attach it to the Customize Toolbar window (skin/contents.rdf. The code looks like this:

xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

chrome://myextension/skin/toolbar-button.css

The skin/contents.rdf file is denigrated in developing for later releases of Firefox. Extensions for Firefox/Thunderbird 1.5 and above should instead use something like this in their chrome.manifest:

Take note of the Packaging section in this article; you may need to include .jar references if you are delivering your extension as a .xpi file.