网站联系我们 怎么做地图,西城区网站建设,福田蒙派克10座商务车,网站建设 印花税MDN Mozilla 产品与私有技术 Mozilla 私有技术 XUL Toolbars 添加工具栏按钮 (定制工具栏)添加工具栏按钮 (定制工具栏) 在本文章中创建一个 overlay在工具栏添加按钮为按键应用风格图标大小CSS 样式表应用样式表常见错误常见工具栏的 overlayed windows更多信息此文…MDN Mozilla 产品与私有技术 Mozilla 私有技术 XUL Toolbars 添加工具栏按钮 (定制工具栏) 添加工具栏按钮 (定制工具栏) 在本文章中创建一个 overlay在工具栏添加按钮为按键应用风格图标大小CSS 样式表应用样式表常见错误常见工具栏的 overlayed windows更多信息 此文章解释如何使用 overlays 为工具包firefoxThunderbird 或 Kompozer) 添加工具栏按钮就是浏览器右上方一系列按钮home下载之类的。适用用户是拥有 XUL 和 CSS 基础知识的 扩展 开发人员。 我们假设您已经会创建基础的火狐插件并且已经成功创建了 Hello World extension 另外还有一份更加完全的初学者示例指南请查看 自定义工具栏按钮。 创建一个 overlay The first step is to create an overlay for the document containing the toolbar you wish to enhance. Explaining overlays is beyond the scope of this tutorial -- you can read about them in the XUL Tutorial. To overlay a document, you need to know its URI. You can find a list of URIs for the most commonly overlaid documents at the bottom of this page. Note: Some people overlay chrome://messenger/content/mailWindowOverlay.xul. That should cause the button to appear on all windows that mailWindowOverlay.xul is applied to (i.e. Main window and View Message window). This needs to be looked into. 在工具栏添加按钮 Toolkit applications have customizable toolbars; therefore, its common practice for extensions to add their toolbar buttons to the toolbar palette, rather than adding them directly to the toolbar. The latter is possible but is not recommended and is harder to implement. Adding a button to the toolbar palette is very easy. Just add code like this to your overlay: toolbarpalette idBrowserToolbarPalette toolbarbutton idmyextension-button classtoolbarbutton-1 labeltoolbarbutton.label; tooltiptexttoolbarbutton.tooltip; oncommandMyExtension.onToolbarButtonCommand(event);/ /toolbarpalette 注意: The id of the palette (BrowserToolbarPalette in the example) depends on the window whose toolbar you wish to insert a button into. See below for the list of common palette IDs.classtoolbarbutton-1 makes the toolbar button appear correctly in Icons and Text mode; it also adjusts padding.If you need to handle middle-click, add this line after the oncommand line.onclickcheckForMiddleClick(this, event) you can also handle middle-lick and right-click using onclick handler and check event.button in it. like this:toolbarpalette idBrowserToolbarPalette toolbarbutton idmyextension-button classtoolbarbutton-1 labeltoolbarbutton.label; tooltiptexttoolbarbutton.tooltip; onclickMyExtension.onclick(event);/ /toolbarpalette onclick: function(event) {switch(event.button) {case 0:// Left clickbreak;case 1:// Middle clickbreak;case 2:// Right clickbreak;}
} To add more buttons, put more toolbarbutton elements inside the toolbarpalette element. Wrap elements other than toolbarbutton intoolbaritem. 为按键应用风格 Most toolbar buttons have an icon. To attach an image to the button we use standard Mozilla skinning facilities. If youre unfamiliar with how that works, read the skinning section of Jonah Bishops excellent Toolbar Tutorial. Although the article covers creating an entire toolbar, rather than just a button, it has a great explanation of the techniques well use here. 图标大小 Toolbar buttons can have two different sizes -- big and small. This means youll 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 sizeSmall icon sizeFirefox 1.0 (Winstripe)24x2416x16Thunderbird 1.0 (Qute)24x2416x16CSS 样式表 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[iconsizesmall] #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: ?xml-stylesheet hrefchrome://myextension/skin/toolbar-button.css typetext/css? 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 wont work correctly without this. To include the style on your chrome.manifest file: style chrome://global/content/customizeToolbar.xul chrome://myextension/skin/toolbar-button.css If you are developing for Firefox 1.0, attach it to the Customize Toolbar window (chrome://global/content/customizeToolbar.xul) usingskin/contents.rdf. The code looks like this: ?xml version1.0?
RDF xmlnshttp://www.w3.org/1999/02/22-rdf-syntax-ns# xmlns:chromehttp://www.mozilla.org/rdf/chrome# Seq abouturn:mozilla:skin:root li resourceurn:mozilla:skin:classic/1.0/ /Seq Description abouturn:mozilla:skin:classic/1.0 chrome:packages Seq abouturn:mozilla:skin:classic/1.0:packages li resourceurn:mozilla:skin:classic/1.0:myextension/ /Seq /chrome:packages /Description Seq abouturn:mozilla:stylesheets li resourcechrome://global/content/customizeToolbar.xul/ /Seq Seq aboutchrome://global/content/customizeToolbar.xul lichrome://myextension/skin/toolbar-button.css/li /Seq /RDF 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: skin myextension classic/1.0 chrome/skin/
style chrome://global/content/customizeToolbar.xul chrome://myextension/skin/toolbar-button.css
ia 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. 常见错误 This is a list of the most common mistakes made by extension authors, including both symptoms and solutions. Problem: The whole set of default buttons is painted on the toolbar or in the Customize Toolbars window, instead of your own icon. Caused by: Malformed or not applied stylesheet. Solution: Check to be sure your stylesheet is correct, make sure your contents.rdf (or chrome.manifest) is correct, and be sure you didnt forget to apply the stylesheet to customizeToolbar.xul. 常见工具栏的 overlayed windows URLApplication and affected window(s)Palette idchrome://browser/content/browser.xulFirefox - Main windowBrowserToolbarPalettechrome://navigator/content/navigator.xulSeaMonkey 2.0 - Browser windowBrowserToolbarPalettechrome://messenger/content/messenger.xulThunderbird - Main windowMailToolbarPalettechrome://messenger/content/messenger...gercompose.xulThunderbird - Compose windowMsgComposeToolbarPalettechrome://messenger/content/addressbo...ddressbook.xulThunderbird - Address bookAddressBookToolbarPalettechrome://editor/content/editor.xulKompozer - Main windowNvuToolbarPalettechrome://calendar/content/calendar.xulSunbird - Main windowcalendarToolbarPalette更多信息 XulPlanet.com references: toolbarbutton, toolbaritem.How to adjust toolbarbuttons label positionA forum thread about adding an item to the toolbar (instead of just adding it to palette) right after an extension is installed. Note that doing this is not recommended.There is another page on mdc with information about adding buttons to various windows in SeaMonkey. Includes useful information about overlays for ChatZilla. 转载于:https://www.cnblogs.com/developer-ios/p/7198121.html
