Firefox 1.5.0-2.0.0.* 版本 helloworld插件

今天参考firefox的插件教程，写了一个helloworld的firefox插件，显示效果就是在firefox的右下角的状态栏中会有Hello, World字样的，下面我会按照我的学习顺序简单介绍一下整个的制作过程；

一、了解Extension到底是什么东东；
首先我们需要搞清楚firefox的插件到底是什么东东；我想大家也都安装过firefox的插件了吧？比如Tab增强扩展，Tab clicking options, 鼠标超级拖动增强扩展，Super DragAndGo, 以及处理Activx的多媒体扩展，MediaWrap等等；如果你的观察够仔细，你会发现这些扩展都是以xpi为结尾的，那么这些xpi文件又是什么文件呢？
想知道xpi到底是什么文件，只需要亲自实验一下就可以了。因此我们这里下载一个扩展文件用来作实验，就比如键盘操作扩展conkeror吧，下载下来后是一个conkeror-firefox-0.42.xpi的文件；
Linux环境下，使用file查看此文件——

# file conkeror-firefox-0.42.xpi
conkeror-firefox-0.42.xpi: Zip archive data, at least v1.0 to extract

天阿，这个xpi文件尽然就是我们最熟悉的zip压缩文件！
赶紧解压开来看看：

#mkdir conkeror
#cd conkeror; unzip ../conkeror;
#ls
总计 12
drwxr-xr-x 3 root root 4096 06-27 09:46 chrome
drwxr-xr-x 2 root root 4096 06-27 09:45 components
-rw-r--r-- 1 root root 1039 01-26 18:39 install.rdf

我们可以看到两个文件夹，一个rdf文件；
chrome是Mozilla规定扩展必须具备的目录；
components是约定俗成的可选目录，用于存放自定义的 XPCOM 组件文件。由于大多数的扩展根本没必要自己定义 XPCOM 组件，因此，在没有自定义 XPCOM 组件的情况下，此目录是不用存在的；
install.rdf, 它是一个 RDF/XML 格式的文件，用于描述当前扩展的注册信息和附加信息等。扩展在安装时，负责安装扩展的程序会自动分析此文件的信息，然后将这些信息注册到 Mozilla 系统下。此文件必须被命名为 install.rdf，并置于扩展压缩包的顶级目录下；
我们在分别进两个子目录看看：

#ls chrome/
conkeror.jar

是一个jar文件，这个jar又是什么文件呢？先别急，一会儿我们就可以看到他的真面目拉。
看看components目录：

#ls components/
nsCrank.js

这个js文件我想大家都能猜对的了，就是普通的javascript文件；
注意：这里有必要提一点的是firefox上层的很多东西都是使用javascript写的，因此在其扩展中也是处处都和javascript有着千丝万缕的联系的。
了解了一个扩展的大致目录结构，那么下面我们就来编写一个简单的初级的helloworld；

二、根据文件结构写出Helloworld的Extension；
首先说明，我们写的这个helloworld是在firefox的右下角的状态栏中会有Hello, World字样，这是最简单的helloworld，最为联系和理解Extension开发的过程，我们就用这个最简单的实例来向大家展示这个过程。

建立一个开发我们自己Extension的专用目录，比如my-extension；进入目录中后，首先需要搭建目录结构，建立必须的文件；具体过程如下：

#mkdir -p chrome/content
#touch chrome.manifest install.rdf chrome/content/my-extension.xul

ok，此时我们的文件结构已经建立完毕，下面简单介绍一下各目录和文件的作用。
content：用于存储负责描述扩展界面的 XUL 文件和完成实际逻辑功能的 JS 文件；
chrome.manifest：负责将扩展的各种包注册到 Mozilla 的 chrome 系统中。Gecko 1.8 内核新引入的机制，用来代替原有的 contents.rdf 文件；
install.rdf前面介绍过了，就是是一个 RDF/XML 格式的文件，用于描述当前扩展的注册信息和附加信息等。
my-extension.xul,这是插件的界面文件，其实就是一种xml格式的文本文件，使用xml方式描述界面图元信息和属性；
打开install.rdf文件，将下述内容贴到文件内，注意，没有前面的行号，那个是vi生成的，我懒得去掉了。

 1 <?xml version="1.0"?>
  2 
  3 <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  4     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  5 
  6     <Description about="urn:mozilla:install-manifest">
  7         <em:id>lsosa@lsosa</em:id>
  8         <em:version>0.0.1</em:version>
  9         <em:type>2</em:type>
 10 
 11         <!-- Target Application this extension can install into, 
 12         with minimum and maximum supported versions. -->
 13         <em:targetApplication>
 14             <Description>
 15                 <em:id>...{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
 16                 <em:minVersion>1.5</em:minVersion>
 17                 <em:maxVersion>2.0.0.*</em:maxVersion>
 18             </Description>
 19         </em:targetApplication>
 20 
 21         <!-- Front End MetaData -->
 22         <em:name>my-extension<em:name>
 23         <em:description>A test extension writen by lsosa;</em:description>
 24         <em:creator>lsosa</em:creator>
 25         <em:homepageURL>http://blog.youkuaiyun.com/baymoon/</em:homepageURL>
 26     </Description>
 27 </RDF>}

