firefox插件开发.docx

前言
本文部分教程是参考Firefox 的 MDN一些开发文档，文章结尾的参考资料中附带一些文档；在Gecko 2.0 之前只能使用Overlay Extension这种技术进行扩展开发，现在有一种新的开发方式可以基于Add-On SDK进行开发，本文只对插件项目使用到的一些Add-On开发技术做一些简单的讲解，不涉及到Overlay Extension开发，若有兴趣可以自行参考文章结尾。
环境准备
1. 安装python 2.5、2.6或者2.7，3.X不支持，将Python的路径加入到环境变量PATH中。
2. Firefox
3. 安装 Add-On SDK。
4. 启动命令行，到sdk root 目录下，运行激活命令bin\active
5. 可以看到命令提示符现在应该有一个包含SDK的根目录名称的新的前缀：(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>
在shell提示符运行: cfx
它会产生下面信息，这里是第一行内容，后面是大量的使用信息：
Usage: cfx [options] [command]
这是 CFX命令行程序， 是主界面加载项的SDK，可以使用它来启动Firefox和测试插件，打包附加分发，查看​​文档和运行单元测试。
cfx 的详细说明文档：
https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx
开始一个简单的Add-On
原文档如下：
https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started
总结起来就是3步：
1. 创建文文件夹： mkdir my-addon
1. 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!"
1. 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("http://www.mozilla.org/");
}
保存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"),
_onClick_ :function(){
_tabs_ .open("http://www.mozilla.org/");
}
});
返回到命令行界面，运行cfx run.
如上代码用到了两个模块： “ui/button/action”, 这个模块允许添加你的按钮到浏览器工具栏，”tabs”允许对tab做一些基本的操作。本例中我们创建了一个按钮，并添加了对它的处理：在新标签页中打开了http://www.mozillia.org
发布和打包：
当完成了插件开发后，需要对插件进行打包成XPI文件。这种格式对Firefox是可安装的。打包命令同样很简单，运行如下命令：
cfx xpi
这个时候可以在当前目录下找到对应的xpi文件。
接下来可以看这些SDK教程：
https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials
Add-On SDK
下面介绍一下比较重点的一些SDK，首先要搞清楚Add-on脚本和Content脚本的区别。
Content Sciprt的五项基本原则：
1. Add-On为主要的代码，包含在main.js 以及其他在lib文件夹中的JS模块，可以使用SDK high-level 和 low-level 的API，但是不能直接访问页面。
2. Content Script 不能使用SDK的API，但是能访问页面
3. SDK API 加载Content Script时使用类似于 page-mod 或者是 tabs。
4. Content Script 可以作为一个字符串加载，但是更多情况下是存在于一个data目录下单独的文件中。
5. 一个消息传递的API可以允许Add-On 代码和Content代码交互
在Tab页面中插入脚本
（原文：
https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab ）
要更改某些特定的TAB页，加载脚本时可调用tab的attach方法。
代码如下：
var button =require("sdk/ui/button/action").ActionButton({
=id=:"style-tab",
=label=:"Style Tab",
=icon=:"./icon-16.png",
=onClick=:function(){
require("sdk/tabs").activeTab.attach({
=contentScript=:'document.body.style.border = "5px solid red";'
});
}
});
要运行这段代码必须有一个叫 icon-16.png的图标文件放在add-on的data目录下面
图标如下：
然后打开一个tab并打开一个页面点击面板上相应的Addon的按钮，页面会出现如下图所示的一个红色边框
上例中，我们将一段脚本作为一个字符串传入。除非这段脚本极其简单，不然需要将脚本放入到一个单独的文件中，这样的话使脚本易于维护、调试和Reviedw。
比如，我们有一段脚本放在名为 my-script.js 的文件中。
var self =require("sdk/self");
var button =require("sdk/ui/button/action").ActionButton({
=id=:"style-tab",
=label=:"Style Tab",
=icon=:"./icon-16.png",
=onClick=:function(){
require("sdk/tabs").activeTab.attach({
=contentScriptFile=: self.data.url("my-script.js")
});
}
});
这样一来，就可以加载多个脚本，脚本之间也可以相互调用，例如可以调用jQuery。
Add-On脚本和Content脚本的交互
Add-On脚本和Content脚本不能直接相互调用和访问对方的变量，但是它们能给对方发送消息。
要发送消息，发起方调用port.emit() 接收方接收时使用port.on()。

