《Firefox和Chrome扩展开发》由会员分享，可在线阅读，更多相关《Firefox和Chrome扩展开发（37页珍藏版）》请在金锄头文库上搜索。
1、 Firefox和Chrome扩展开发邓以克msn: Blog:http:/主要内容主要内容FirefoxFirefox扩展定义扩展定义Firefox扩展是什么？官方定义：它是用于给Firefox增加一些实用新功能的附加组件。使用的技术：XUL: 一种基于XML的用户界面语言CSS,DOM,JavaScriptXPCOM: 跨平台的COM技术，基本原理与微软的 COM类似XPConnect: 将JavaScript和XPCOM连接起来，即可以让 XPCOM组件被脚本化，在js代码中调用，也允许使用js来开发 XPCOM组件开发，相当于“胶水”。RDF: 资源定义框架， 用于保存扩展的注册信息和
2、描述信息常用扩展常用扩展前端开发利器 Firebug 广告拦截 Adblock Plus伟大的“油猴子” GreaseMonkey在火狐用户中有相当一部分人属于“油猴控” 油猴子究竟能做什么呢？它能够通过最简单的脚本来更改一个网站或者 网页的布局、外观、操作。兼容性测试 IE Tab火狐魔镜支持全新的视频单放功能，在独立的窗口播放网页视频DownThemAll 批量下载工具Gladder，foxyproxy 翻墙必备一个扩展，通常是一个XPI（Cross-Platform Installer）包，其实是 一个zip类型的压缩包，里边包括必须的文件。在下图中，显示了一个标准的扩展包括的文件和文件
3、的目录结构。扩展安装和运行的简单图示扩展安装和运行的简单图示扩展的安装由install.rdf负责，里面会描述此扩展的id,名称，目标载 体（firefox或其他Mozilla程序）名称和版本号等信息。Firefox根据这 些描述信息将扩展注册到其扩展管理器中扩展的运行主要由chrome.manifest文件来负责，由于Firefox的用户 界面是内核Firefox主界面容器扩展XUL界面Chrome.manifest融合XULRunnderXUL最简单的最简单的HelloWorldHelloWorld扩展的功能就是在Firefox的”工具“菜单项中加入一个”hello world”菜 单，点
4、击后弹出一个新的窗口项目目录结构项目目录结构项目的结构如下：helloworld/chrome.manifestinstall.rdfchrome/helloworld/content/contents.rdfoverlay.jsoverlay.xul hello.xullocale/en-USskin/overlay.css扩展安装描述信息扩展安装描述信息-install.rdf-install.rdf Hello World 1.0 Classic first extension dengyike ec8030f7-c20a-464f-9b0e-13a3a9e97384 1.5 3.9
5、扩展运行清单扩展运行清单-chrome.manifest-chrome.manifestcontent helloworldjar:chrome/helloworld.jar!/content/ overlay chrome:/browser/content/browser.xul chrome:/helloworld/content/overlay.xul localehelloworld en-US jar:chrome/helloworld.jar!/locale/en-US/ skinhelloworld classic/1.0 jar:chrome/helloworld.jar!/s
6、kin/ stylechrome:/global/content/customizeToolbar.xul chrome:/helloworld/skin/overlay.css融合这里最重要的就是content 和 overlay这两项content指明了xul和js脚本所在的目录overlay用于扩展运行时UI界面与Firefox主容器的XUL界面融合扩展的扩展的XULXUL界面界面 融合点JS JS脚本脚本var HelloWorld = onLoad: function() / initialization code this.initialized = true; , onMenuI
7、temCommand: function() window.open(“chrome:/helloworld/content/hello.xul“, “, “chrome“); ;window.addEventListener(“load“, function(e) HelloWorld.onLoad(e); , false);XPCOMXPCOMCOM技术的几个要点:接口查询（面向接口的编程）引用计数类工厂组件的自注册 Mozilla的XPCOM和微软的COM技术原理基本类似， 官方定义：The Cross Platform Component Object Module (XPCOM) i
8、s a framework which allows developers to break up monolithic software projects into smaller modularized pieces. These pieces, known as components, are then assembled back together at runtime.Xpcom组件在windows平台一般是dll文件，Linux下一般是动态共享链接库 (so)实例二：图片批量下载扩展（仅使用系统组件实例二：图片批量下载扩展（仅使用系统组件) )弹出图片下载窗口弹出图片下载窗口图片数
9、据的获取：var imageNodes = doc.getElementsByTagName(“img“);选择图片保存路径选择图片保存路径单张图片的下载单张图片的下载实例实例3 3：迅雷下载扩展：迅雷下载扩展( (使用自行开发的组件）使用自行开发的组件）项目结构项目结构和以前的最大不同是新增了一个componets目录，用于存放用户自行编写的 XPCOM组件（一般使用C+编写），一般是由描述接口定义的xpt文件及组件 接口实现的dll两部分组成，下图所示是迅雷开发的XPCOM组件迅雷下载组件提供的接口迅雷下载组件提供的接口CallThunder： 呼叫迅雷进行下载WhetherDynamic
10、Link： 是否是隐藏真实地址的链接LoadProfile： 加载配置文件ShowFloatBar： 显示漂浮工具条HideFloatBar： 隐藏漂浮工具条基本流程基本流程获取页面上要下载的URL地址创建迅雷下载组件读取迅雷配置文件下载 var n = g_thunderComponent.CallThunder(strUrls, strAsync,bMonitor,bAll);ChromeChrome扩展快速入门扩展快速入门一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而 成。扩展实际上就是一个web页面，可以用任何浏览器提供给web页 面的接口，从XMLH
11、ttpRequest 到JSON ，再到HTML本地缓存都可 以使用。Chrome扩展能做什么呢？我们会发现有些扩展在Chrome地址栏右 侧区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签 、tab导航标签)交互。扩展还可以和web页面交互，甚至是从web服 务器获取数据。每个扩展是 一个.crx文件（类似zip的 压缩文件），由下列文件组成一个manifest文件(主文件,json格式)至少一个HTML文件(主题可以没有HTML文件)JavaScript文件 (可选，非必须)任何其他你需要的文件(比如图片)ChromeChrome扩展快速入门扩展快速入门开发技术HTML, CSS
12、和JavaScriptchrome.* APIHTML5localStorageWeb DatabaseXMLHttpRequestWebKit API 和 V8 API。ChromeChrome扩展的扩展的UIUI形式形式Browser actionChromeChrome扩展的扩展的UIUI形式形式Page actionChromeChrome扩展的扩展的UIUI形式形式Content Script工作原理工作原理两种页面的区别两种页面的区别Background page 和 PopUp pagepopup.html中定义的Javascript变量会在popup.html页面关闭时被释放，
13、background.html可以保存一些一直需要使用的变量的作用，这里定义的 javascript变量会在Chrome浏览器生命期中一直存在，可以把要一直存在 的数据保存在这里。先在background.html中定义好变量， var global_email = “;然后在popup.html中用以下方式来引用这些变量 var bgpg = chrome.extension.getBackgroundPage(); bgpg.global_email = ““;实例实例4 4：最简单的：最简单的HelloWorldHelloWorldManifest.json “name“: “Hello
14、 World插件“,“version“: “1.0“,“description“: “第一个Chrome插件“,“browser_action“: “default_icon“: “icon.png“, “popup“: “popup.html“ popup.html Hello,World! welcome 项目结构Helloworld/manifest.jsonpopup.html实例实例5 5： Email This Page Email This Page组成部分：options.html 选项页面background.html 后台页面content_script.js 内容脚本，它
15、可以和页面进行进行交互 ，还可以 与父扩展进行消息通信基本思路基本思路Step1: background页面给browserAction增加“单击”事件的监听器 若是以”http”或”https”开头的页面，则执行content_script.js这个内容脚本中 的js代码，同时为连接通信注册监听器。 Step2: content_script.js这个内容脚本可以与当前页面进行交互，首 先获取当前页面标题和高亮选中的文字内容，然后与background页 面进行消息通信，将数据打包传送给后者Step3: background页面监听到来自内容脚本传送来的数据，就通过 本地默认邮件客户端或gmail发送运行效果运行效果NPAPINPAPI插件（类似于插件（类似于XPCOMXPCOM组件）组件）Chrome扩展可以包含NPAPI插件这样的二进制组件。如果你想在扩展中 使用一个NPAPI插件，首先在扩展中为其创建一个目录,名为”plugins”,然 后在清单文件中
