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>[email protected]</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="[email protected]" />
<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-->