转自：www.cppblog/epubcn/archive/2008/11/07/66206.html
我的Firefox插件开发之旅
（1）——从零开始
准备做一个Firefox插件，用来接收从WEB页面传递的参数，根据这些参数从服务器上下载一些文件到本地，并调起本地的一个应用程序。
以前在IE中是使用一个ActiveX来实现的。FF的插件从来没有做过，不知道将来会遇到多少困难。
 
在网上发现一个页面：/code/mozilla/extensionwiz/，它提供了一个FF扩展的生成向导，填写完必要信息后，会生成一个zip文件。之后我改名为xpi后，丢到我的FF 3.0中，提示不正确的安装包。看来这个向导针对FF3还有些问题。具体问题是什么？现在还不清楚。让我来继续寻资料……
 
在Mozilla网站上了解到，FF的Extension和Plugin是两种概念的东西：
Extension就是一个zip包，里面有规定的一些必要文件。这个可以下载几个插件看一下他们的目录结构就好了。我下载了一个 QuickNote，看了一下，主要包括一个install.rdf（安装包相关信息和文件资源路径等配置）、chrome.manifest（设置各种XUL文件路径以及其他的一些资源文件路径）、chrome文件夹（里面放着插件的所有源文件），不过chrome文件夹里面的文件我还没有过多研究。
Plugin好像是另外一码事了，在Mozilla Developer Center的Plugin开发介绍文中有这么一句：Plugins are different from extensions, which modify or enhance the functionality of the browser itself. Plugins are also different from search plugins, which plug additional search engines in the search bar. （插件与扩展不同，它更改或者改善了浏览器自身的功能。插件与搜索插件又不同，搜索插件在搜索工具栏上添加了额外的搜索引擎。）
我的理解，插件可以让你在FF中使用自己的View来展示、用自己编写的二进制文件来做某些
事情，不仅仅是利用FF自身支持的一些特性和功能。而扩展相对来说就不需要这些东西，只利用FF的开发API就好了。
 
这样看来，要实现我开始提到的需求，似乎可以开发一个Extension就可以了。Foxmarks Bookmark Synchronizer（FBS）也差不多是我的需求这种感觉：将本地某些数据上传至服务器，从服务器同步下载一些数据到本地。FBS既然是一个扩展能够实现，那么看来我暂时不用研究Plugin了，呵呵。
 
OK，有了大概的目标。下面开始制订学习计划！
通过研究别人写的Extension，里面有很多js、css、images、html，这些应该还好理解，但是多了一些后缀名为xul的文件。这是什么东西？看来想开发Extension，这个文件需要好好研究一下。
因此，我的第一个学习计划就是搞清楚XUL是什么，什么地方要用XUL，以及怎么写XUL？
 
先说到这里，下一小节我来写一些XUL的学习历程。
（2）——XUL是什么？
What is XUL？这个页面给出了详细的介绍：www.xulplanet/tutorials/whyxul.html。
看完后，了解了XUL原来是一个支持多种WEB技术的、基于XML的界面开发语言。它既可以在远程执行，也可以安装到本地执行。
在XUL中内置了很多界面元素，如菜单、按钮、分页等等，这样就不需要自己编写很多JS来维护和控制很多界面元素了。而且，这些界面是按照当时的OS外观来展现的，比如同一个按钮，在MacOS上和Windows上看起来就不一样。另外XUL也允许自己使用JS和CSS来定制自己的个性化界面。总之一句话，XUL的主要作用就是用来展现Extension的用户交互界面的。
OK，知道了XUL是什么以后，那么怎么学习它的用法呢？文章最下方适时地给出了一个连接：begin the XUL tutorial，还挺人性化:) 我点~~~
教程很多，很强大。看来一时半会儿全搞清楚是不可能的了。慢慢来吧。
哦对了，还发现一个在线的XUL编辑器，把XUL代码粘进去，下面可以实时地显示界面。不过不能引用外部脚本，否则就出错。链接是：/code/mozilla/xuledit/xuledit.xul。
（3）——我的第一个扩展
简单知道了XUL，迫不及待地想立即编写一个插件，哪怕什么事情都不做也好。O(∩_∩)O
通过这个页面/en/Building_an_Extension，可以到编写一个插件必须要做得一些事情，写的很清楚。最后产生的目录和文件结构是这个样子：
install.rdf
chrome.manifest
chrome
  |--content
      |--overlay.xul （我准备在这里编写代码，在FF的工具栏上添加一个按钮）
  |--locale
      |--en-US
          |--sample.dtd
      |--zh-CN
          |--sample.dtd
      |--zh-TW
          |--sample.dtd
  |--skin
      |--classic
          |--sampleicon.png
          |--smallicon.png
          |--default.css （界面显示的样式表，今后可能会用到）

