1. MDN
  2. Mozilla 产品与私有技术
  3. Mozilla 私有技术
  4. XUL
  5. Toolbars
  6. 添加工具栏按钮 (定制工具栏)

添加工具栏按钮 (定制工具栏)

此文章解释如何使用 overlays 为工具包(firefox,Thunderbird 或 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, it's 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 id="BrowserToolbarPalette">
<toolbarbutton id="myextension-button" class="toolbarbutton-1"
label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
oncommand="MyExtension.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.
  • class="toolbarbutton-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.
onclick="checkForMiddleClick(this, event)"
  • you can also handle middle-lick and right-click using onclick handler and check event.button in it. like this:
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="myextension-button" class="toolbarbutton-1"
label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
onclick="MyExtension.onclick(event);"/>
</toolbarpalette>
onclick: function(event) {
switch(event.button) {
case 0:
// Left click
break;
case 1:
// Middle click
break;
case 2:
// Right click
break;
}
}

To add more buttons, put more <toolbarbutton> elements inside the <toolbarpalette> element. Wrap elements other than <toolbarbutton> in<toolbaritem>.

为按键应用风格

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:

<?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/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 won't 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 version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <Seq about="urn:mozilla:skin:root">
<li resource="urn:mozilla:skin:classic/1.0"/>
</Seq> <Description about="urn:mozilla:skin:classic/1.0">
<chrome:packages>
<Seq about="urn:mozilla:skin:classic/1.0:packages">
<li resource="urn:mozilla:skin:classic/1.0:myextension"/>
</Seq>
</chrome:packages>
</Description> <Seq about="urn:mozilla:stylesheets">
<li resource="chrome://global/content/customizeToolbar.xul"/>
</Seq> <Seq about="chrome://global/content/customizeToolbar.xul">
<li>chrome://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 didn't forget to apply the stylesheet to customizeToolbar.xul.

常见工具栏的 overlayed windows

URL Application and affected window(s) Palette id
chrome://browser/content/browser.xul Firefox - Main window BrowserToolbarPalette
chrome://navigator/content/navigator.xul SeaMonkey 2.0 - Browser window BrowserToolbarPalette
chrome://messenger/content/messenger.xul Thunderbird - Main window MailToolbarPalette
chrome://messenger/content/messenger...gercompose.xul Thunderbird - Compose window MsgComposeToolbarPalette
chrome://messenger/content/addressbo...ddressbook.xul Thunderbird - Address book AddressBookToolbarPalette
chrome://editor/content/editor.xul Kompozer - Main window NvuToolbarPalette
chrome://calendar/content/calendar.xul Sunbird - Main window calendarToolbarPalette

更多信息

xul 创建一个按钮的更多相关文章

  1. unity编辑器扩展_01(在工具栏中创建一个按钮)

    代码: [MenuItem("Tools/Test",false,1)]    static void Test()    {        Debug.Log("tes ...

  2. PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  3. ArcGIS Desktop python Add-in 创建一个插件

    1)创建一个项目 首先创建一个插件项目,本节介绍如何利用向导创建一个插件项目. 创建任何一个ArcGIS插件产品的过程都是一样的. 创建一个Python插件项目包括2个步骤: a) 选择一个插件项目文 ...

  4. [Swift通天遁地]二、表格表单-(9)快速创建一个美观强大的表单

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. 安卓入门 使用android创建一个项目 从启动activity中响应按钮事件 启动另一个activity 并传递参数

    启动android studio创建一个新项目 public void sendMessage(View view){ Intent intent=new Intent(this,DispalyMes ...

  6. 创建一个apk:按钮-click-文字display,测试apk;安装在真机进行调试的方法

    问题引入: 怎么样在一个app做event事件?例如touch操作,滑动操作,和按键事件(back,home等) 回答1:device.touch(x,y) ---获取device对象,然后touch ...

  7. 5.从零开始创建一个QT窗口按钮

    如何创建一个QT项目 如何创建一个QT项目 1.创建新项目 2.配置选择 3.增加按钮 4.按钮和窗体的大小标签图标设置 5.信号与槽 6.自定义信号与槽 代码 1.创建新项目 点击文件->新建 ...

  8. [UWP]创建一个进度按钮

    1. 前言 最近想要一个进度按钮. 传统上UWP上处理进度可以这样实现,首先是XAML,包括一个ProgressBar和一个按钮: <StackPanel Orientation="H ...

  9. firefox扩展开发(二):用XUL创建窗口控件

    firefox扩展开发(二):用XUL创建窗口控件 2008-06-11 16:57 1.创建一个简单的窗口 <?xml version="1.0"?> <?xm ...

随机推荐

  1. Python之绘图和可视化

    Python之绘图和可视化 1. 启用matplotlib 最常用的Pylab模式的IPython(IPython --pylab) 2. matplotlib的图像都位于Figure对象中. 可以使 ...

  2. karma+requirejs+angular 测试

    http://karma-runner.github.io/0.8/plus/RequireJS.html karma 不是测试框架,只是一个运行测试框架的服务器 karma测试的原理是,将所有的文件 ...

  3. Windows提高_1.4进程通信

    进程通信 使用 WM_COPYDATA 客户端(发送端) // 1. 找到窗口程序 HWND hWnd = FindWindow(NULL, L"Window1"); ​ // 2 ...

  4. arx 移动界面到一点

    AcDbViewTableRecord view; AcGePoint3d max = acdbHostApplicationServices()->workingDatabase()-> ...

  5. 08Microsoft SQL Server 数据查询

    Microsoft SQL Server 数据查询 单表查询所有列 --查询所有行所有列 select all * from table; --查询不重复行的所有列 select distinct * ...

  6. TWaver GIS在电信中的使用

    GIS作为信息系统的重要组成部分,在电信行业中的应用由来已久.将GIS引入电信管理系统,GIS强大的功能就会得到充分的体现,GIS技术可以将各类电信信息系统以其特有的表现形有机整合在一起,并为真正做到 ...

  7. linux top-显示或管理执行中的程序

    推荐:更多linux 性能监测与优化 关注:linux命令大全 top命令可以实时动态地查看系统的整体运行情况,是一个综合了多方信息监测系统性能和运行信息的实用工具.通过top命令所提供的互动式界面, ...

  8. SQL学习笔记:表的约束

    目录 NOT NULL约束 INDEX 索引 CHECK 约束 DEFAULT 约束 UNIQUE 约束 PRIMARY KEY 约束 FOREIGN KEY 约束:简单的说,就是创建表的时候,对表或 ...

  9. POJ -棋盘问题

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 60815   Accepted: 29135 Descriptio ...

  10. codechef营养题 第三弹

    第三弾が始まる! codechef problems 第三弹 一.Motorbike Racing 题面 It's time for the annual exciting Motorbike Rac ...