firefox插件开发.docx_咨信网zixin.com.cn

资源描述

前言本文部分教程是参考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

展开阅读全文