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.csdn.net/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