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>[e-mail]</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="[e-mail]" />

 

<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-->