在content脚本中，port是全局变量self的一个属性。
在Add-on脚本中，tab.Attach返回一个 worker 对象，该对象包含了port属性，这个属性可以用来发消息到content脚本中。
下面的代码展示了content脚本中接收方的部分：
=self=.port.on("drawBorder",function( =color=){
=document=.body.style.border ="5px solid "+ color;
});
这部分代码展示了发起方使用attach返回的对象发送了一个”drawBord”消息：
var self =require("sdk/self");
var tabs =require("sdk/tabs");
var button =require("sdk/ui/button/action").ActionButton({
=id=:"style-tab",
=label=:"Style Tab",
=icon=:"./icon-16.png",
=onClick=:function(){
=worker= = =tabs=.activeTab.attach({
=contentScriptFile=: self.data.url("my-script.js")
});
=worker=.port.emit("drawBorder","red");
}
“drawBorder” 不是内建的消息，它是由port.emit 调用的时候定义。
Attach函数不接受CSS直接注入
JS-ctype
原文地址： https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes
这个技术允许使用JS直接调用C/C++编写的本地库。不同于XPCOM，它允许开发者在多个不同的FIREFOX版本上可以调用同一个库。
注意js-ctype只能用在扩展的代码中，而对于页面不可用。
使用JS-ctype之前，需要引入ctype.jsm模块，如下代码演示了如何包含：
Components.utils.import("resource://gre/modules/ctypes.jsm")
加载本地库
当需要加载本地库时可以使用ctype.open，像这样：
var lib = ctypes.open("user32.dll");
返回的变量代表了被加载的模块。
调用ctype.open时搜索路径的顺序：
1. 应用程序路径
2. 系统路径
3. 16位系统路径
4. Windows路径
5. 当前工作路径
6. PATH中列出来的环境变量的路径
卸载本地库
当完成对本地库的使用，可以调用对象的close函数来关闭它
lib.close();
如果关闭失败，它会被垃圾回收自动关闭。
使用库
你需要声明一些新的类型时，可以是一些简单的或者复杂的类型，详细可参考 声明类型。
当需要声明调用方法的时候，可以参考 声明一个或多个方法。
一旦你声明类型和方法，你可以填充代码使得这些方法可用。实例化C数据对象和引用它们，在文章 Working with data 都有覆盖讲到。
内存管理
如果代码创建了一个结构体或者是数组，只要JS对象存在，这一段内存则始终可用。指向那段内存的指针必须被小心的管理，确定那段被引用的内存仍然被引用。
保持对象存在的类型：
接下来的js-ctype对象将持有引用对象，保持它们存在；这个列表不是详细的列表，但是能帮助理解内存管理，以及它如何影响你使用js-type。
1. 使用declare()声明出来的一个方法或者静态数据。
2. CType 能保持一个CType对象存活。
3. 在一些特殊的场景，CData 能保持一个CData对象存活， 比如访问一个结构中的一个字段、或者是一个数组中的某个元素中的一个CData对象，能保证存活。
不保持对象生命的类型：
注意使用address(), addressOfElement() 直接访问CData的内容，所产生的值不会持有它的对象，在使用其之前，必须明确的声明对一个对象的引用，这样垃圾回收才不会收集它。
示例程序：
Components.utils.import("resource://gre/modules/ctypes.jsm");
var lib = ctypes.open("C:\\WINDOWS\\system32\\user32.dll");
/* Declare the signature of the function we are going to call */
var msgBox = lib.declare("MessageBoxW",
ctypes.winapi_abi,
ctypes.int32_t,
ctypes.int32_t,
ctypes.jschar.ptr,
ctypes.jschar.ptr,
ctypes.int32_t);
var MB_OK = 0;
var ret = msgBox(0, "Hello world", "title", MB_OK);
lib.close();
增加日志调试
Firefox上面目前没办法单步调试发布后的扩展，增加以下代码替换console.log就能够在浏览器控制台下面看到，打开控制台可以在菜单 -> Web开发者 -> 浏览器控制台 打开，
或者直接按快捷键 CTRL + SHIFT + T
const consoleJSM = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
let consoleW = consoleJSM.console;
参考资料：
AddOns 向导
https://developer.mozilla.org/en-US/Add-ons/SDK/Guides
使用JavaScript模块
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules
Customizeble UI
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm
Notification and NotifcationBox
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Alerts_and_Notifications
// 文件下载
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Downloading_Files
自引导型扩展
https://developer.mozilla.org/zh-CN/docs/Extensions/%E5%BC%95%E5%AF%BC%E5%9E%8B%E6%89%A9%E5%B1%95
Package json 格式说明
https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json
RDF的说明
https://developer.mozilla.org/en-US/Add-ons/Install_Manifests
CHROME.MANIFEST的说明
https://developer.mozilla.org/en-US/docs/Chrome_Registration
JS调试说明
https://developer.mozilla.org/en-US/docs/Venkman
通用教程
https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School
Add-On脚本与Content 脚本通信
https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts
部署一个有插件的扩展
https://developer.mozilla.org/en-US/docs/Deploying_a_Plugin_as_an_Extension
扩展的更新版本，更新和兼容
https://developer.mozilla.org/en-US/docs/Extension_Versioning,_Update_and_Compatibility#Update_RDF_Format
使用注册表来安装扩展
https://developer.mozilla.org/en-US/docs/Adding_Extensions_using_the_Windows_Registry
如何打包Extension
https//developer.mozilla.org/zh-CN/docs/Extension_Packaging
获取APP信息
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXULAppInfo#Example
得到工作路径
https://developer.mozilla.org/en-US/docs/Using_nsIDirectoryService#Known_Locations
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDirectoryServiceProvider
监控下载
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Downloads.jsm
注册表安装
https://developer.mozilla.org/en-US/docs/Installing_plugins_to_Gecko_embedding_browsers_on_Windows
插件管理
https://developer.mozilla.org/en-US/Add-ons/Add-on_Manager
多语言支持
https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/l10n#Using_Identifiers
获取about:config选项
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/preferences_service
McCoy 为 RDF 签名
https://developer.mozilla.org/en-US/docs/McCoy
使用WINDOWS注册表接口
https://developer.mozilla.org/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM
从指定的位置获取文件
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/File_I_O#Get_a_file_in_given_directory
XPCOM 接口一览
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface
用_Mozilla_构建系统（Mozilla_Build_System）创建定制的_Firefox_扩展
https://developer.mozilla.org/zh-CN/docs/%E7%94%A8_Mozilla_%E6%9E%84%E5
•BA%E7%B3
•E7
•9F%EF%BC%88Mozilla_Build_System%EF%BC%89%E5%88%9B%E5
•BA%E5%AE%9A%E5%88%B6%E7%9A%84_Firefox_%E6%89%A9%E5%B1%95#Anatomy_of_a_Simple_C.2B.2B_Extension(.E4.B8.80.E4.B8.AA.E7.AE.80.E5.8D.95C.2B.2B.E6.89.A9.E5.B1.95.E7.9A.84.E5.89.96.E6.9E.90)
// 监听插件加载和卸载事件
https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload
XPCOM一个简单的例子

使用JS-CTYPE来调用本地库
https://developer.mozilla.org/en-US/docs/tag/js-ctypes
整合一个插件到FIREFOX

下载一个文件
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Downloading_Files
打日志
https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Local_Storage