现在的位置: 首页 > 综合 > 正文

Firefox插件/扩展开发之Hello World无废话版

2017年08月05日 ⁄ 综合 ⁄ 共 3012字 ⁄ 字号 评论关闭
有一点你要明白,你要开发的其实是扩展(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. <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  3.   <Description about="urn:mozilla:install-manifest">
  4.     <em:id>hellowold@sample.com</em:id>
  5.     <em:version>1.00</em:version>
  6.     <em:type>2</em:type><!--2 means this is an extension-->
  7.    
  8.     <!-- Target Application this extension can install into, with minimum and maximum supported versions. --> 
  9.     <em:targetApplication>
  10.       <Description>
  11.         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id><!--ID of firefox-->
  12.         <em:minVersion>2.0</em:minVersion>
  13.         <em:maxVersion>3.9</em:maxVersion>
  14.       </Description>
  15.     </em:targetApplication>
  16.    
  17.     <!-- Front End MetaData -->
  18.     <em:name>Hello World</em:name>
  19.     <em:description>Hello World</em:description>
  20.     <em:creator>Xu Huanze(Wayne)</em:creator>
  21.     <em:homepageURL>http://blog.csdn.net/ZJXHZ</em:homepageURL>
  22.   </Description>      
  23. </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

抱歉!评论已关闭.