自定义工具栏按钮

注意:  至于如何找到配置文件夹，请查看：配置文件夹

说明:  配置文件夹包含用户指定的设置，和主程序分开存放。所以程序重装或升级之后，这些信息不受影响。

建议直接复制粘贴，以免出错

[email protected]

按照后面的步骤，创建两个文件和一个文件夹。

说明:  此文件夹名称是用于区分不同扩展程序的唯一标识符。在稍后的部分会有详细的标识符。

完整复制下面内容，粘贴到文档中：

<?xml version="1.0"?>

<RDF xmlns="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="https://www.mozilla.org/2004/em-rdf#">

  <Description
    about="urn:mozilla:install-manifest"

    em:name="Custom Button"
    em:description="My custom toolbar button"
    em:creator="My name"

    em:id="[email protected]"
    em:version="1.0"
    em:homepageURL="https://developer.mozilla.org/en/docs/Custom_Toolbar_Button"

    em:iconURL="chrome://custombutton/content/icon.png" >

    <em:targetApplication><!-- Firefox -->
      <Description
        em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
        em:minVersion="1.4"
        em:maxVersion="99" />
    </em:targetApplication>

    <em:targetApplication><!-- Thunderbird -->
      <Description
        em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}"
        em:minVersion="1.4"
        em:maxVersion="99" />
    </em:targetApplication>

    <em:targetApplication><!-- Sunbird -->
      <Description
        em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}"
        em:minVersion="0.2.9"
        em:maxVersion="99" />
    </em:targetApplication>

    <em:file>
      <Description
        about="urn:mozilla:extension:custombutton"
        em:package="content/custombutton/" />
    </em:file>

  </Description>

</RDF>

可选：改变 name, description 和 creator。改变这三行中双引号间的文字即可

根据需求，移除不需要的软件说明部分（译注：假如你只想给firefox创建插件，那么就可以删掉别的部分）。

保存文件

说明:  此文件包含应用程序扩展管理器需要的信息。target applications这一大段表示能运行扩展程序的应用以及版本号。 最后一段描述此插件会添加内容到应用程序。

完整复制下面内容，粘贴到文档中：

content custombutton chrome/
style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css

# Firefox
overlay	chrome://browser/content/browser.xul chrome://custombutton/content/button.xul

# Thunderbird mail
overlay	chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul

# Thunderbird compose
overlay	chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul

# Thunderbird address book
overlay	chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul

# Sunbird
overlay	chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul

移除不需要的部分（同上段说明）。

保存文件

说明:  此文件定义扩展的内容结构。先给工具栏窗口应用一个样式表。然后给每个工具栏都指定一个 overlay 。

按照下放说明，创建 5 个文件。

说明:   chrome 文件夹包含扩展的可执行部分，即扩展是干什的。

完整复制下面内容，粘贴到文档中：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"
  href="chrome://custombutton/content/button.css"?>

<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script type="application/javascript"
  src="chrome://custombutton/content/button.js"/>

<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="custom-button-1"/>
  </toolbarpalette>

<!-- Thunderbird mail -->
<toolbarpalette id="MailToolbarPalette">
  <toolbarbutton id="custom-button-1"/>
  </toolbarpalette>

<!-- Thunderbird compose -->
<toolbarpalette id="MsgComposeToolbarPalette">
  <toolbarbutton id="custom-button-1"/>
  </toolbarpalette>

<!-- Thunderbird address book -->
<toolbarpalette id="AddressBookToolbarPalette">
  <toolbarbutton id="custom-button-1"/>
  </toolbarpalette>

<!-- Sunbird -->
<toolbarpalette id="calendarToolbarPalette">
  <toolbarbutton id="custom-button-1"/>
  </toolbarpalette>


<!-- button details -->
<toolbarbutton id="custom-button-1"
  label="Custom"
  tooltiptext="My custom toolbar button"
  oncommand="CustomButton[1]()"
  class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
  />

</overlay>

可选：你可以自定义最后一块中的 label 和 tooltiptext 。更改双括号间的内容即可。

可选地，移除不需要的部分。。

保存文件。

说明:  此 XUL 文件会添加一个按钮到应用程序的 toolbar customization palette。此文件还链接了CSS样式表 和 JavaScript 脚本。最后一部分描述按钮的信息（译注；就是按钮名+鼠标放上面会提示什么文字）

完整复制下面内容，粘贴到文档中：

#custom-button-1,
#wrapper-custom-button-1
  {list-style-image: url("chrome://custombutton/content/button-1.png");}

/* common style for all custom buttons */
.custombutton                  
  {-moz-image-region: rect( 0px 24px 24px  0px);}

.custombutton:hover     
  {-moz-image-region: rect(24px 24px 48px  0px);}

[iconsize="small"] .custombutton
  {-moz-image-region: rect( 0px 40px 16px 24px);}

[iconsize="small"] .custombutton:hover
  {-moz-image-region: rect(24px 40px 40px 24px);}

没有什么能优化的，保存文件即可

说明:  此 CSS 样式表定义按钮如何显示。它链接到了按钮图片，指定了图片四个部分的尺寸。（译注；这里你就可以看文章开头提到的文章了，比这里举的例子更好实现，你只需在css中指定一大一小两个图片即可）

完整复制下面内容，粘贴到文档中：

CustomButton = {

1: function () {
  alert("Just testing")	
  },

}

没有什么能优化的，保存文件即可

接下来一部分的教程包含几个实例代码，你可以用他们来实现有用的功能。

说明:  此文件指定当按钮按下时执行什么操作。它使用  JavaScript 语言，加应用自己提供的一些特性。

右击图片，另存为，保存到 chrome 目录下。请确保文件名为： button-1.png

说明:  此图片包含四个部分。左上方是常用的图标。左下是深色的，按下按钮后显示，右侧的是小图标，工具栏设置成使用小图标时需要用。

右击图片，另存为，保存到 chrome 目录下。请确保文件名为：icon.png

说明:  此图片显示在应用扩展管理窗口中。