firefox 插件制作
【firefox 插件制作】
昨天在晚上看见别人自己做的迅雷的Firefox 2.0.0.1插件,便对Firefox的插件制作起了兴趣。去Mozilla Developer Center上面去学习了一下，发现Firefox插件的制作还真是非常的简单。
主要参考了
http://developer.mozilla.org/en/docs/Building_an_Extension
http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions
http://www.rietta.com/firefox/Tutorial/overview.html
这三篇文章，挑文章中的一些精华的部分，做个简要的分析吧：
预备知识 ：
1、Firefox 的界面引擎是非常出色的，可以用XML和Javascript来定义界面的布局、属性、动作等。界面的布局XML是Firefox自定义的格式，叫做XUL ，XUL提供对界面各种元素如：按钮、菜单、工具栏等的描述，并将各个界面元素的动作以事件的形式邦定到Javascript. 这一点和HTML十分类似。
2、Firefox 的插件是一个有特定目录结构和文件的文件夹，打包成zip文件后，再重命名为 XXX.xpi，便成了一个插件。通常的目录文件结构如下：
extension.xpi:
/install.rdf
/components/*
/components/cmdline.js
/defaults/
/defaults/preferences/*.js
/plugins/*
/chrome.manifest
/chrome/icons/default/*
/chrome/
/chrome/content/
Table 1
3、Chrome URIs
URI顾名思义了，是一个Uniform Resource Identifiers ，也就是一个资源的地址，是Firefox寻找插件资源位置的表示形式，通常你可以在XUL文件中看到很多这样的语句，如：
chrome://sample/content/sample.xul
你可以在Firefox的地址栏中输入：chrome://browser/content/browser.xul，你会看到一个空的Firefox的界面，还是满神奇的。
正式开始：
1、创建目录结构
创建一个目录结构，如上面Table 1所示，并不需要创建所有的文件和文件夹，只要创建几个必须的就行了：
e.g. C:\extensions\myExtension\
C:\extensions\myExtension\chrome\content
C:\extensions\myExtension\install.rdf
C:\extensions\myExtension\chrome.manifest
上面的文件都是必须的
2、创建并编辑install.rdf文件
<?xml version=”1.0″?>
<RDF xmlns=”http://www.w3.org/1999/02/22-rdf-syntax-ns#” xmlns:em=”http://www.mozilla.org/2004/em-rdf#”>
<Description about=”urn:mozilla:install-manifest”>
<em:id>sample@foo.net</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>
<!– Target Application this extension can install into, with minimum and maximum supported versions. –>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<!– Front End MetaData –>
<em:name>Sample!</em:name>
<em:description>A test extension</em:description>
<em:creator>Your Name Here</em:creator>
<em:homepageURL>http://www.foo.com/</em:homepageURL>
</Description>
</RDF>
install.rdf文件是告诉Firefox要插件的信息的，其中包括了插件的id，版本，说明，适用Firefox版本等重要信息。
3、创建并编辑XUL文件
<?xml version=”1.0″?>
<overlay id=”sample” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<statusbar id=”status-bar“>
<statusbarpanel id=”my-panel” label=”Hello, World”/>
</statusbar>
</overlay>
在chrome/content文件夹中创建一个文件，如sample.xul,并将上面的内容复制进去。
其中overlay告诉Firefox这个插件是在原来的browser.xul上添加一些元素， 代表是在Firefox中的status-bar上面添加一些元素，其中的id是不能改变的，一个Firefox只能有一个status-bar，是吧。。。。
3、创建并编辑chrome.manifest文件
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
content sample chrome/content/
这manifest文件就和jar中的manifest文件的作用差不多，就是配置一些路径之类的。overlay告诉Firefox将sample.xul整合到browser.xul中。content告诉Firefox可以到 chrome/content/ 这个文件下找到插件的所有文件。这个路径是相对于chrome.manifest.而言的。当插件安装完成后，你也可以通过chrome://sample/content/XXX 来访问sample插件的一些资源。
4、打包和安装
完成上述所有的步骤之后，只要将所有的文件打包成一个zip文件。记住：进入插件所在的文件夹，如：C:\extensions\myExtension\，然后将这个文件夹下的内容全部打包，而不是将myExtension这个文件夹打包。否则，将会报“无法找到安装脚本 204”这个错误。打包完成之后，将文件后缀名修改一下： zip->xpi，就行了。
然后打开Firefox，将这个XXX.xpi文件拖到Firefox中就可以了。
心得：
看完了这些教程之后，我也尝试着做了一个简单的插件。由于Firefox提出的XUL这个配置文件写界面的概念，插件的制作真的变得非常的简单。 IE中的ActiveX控件和它比起来，就差远了。插件制作的主要工作，也变成了javascript脚本的编写。就和写网页差不多了，本来我还想自己做 一个复杂点的插件，无奈javascript的水平实在是有限，所以就放弃了。
由此，我也有了一些想法，既然Firefox可以用配置文件做界面，Java中也应该可以实现，而最最通用，最为人熟知的格式，莫过于HTML了。 Google了一下，貌似还没有这方面的先例。呵呵，Java中做界面，可不是一般的麻烦 ，虽然有拖动的IDE，但要做出的复杂的界面还是非常的麻烦，HTML能够很简单的做出漂亮的界面。正好可以运用到这上面来。准备在接下去的日子里研究研 究如何实现这个功能。
今天尝试开发一个Firefox的扩展。虽然比较简单，网上也有很多教程，但是感觉一些教程写的比较麻烦，在初步的开发过程中并没有用到那些东西，于是自己把开发过程记录下来。我是根据Mozilla官方教程开发的，有兴趣的朋友可以自己去看看：https://developer.mozilla.org/en/Building_an_Extension。
按照一般的教程，第一个程序都是使用最简单的Hello World，现在我们就制作一个Firefox的Hello World扩展。
开发Firefox插件并没有看上去的那样复杂，仅仅使用XML和JavaScript就可以完成。当然，这个意思是Firefox插件开发使用的技术是XML和JavaScript，要做出一个完善的插件涉及到很多方面。但是对于我们的Hello World就不需要那么多东西啦！
1. 准备目录结构
首先在硬盘上建立一个目录，名为extension。这个名字是随意取的。然后在里面建立chrome文件夹，再在chrome里面建立content文件夹。注意这两个文件夹的名字都是固定的，不能随意改动。然后在extension里面新建两个文本文件，并且取名为chrome.manifest和install.rdf。这样，就建立起如下的目录结构：
extension
|--install.rdf
|--chrome.manifest
|--chrome
|--content
2. 编写install.rdf
用文本编辑器打开install.rdf文件，输入以下内容：
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<!-- 指出扩展的ID。该ID应该是一个Email格式的字符串，或者是一个GUID。注意，使用Email的作用是保证该ID的唯一性，并不要求这个Email地址是有效的。必填。 -->
<em:id>sample@example.net</em:id>
<!-- 指出插件的版本号。必填。 -->
<em:version>1.0</em:version>
<!-- 在这里的值必须是2。该标签说明该应用的Firefox扩展，而不是其他XUL应用程序。Firefox插件的代码是2，如果是Firefox主题则会是4。必填。 -->
<em:type>2</em:type>
<!-- 安装扩展的目标应用程序以及最高版本和最低版本。必填。 -->
<em:targetApplication>
<Description>
<!-- Firefox的ID，这个值不能改变。必填。 -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<!-- 指明能使用该扩展的Firefox最低版本。这里是指1.5。必填。 -->
<em:minVersion>1.5</em:minVersion>
<!-- 指明能使用该扩展的Firefox最高版本。这里是指3.0.x。结合minVersion，即是说本扩展只适用于1.5和3.0.x之间的版本。必填。 -->
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<!-- 扩展的元数据。 -->
<!-- 扩展名字。必填。 -->
<em:name>sample</em:name>
<!-- 扩展的描述。这里的描述将出现在Firefox的工具-附加组件的描述栏。选填。 -->
<em:description>A test extension</em:description>
<!-- 扩展作者。选填。 -->
<em:creator>galaxy.org</em:creator>
<!-- 扩展主页的URL。选填。 -->
<em:homepageURL>http://www.example.com/</em:homepageURL>
</Description>
</RDF>
install.rdf文件是供具有扩展管理功能的XUL应用程序使用的，XUL应用程序可以使用该文件识别正在安装的扩展的信息。install.rdf文件具有下面的格式：
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<!-- properties -->
</Description>
</RDF>
上面的install.rdf的注释很多，实际应用中就不需要那么多注释了。
3. 编写XUL文件
Firefox的界面使用XUL和JavaScript进行描述。XUL即XML User Interface Language，是Mozilla开发的一种使用XML进行用户界面描述的语言。XUL只用来定义用户界面，其组件的功能由JavaScript进行定义。
Firefox的整个界面都使用XUL进行定义。可以在%FIREFOX_INSTALL_DIR%/chrome/browser.jar里面找到content/browser/browser.xul文件。（说明一下，jar文件可以用WinRAR或其他一些压缩工具解压缩，这是一个使用zip算法压缩的压缩包）在这个XUL文件中有这么一段：
<statusbar id="status-bar">
<!-- ... <statusbarpanel>s ... -->
</statusbar>
这里的这个<statusbar id="status-bar">称为“覆盖点(Overlay，我不知道官方的翻译是什么，自己把它翻译成了这个词，想想还算是准确，不过为了不引起混淆，下面还是使用Overlay这个单词吧 :-) )”。所谓Overlay，就是在运行一个XUL文档的时候可以附加其他的XUL文件的方式。就是说，我们本来的XUL是a.xul，这里面有一个Overlay定义为overlay-point，那么我们可以在另外一个b.xul中对这个Overlay进行追加，从而在执行a.xul的时候可以自动的把b.xul的内容附加到overlay-point并运行出来。这么说有些抽象，来看我们的代码：
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World" />
</statusbar>
</overlay>
刚刚说了，<statusbar id="status-bar">就是一个Overlay，那么在我们的插件的XUL文档就是基于这个Overlay进行扩展。在这里，我们在statusbar上面定义了一个statusbarpanel，它的id是my-panel，label是Hello, World。这段代码比较清晰，就是在原有的statusbar上追加一个statusbarpanel，这个statusbarpanel显示Hello, World。
明白了这段代码之后，我们把这个文件定义成sample.xul，保存在chrome/content下面。可以看到这个文件夹结构和Firefox自有的那个结构是一致的。
在写完了XUL文件之后，我们要定义其chrome.manifest。XUL文档需要通过chrome://协议进行请求。chrome://类似http://协议，只不过是用来请求XUL文档的。在Firefox的地址栏中输入chrome://browser/content/browser.xul，看看有什么反应，就会知道XUL文档的作用了。
这个URL包括四部分：
1) chrome:// - 即协议名，就像http://一样；
2) browser/ - 包名，即插件的包的ID；
3) content/ - 请求内容的类型；
4) browser.xul - 请求的文件名。
所以，chrome://foo/skin/bar.png就是请求一个在foo包下面的skin里面的bar.png文件。
4. 编写chrome.manifest
在chrome.manifest中添加下面一句：
content sample chrome/content/
这里指明，请求类型时content，包名是sample，位置是相对于chrome.manifest文件的chrome/content/。注意，这里的最后面一个/是不能缺少的！
然后需要告诉Firefox我们的扩展Overlay，在chrome.manifest里面再添加一句：
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
这句是告诉Firefox，需要在chrome://browser/content/browser.xul加载的时候将chrome://sample/content/sample.xul扩展进来。
5. 测试
至此，我们已经完成了这个Hello World的扩展。下面我们测试一下。
使用压缩工具将extension文件夹压缩成zip文件，注意有些工具会将本文件夹加入压缩包，这里要求压缩包解开之后应该是extension下面的两个文件和一个文件夹，而不是extension文件夹。然后将后缀名改为xpi。然后打开Firefox（我测试的版本是3.0.10），将这个xpi拖到窗口中，Firefox将提示安装扩展，按照一般的过程安装之后，重启Firefox有时候在安装扩展时会有找不到安装脚本的错误，就是因为在压缩时根下面没有install.rdf那一层导致的。
当我们在重启Firefox之后，右下角出现Hello, Word字样时，说明我们的扩展已经安装成功了！
本文出自 “豆子空间” 博客，请务必保留此出处http://devbean.blog.51cto.com/448512/160298
