FireFox Extension --- 一个简单的例子

1、创建简单的FF 插件的参考资料地址：

https://developer.mozilla.org/en-US/docs/Building_an_Extension

 

建立一个简单的Hello world

①、在eclipse中没有安装FF extension开发的插件之前，先手动创建一个简单的FF插件，对于理解FF插件的开发是很有帮助的，建立一个普通的项目，建立如下的目录结构：

 

 

 

②、编写install.rdf文件

Install.rdf名字是固定的，位置也是固定的，它是用来描述整个插件的各种信息，包括提供者，版本号，ID等等，另外还可以提供了嵌入用户提供页面的功能，比如嵌入用户提供的option功能(<em:optionsURL>)等等。

<?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:name>HelloWorld</em:name> <em:version>1.0</em:version> <em:description>A test extension</em:description> <em:creator>Irving Sun</em:creator> <em:id>helloWorld@cn.irving.com</em:id>   <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>30.0.*</em:maxVersion> </Description> </em:targetApplication>   <em:iconURL></em:iconURL> <em:homepageURL></em:homepageURL> </Description> </RDF>

 

③、编写XUL文件

XUL(XML User Interface Language)，是一种Mozilla开发的一种使用XML进行用户界面描述的语言，在FF中，XUL文件可以直接访问，而且显示出来的就是一个页面。

 

另外，FF的整个界面都是通过XUL描述的，所以自然就可以把我们编写的XUL界面嵌入到FF浏览器中，以插件的界面的形式显示出来。

 

<?xml version="1.0"?>  <overlay id="sample"  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  <statusbar id="status-bar">      <statusbarpanel id="hello-panel" label="HelloWorld"    />  </statusbar>  </overlay>

XUL文档基于这个overlay标签进行扩展，从字面上可以看出，此处扩展了statusbar，添加了一个id为"hello-panel"的panel，并且上面添加上"hello-panel"。

 

④、关联chrome.manifest

FF对于资源的定位，自己定义了chrome://协议，类似于HTTP协议的使用。在FF的安装目录下，有一个browser包，里面会有类似于content/browser/browser.xul的文件，如果要访问这个资源，我们可以在FF的地址栏输入：chrome://browser/content/browser.xul

 

我们添加如下的关联代码：

content         sample        chrome/content/ overlay chrome://browser/content/browser.xul   chrome://sample/content/sample.xul

 

第一句表示：

当我们请求chrome://sample/content/目录下的资源的时候，将返回chrome/content/目录下的资源。sample表示包名，content表示请求类型。

第二句表示：

当我们请求chrome://browser/content/browser.xul的时候

将chrome://browser/content/browser.xul也扩展进来。

⑤编写build脚本

主要的任务就是将我们需要的东西都打包到一个后缀名为.xpi的文件里。

<project name='test' default='xpi'> <property name="src.dir" value="." /> <property name="dist.dir" value="dist" /> <property name="app.xpi.id" value="helloWorld@cn.ibm.com" />   <target name='xpi' depends='clean'> <mkdir dir="${dist.dir}"/> <zip destfile="${dist.dir}/${app.xpi.id}.xpi"> <fileset dir="${src.dir}"> <include name='chrome/**'/> <include name="chrome.manifest" /> <include name="install.rdf" /> </fileset> </zip> </target>   <target name='clean'> <delete dir='${dist.dir}' /> </target> </project>

 

运行之后，就会在当前目录下生成一个dist文件夹，我们需要的文件就在里面。

 

⑥调试

将生成的xpi文件拖到FF中，稍等一会儿就会出现安装的提示了。安装完了之后，重启FF，就可以在FF的右下角看到如下的信息：

关于调试，调试JS 的快捷键”Ctrl+Shift+j”

<!--EndFragment-->