有一点你要明白,你要开发的其实是扩展(extension),而不是插件(plugin)。我们的目标在FireFox的状态栏显示Hello World,如下图所示:
1. 准备工作
下载FireFox,我使用的版本是3.1b1
2. 创建存放扩展的目录结构
进到目录“
%HOMEPATH%/Application Data/Mozilla/Firefox/Profiles”,再进入一个default结尾的目录,然后再进入extensions目录。
这个目录就是FireFox默认用户存放所有
扩展
的地方。在我的机器上,这个目录全称是
:C:/Documents and Settings/Administrator/Application Data/Mozilla/Firefox/Profiles/g0xoke2u.default/extensions
在这个目录下创建一个新的目录用来存放待开发的扩展,目录名为
hellowold@sample.com。名字是随便取的,大概像一个邮件地址即可,后面会用到。
进入刚建的目录,再创建目录chrome目录。进入chrome目录,再创建一个content目录。
3. 添加Hello World到状态栏
在content目录下,创建一个ui.xul文本文件,输入以下内容并保存:
1. <?xml version="1.0"?>
2. <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
3. <statusbar id="status-bar">
4. <statusbarpanel id="my-panel" label="Hello world" />
5. </statusbar>
6. </overlay>
到此,核心的工作已经完成。你可能奇怪为什么没有编写任何代码。是的,FireFox的界面是由一系列的xml格式的xul文件定义的。如果你在浏览器的地址栏输入 chrome://browser/content/browser.xul,你能看到页面内置了另外一个FireFox。其中browser.xul定义了FireFox的主界面,你要做的就是找到browser.xul中定义的状态栏,并在其上增加文本“Hello World”。
ui.xul正是完成了这样的工作。其中 statusbar id="status-bar"
就是状态栏,而
statusbarpanel id=
"my-panel"
label="Hello world"
就是你在状态栏中新增的子面板,里面包含了你要显示的文字。
4. 告诉FireFox你添加的内容
接下来的工作和Hello World功能的实现无关。进入到本扩展的根目录,也就是
hellowold@sample.com,新建一个文本文件chrome.manifest。内容如下:
overlay chrome://browser/content/browser.xul chrome://sample/content/ui.xul
content sample
chrome/content/
这个文件告诉FireFox关于ui.xul文件的信息。其中第二行定义了一个名字为sample的content,它的路径是chrome/content/。第一行引用了这个content,并告诉FireFox这个content目录下有个叫ui.xul的文件,它应该被用来和主界面文件browser.xul一起定义整个浏览器的界面。
5. 添加安装信息
最后一步是定义关于这个扩展的信息,还是进入
hellowold@sample.com目录,新建一个install.rdf文本文件。内容如下:
1. <?xml version="1.0"?>
2.
3. <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
4. <Description about="urn:mozilla:install-manifest">
5. <em:id>hellowold@sample.com</em:id>
6. <em:version>1.00</em:version>
7. <em:type>2</em:type><!--2 means this is an extension-->
8.
9. <!-- Target Application this extension can install into, with minimum and maximum supported versions. -->
10. <em:targetApplication>
11. <Description>
12. <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id><!--ID of firefox-->
13. <em:minVersion>2.0</em:minVersion>
14. <em:maxVersion>3.9</em:maxVersion>
15. </Description>
16. </em:targetApplication>
17.
18. <!-- Front End MetaData -->
19. <em:name>Hello World</em:name>
20. <em:description>Hello World</em:description>
21. <em:creator>Xu Huanze(Wayne)</em:creator>
22. <em:homepageURL>http://blog.csdn.net/ZJXHZ</em:homepageURL>
23. </Description>
24. </RDF>
可以看到,里面定义了版本,描述,兼容的FireFox版本等等。其中 <em:id>hellowold@sample.com</em:id
>定义了本扩展的ID,注意这里的名字要和目录名相同。其中“
{ec8030f7-c20a-464f-9b0e-13a3a9e97384}”是FireFox的程序ID,紧接着的2.0和3.9表示本扩展兼容于2.0到3.9之间的FireFox版本。
6. 打包
你完全可以将刚才创建的文件和目录拷贝到另一台机器上以完成安装,但是也有其他的方法。这里介绍一种比较简单的,进入helloworld插件根目录,将其打包成zip文件。注意:chrome.manifest和install.rdf必须在zip文件的根目录下。重命名该文件,扩展名修改为xpi。在另外一个FireFox上安装时,可以打开“工具->附加组件”,然后将xpi文件拖放到这个窗口即可完成安装。
7. 参考
https://developer.mozilla.org/en/Building_an_Extension http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/#xpcom-sidebar