其中的em:id标签，它是用来唯一的标识某个扩展，此标记内容的要求在 Firefox 1.5 版本的前后还发生了变化。在 1.5 以前的版本中，em:id 标记的内容被要求必须以 GUID 格式进行表示；而在 1.5 及后续版本中，你还可以使用一种格式为 extension@domain 的 id。如下示例了两种不同的格式：我这里就采用了后一种方式；
<em:type>2</em:type>属性为2表明这是一个扩展，如果为4，则注册为theme文件；
{ec8030f7-c20a-464f-9b0e-13a3a9e97384} 这是firefox的应用程序ID；

上面这是一个注册文件，下面来看看界面文件是什么样子的。
前面其实已经提到了Extension的界面文件，就是xul文件，那么这个xul到底是什么文件呢？它又是起什么作用的呢？
这里很有必要提到的一点就是Firefox的界面就是由javascript和xul结合起来来完成显示的！
而前面已经题到了xul其实就是xml格式的描述文件，我想你应该已经猜到了，动态的javascript＋静态的xul描述文件就是我们当前看到的Firefox界面，以及它的各种扩展界面。
在实际的Extension编写实现中，我们实际上是通过增加或者修改某个Widget来达到显示我们的Extension的目的。这里的Helloworld也是这个原理，它通过在statusbar中增加一个显示label来显示Helloworld，完成我们的这次入门程序的编写。
为了更好的理解Firefox界面也是xul文件描述的，我们来看看Firefox的xul文件吧。
它就是browser.xul，就在$FIREFOX_INSTALL_DIR/chrome/browser.jar文件中，这个jar也是zip压缩的文件，你可以用unzip打开他，就像你打开xpi扩展文件一样。里面你可以找到browser.xul文件，在文件里面你可以看到 类似下面这几条语句：

<statusbar class="chromeclass-status" id="status-bar">
 ... <statusbarpanel>s ...
</statusbar>

其中的<statusbar class="chromeclass-status" id="status-bar">就是Xul Overlay的一个合并入口。

Xul Overlay是一种在运行时将Widget附加到xul文档的方法。
下面我们编辑我们自己的xul文件，chrome/content/my-extension.xul，将下面的内容贴进去。

 1 <?xml version="1.0"?>
  2 <overlay id="my-extension" 
  3     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  4     <statusbar id="status-bar">
  5         <statusbarpanel id="lsosa-test-panel" label="Hello, World"/>
  6     </statusbar>
  7 </overlay>

将下面两句话放到chrome.manifest文件中；

  1 content my-extension chrome/content/
      2 overlay chrome://browser/content/browser.xul chrome://my-extension/content/my-extension.xul

其中的对应关系这里不细讲，其中关键的就是需要理解一个chrome协议。

好了，下面我们可以测试了；
测试——
1、打开Profile文件夹；这些文件夹一般在这里：

 Operating system      Profile folder location(s)
Windows 95/98/Me     C:WindowsApplication DataMozilla

C:WindowsProfiles<Windows login/user name>Application DataMozilla
Windows NT 4.x     C:WinntProfiles<Windows login/user name>Application DataMozilla
Windows 2000 and XP     C:Documents and Settings<Windows login/user name>Application DataMozilla
Windows Vista     C:Users<Windows login/user name>AppDataRoamingMozilla
Unix     ~/.mozilla/
Mac OS X     ~/Library/Mozilla/

~/Library/Application Support/ 

Linux下进入~/.mozilla/firefox/?????.default/extensions目录即可；
2、新建一个文本文件，名字就是你前面填写的那个<em:id>中的内容，我们这里是：lsosa@lsosa
3、重启Firefox，此时你可以看到右下角会有一个Hello，world的字样，表明注册扩展并测试成功！

三、书写Extension结构的简便方法，其实就是wizard；
推荐拿这个练手：
http://ted.mielczarek.org/code/mozilla/extensionwiz/

Reference:
http://developer.mozilla.org/en/docs/Building_an_Extension
http://www.lewislv.org/mozilla-ext/mozilla-ext.html#ch3_3_1_1