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. Firefox3. 安装Add-On SDK。4. 启动命令行，到sdk root 目录下，运行激活命令binactive5. 可以看到命令提示符现在应该有一个包含SDK的根目录名称的新的前缀：(C:Usersmozillasdkaddon-sdk) C:UsersWorksdkaddon-sdk在shell提示符运行: cfx它会产生下面信息，这里是第一行内容，后面是大量的使用信息：Usage: cfx options command这是 CFX命令行程序， 是主界面加载项的SDK，可以使用它来启动Firefox和测试插件，打包附加分发，查看文档和运行单元测试。cfx 的详细说明文档：/en-US/Add-ons/SDK/Tools/cfx开始一个简单的Add-On原文档如下：/en-US/Add-ons/SDK/Tutorials/Getting_started总结起来就是3步：1. 创建文文件夹： mkdir my-addon1. 2.运行如下命令cd my-addoncfx 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 writtenYour 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(/);保存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(/););返回到命令行界面，运行cfx run.如上代码用到了两个模块： “ui/button/action”, 这个模块允许添加你的按钮到浏览器工具栏，”tabs”允许对tab做一些基本的操作。本例中我们创建了一个按钮，并添加了对它的处理：在新标签页中打开了发布和打包：当完成了插件开发后，需要对插件进行打包成XPI文件。这种格式对Firefox是可安装的。打包命令同样很简单，运行如下命令：cfx xpi这个时候可以在当前目录下找到对应的xpi文件。接下来可以看这些SDK教程：/en-US/Add-ons/SDK/TutorialsAdd-On SDK下面介绍一下比较重点的一些SDK，首先要搞清楚Add-on脚本和Content脚本的区别。Content Sciprt的五项基本原则：1. Add-On为主要的代码，包含在main.js 以及其他在lib文件夹中的JS模块，可以使用SDKhigh-level和low-level的API，但是不能直接访问页面。2. Content Script 不能使用SDK的API，但是能访问页面3. SDKAPI加载Content Script时使用类似于page-mod或者是tabs。4. Content Script 可以作为一个字符串加载，但是更多情况下是存在于一个data目录下单独的文件中。5. 一个消息传递的API可以允许Add-On 代码和Content代码交互在Tab页面中插入脚本（原文：/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原文地址：/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:WINDOWSsystem32user32.dll);/* Declare the signature of the function we are going to call */var msgBox = lib.declare(MessageBoxW,ctypes.winapi_abi,32_t,32_t,ctypes.jschar.ptr,ctypes.jschar.ptr,32_t);var MB_OK = 0;var ret = msgBox(0, Hello world, title, MB_OK);lib.close();增加日志调试Firefox上面目前没办法单步调试发布后的扩展，增加以下代码替换console.log就能够在浏览器控制台下面看到，打开控制台可以在菜单 - Web开发者 - 浏览器控制台 打开，或者直接按快捷键 CTRL + SHIFT + Tconst consoleJSM = Cu.import(resource:/gre/modules/devtools/Console.jsm, );let consoleW = consoleJSM.console;参考资料：AddOns向导/en-US/Add-ons/SDK/Guides使用JavaScript模块/en-US/docs/Mozilla/JavaScript_code_modulesCustomizeble UI/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsmNotification andNotifcationBox/en-US/Add-ons/Code_snippets/Alerts_and_Notifications/ 文件下载/en-US/Add-ons/Code_snippets/Downloading_Files自引导型扩展/zh-CN/docs/Extensions/%E5%BC%95%E5%AF%BC%E5%9E%8B%E6%89%A9%E5%B1%95Package json 格式说明/en-US/Add-ons/SDK/Tools/package_jsonRDF的说明/en-US/Add-ons/Install_ManifestsCHROME.MANIFEST的说明/en-US/docs/Chrome_RegistrationJS调试说明/en-US/docs/Venkman通用教程/en-US/Add-ons/Overlay_Extensions/XUL_SchoolAdd-On脚本与Content 脚本通信/en-US/Add-ons/SDK/Guides/Content_Scripts部署一个有插件的扩展/en-US/docs/Deploying_a_Plugin_as_an_Extension扩展的更新版本，更新和兼容/en-US/docs/Extension_Versioning,_Update_and_Compatibility#Update_RDF_Format使用注册表来安装扩展/en-US/docs/Adding_Extensions_using_the_Windows_Registry如何打包Extension/zh-CN/docs/Extension_Packaging获取APP信息/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXULAppInfo#Example得到工作路径/en-US/docs/Using_nsIDirectoryService#Known_Locations/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDirectoryServiceProvider监控下载/en-US/docs/Mozilla/JavaScript_code_modules/Downloads.jsm注册表安装/en-US/docs/Installing_plugins_to_Gecko_embedding_browsers_on_Windows插件管理/en-US/Add-ons/Add-on_Manager多语言支持/en-US/Add-ons/SDK/Tutorials/l10n#Using_Identifiers获取about:config选项/en-US/Add-ons/SDK/Low-Level_APIs/preferences_serviceMcCoy 为 RDF 签名/en-US/docs/McCoy使用WINDOWS注册表接口/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM从指定的位置获取文件/en-US/Add-ons/Code_snippets/File_I_O#Get_a_file_in_given_directoryXPCOM 接口一览https:/developer.mozilla.or