上面文件中的install.rdf、chrome.manifest基本上用例子中的就好了，dtd文件里面是界面文字，这个可以模仿其他插件编写。
overlay.xul我准备添加一段代码，用来在FF工具栏上添加一个按钮。skin下面的png是准备在工具栏上添加的按钮的图标。
OK，把上面整个目录用zip打个包，改后缀名为xpi，拖放到FF3中，提示尚未验证作者、是否继续安装。这个先不管它，以后再研究。安装以后，重启FF3，哈哈，写的第一个Extension成功安装了！只不过overlay.xul里面什么都没写，所以还没有视觉上的成就感。下面开始添加overlay.xul中的代码。
怎么在工具栏上添加按钮呢？感谢Mozilla提供的文档，专门有一篇文章是讲这个地：/en/Creating_toolbar_buttons。文章里面讲的非常清楚，我这里就不废话了。不过有两点需要注意一下：
1、样式表中的ID和toolbarbutton的id一定要保持一致；
2、按钮的label和tooltiptext可以直接添加文字，但如果使用了中文，有可能会显示乱码（至少在我的FF3上是这样）；
3、按钮的图标一定要大小两种（24x24、16x16）都提供；
4、label和tooltiptext可以使用dtd中定义的文字，但必须注意：dtd文件必须存为UTF-8编码，否则会导致按钮显示不出来！
在FF3的定制工具栏中，有图标，但下方没有文字，好像是我哪里忘记添加文字了，一会儿看看去……
好了，我的第一个FF插件就写好了，不过现在只是在工具栏上添加了一个按钮而已，什么事情都没做，下一次我们添加一些行为给它。
以下附上几个关键文件的内容：
一、install.rdf

<?xml version="1.0"?>
<RDF xmlns="/1999/02/22-rdf-syntax-ns#" xmlns:em="/2004/em-rdf#">
    <Description about="urn:mozilla:install-manifest">
        <em:id>{859606AC-AFFE-4691-82C5-FA0148A7E2D4}</em:id>
        <em:version>1.0</em:version>
        <em:type>2</em:type>
        <em:name>MeetMePlus</em:name>
        <em:description>Anywhere, anytime to starting a conferencing</em:description>
        <em:creator>G-NET</em:creator>
        <em:iconURL>chrome://meetmeplus/skin/gnet_32.png</em:iconURL>
        <em:homepageURL>plus/</em:homepageURL>
        <em:targetApplication>meide
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>3.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>
    </Description>      
</RDF>
二、chrome.manifest
overlay    chrome://browser/content/browser.xul    chrome://meetmeplus/content/overlay.xul
content    meetmeplus    chrome/content/
style    chrome://global/content/customizeToolbar.xul    chrome://meetmeplus/skin/default.css
skin    meetmeplus    classic/1.0    chrome/skin/classic/
locale    meetmeplus    zh-CN    chrome/locale/zh-CN/
三、overlay.xul
<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM "chrome://meetmeplus/locale/overlay.dtd">
<?xml-stylesheet href="chrome://meetmeplus/skin/default.css" type="text/css"?>
<overlay id="mmp-overlay" xmlns="/keymaster/gatekeeper/ly.xul">
   
    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="meetmeplus-button" type="menu-button" 
            class="toolbarbutton-1 chromeclass-toolbar-additional">
            <menupopup>
                <menuitem label="&home;" tooltiptext="<ip;" image="chrome://meetmeplus/skin/option_16.png" class="menuitem-iconic"/>
                <menuseparator/>
                <menuitem label="&mmp.option;" tooltiptext="&ltip;" image="chrome://meetmeplus/skin/option_16.png" class="menuitem-iconic"/>
            </menupopup>
        </toolbarbutton>
    </toolbarpalette>
</overlay>