firefox插件的开发.docxVIP

前言 本文部分教程是参考Firefox 的 MDN一些开发文档，文章结尾的参考资料中附带一些文档；在Gecko 2.0 之前只能使用Overlay Extension这种技术进行扩展开发，现在有一种新的开发方式可以基于Add-On SDK进行开发，本文只对插件项目使用到的一些Add-On开发技术做一些简单的讲解，不涉及到Overlay Extension开发，若有兴趣可以自行参考文章结尾。 环境准备 安装python 2.5、2.6或者2.7，3.X不支持，将Python的路径加入到环境变量PATH中。 Firefox 安装? HYPERLINK /pub//labs/jetpack/jetpack-sdk-latest.zip \t _top Add-On SDK。 启动命令行，到sdk root 目录下，运行激活命令bin\active 可以看到命令提示符现在应该有一个包含SDK的根目录名称的新的前缀：(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk 在shell提示符运行: cfx 它会产生下面信息，这里是第一行内容，后面是大量的使用信息： Usage: cfx [options] [command] 这是 CFX命令行程序， 是主界面加载项的SDK，可以使用它来启动Firefox和测试插件，打包附加分发，查看??文档和运行单元测试。cfx 的详细说明文档：  HYPERLINK /en-US/Add-ons/SDK/Tools/cfx \t _top /en-US/Add-ons/SDK/Tools/cfx 开始一个简单的Add-On 原文档如下：  HYPERLINK /en-US/Add-ons/SDK/Tutorials/Getting_started \t _top /en-US/Add-ons/SDK/Tutorials/Getting_started 总结起来就是3步： 创建文文件夹： mkdir my-addon 2.?运行如下命令 cd my-addon cfx init 得到如下输出： * lib directory created * data directory created * test directory created * doc directory created * README.md written * package.json written * test/test-main.js written * lib/main.js written * doc/main.md written Your sample add-on is now ready for testing: try cfx test and then cfx run. Have fun! 3.?运行cfx run可以运行该Add-On。 一旦成功启动了firefox, 说明环境搭建成功。 现在可以在lib/main.js中添加如下代码，main.js是在之前的cfx init中被自动创建。 var buttons =require(sdk/ui/button/action); var tabs =require(sdk/tabs); var button = =buttons=.ActionButton({ =id=:mozilla-link, =label=:Visit Mozilla, =icon=:{ 16:./icon-16.png, 32:./icon-32.png, 64:./icon-64.png }, =onClick=: handleClick }); functionhandleClick( =state=){ =tabs=.open(/); } 保存main.js，保存如下3张图片到root/data目录下面 icon-16.pngicon-32.pngicon-64.png 注意Firefox 29之前的版本用以下代码代替上面那一段，因为上述代码中的部分接口（例如ui/button/action）在之前的版本中没有开放。 _var_ widgets _=_ require(sdk/widget); _var_ tabs _=_ require(sdk/tabs); _var_ widget _=_ _widgets_ .Widget({ _id_ : _mozilla-link_ , _label_ : _Mozilla website_ , _contentURL_ :require(sdk/self).data.url(icon-16.png), _onClic