Firefox和 Chrome扩 展 开 发 邓 以 克2010年 11月 8日 Firefox扩展快速入门实例1：简单的HelloWorldXPCOM跨平台的COM技术实例2:图片批量下载实例3：迅雷下载扩展Chrome扩展快速入门实例4：Hello World 实例5: Email this page扩展性：Firefox vs Chrome Firefox扩展是什么？ 官方定义：它是用于给Firefox增加一些实用新功能的附加组件 使用的技术： XUL: 一种基于XML的用户界面语言 CSS,DOM,JavaScript XPCOM: 跨平台的COM技术，基本原理与微软的 COM类似 XPConnect: 将JavaScript和XPCOM连接起来，即可以让XPCOM组件被脚本化，在js代码中调用，也允许使用js来开发XPCOM组件开发，相当于“胶水” RDF: 资源定义框架， 用于保存扩展的注册信息和描述信息 前端开发利器 Firebug 广告拦截 Adblock Plus 伟大的“油猴子” GreaseMonkey 在火狐用户中有相当一部分人属于“油猴控” 油猴子究竟能做什么呢？它能够通过最简单的脚本来更改一个网站或者网页的布局、外观、操作。
兼容性测试 IE Tab 火狐魔镜 支持全新的视频单放功能，在独立的窗口播放网页视频 DownThemAll 批量下载工具 Gladder，foxyproxy 翻墙必备 一个扩展，通常是一个XPI（Cross-Platform Installer）包，其实是一个zip类型的压缩包，里边包括必须的文件 在下图中，显示了一个标准的扩展包括的文件和文件的目录结构 扩展的安装由install.rdf负责，里面会描述此扩展的id,名称，目标载体（firefox或其他Mozilla程序）名称和版本号等信息Firefox根据这些描述信息将扩展注册到其扩展管理器中 扩展的运行主要由chrome.manifest文件来负责，由于Firefox的用户界面是 内核Firefox主界面容器 扩展XUL界面Chrome.manifest融合XULRunnderXUL 扩展的功能就是在Firefox的”工具“菜单项中加入一个”hello world”菜单，点击后弹出一个新的窗口 项目的结构如下： helloworld/ chrome.manifest install.rdf chrome/ helloworld/ content/ contents.rdf overlay.js overlay.xulhello.xul locale/en-US skin/ overlay.css Hello World 1.0 Classic first extension dengyike ec8030f7-c20a-464f-9b0e-13a3a9e97384 1.5 3.9 content helloworld jar:chrome/helloworld.jar!/content/overlay chrome:/browser/content/browser.xulchrome:/helloworld/content/overlay.xullocale helloworld en-US jar:chrome/helloworld.jar!/locale/en-US/skin helloworld classic/1.0 jar:chrome/helloworld.jar!/skin/style chrome:/global/content/customizeToolbar.xulchrome:/helloworld/skin/overlay.css 融合 这里最重要的就是content 和 overlay这两项 content指明了xul和js脚本所在的目录 overlay用于扩展运行时UI界面与Firefox主容器的XUL界面融合 融合点 var HelloWorld = onLoad: function() / initialization code this.initialized = true; , onMenuItemCommand: function() window.open(chrome:/helloworld/content/hello.xul, , chrome); ; window.addEventListener(load, function(e) HelloWorld.onLoad(e); , false); COM技术的几个要点: 接口查询（面向接口的编程） 引用计数 类工厂 组件的自注册Mozilla的XPCOM和微软的COM技术原理基本类似，官方定义：The Cross Platform Component Object Module (XPCOM) is 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) 图片数据的获取： var imageNodes = doc.getElementsByTagName(img); 和以前的最大不同是新增了一个componets目录，用于存放用户自行编写的XPCOM组件（一般使用C+编写），一般是由描述接口定义的xpt文件及组件接口实现的dll两部分组成，下图所示是迅雷开发的XPCOM组件 CallThunder： 呼叫迅雷进行下载 WhetherDynamicLink： 是否是隐藏真实地址的链接 LoadProfile： 加载配置文件 ShowFloatBar： 显示漂浮工具条 HideFloatBar： 隐藏漂浮工具条 获取页面上要下载的URL地址 创建迅雷下载组件 读取迅雷配置文件 下载 var n = g_thunderComponent.CallThunder(strUrls, strAsync,bMonitor,bAll); 一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。
扩展实际上就是一个web页面，可以用任何浏览器提供给web页面的接口，从XMLHttpRequest 到JSON ，再到HTML本地缓存都可以使用 Chrome扩展能做什么呢？我们会发现有些扩展在Chrome地址栏右侧区域增加一个图标还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互扩展还可以和web页面交互，甚至是从web服务器获取数据 每个扩展是 一个.crx文件（类似zip的 压缩文件），由下列文件组成 一个manifest文件(主文件,json格式) 至少一个HTML文件(主题可以没有HTML文件) JavaScript文件 (可选，非必须) 任何其他你需要的文件(比如图片) 与Firefox扩展相比几点进步 安装后立即使用，无须重启浏览器 自动更新到最新版本 在独立进程中运行，稳定安全，即使崩溃也不会影响其他 开发技术 HTML, CSS和JavaScript chrome.* API HTML5 localStorage Web Database XMLHttpRequest WebKit API 和 V8 API Browser action Page action Content Script Background page 和 PopUp page popup.html中定义的Javascript变量会在popup.html页面关闭时被释放， background.html可以保存一些一直需要使用的变量的作用，这里定义的javascript变量会在Chrome浏览器生命期中一直存在，可以把要一直存在的数据保存在这里。
先在background.html中定义好变量，var global_email = ; 然后在popup.html中用以下方式来引用这些变量var bgpg = chrome.extension.getBackgroundPage();bgpg.global_email = ; Manifest.json name: Hello World插件, version: 1.0, description: 第一个Chrome插件, browser_action: default_icon: icon.png,popup: popup.html popup.htmlHello,World!welcome 项目结构 Helloworld/ manifest.json popup.html 组成部分： options.html 选项页面 background.html 后台页面 content_script.js 内容脚本，它可以和页面进行进行交互 ，还可以与父扩展进行消息通信 Step1: background页面给browserAction增加“单击”事件的监听器若是以”http”或”https”开头的页面，则执行content_script.js这个内容脚本中的js代码，同时为连接通信注册监听器。
Step2: content_script.js这个内容脚本可以与当前页面进行交互，首先获取当前页面标题和高亮选中的文字内容，然后与background页面进行消息通信，将数据打包传送给后者 Step3: background页面监听到来自内容脚本传送来的数据，就通过本地默认邮件客户端或gmail发送 Chrome扩展可以包含NPAPI插件这样的二进制组件如果你想在扩展中使用一个NPAPI插件，首先在扩展中为其创建一个目录,名为”plugins”,然后在清单文件中为其注册如下：format_version: 1,id: 00123456789ABCDEF0123456789ABCDEF0123456,version: 1.0,name: My First Extension,description: The first extension that I made.,plugins_dir: plugins 实例：Google官方的Screen Capture 扩展 Firefox截止到2010-10-7 ，AMO上共有受托管的扩展9442个 Chrome截止到2010-10-15 ，Chrome扩展数量已经超过8000大关 扩展安装时，Firefox需要重启，而Chrome直接启用，无须重启 扩展的数量两者已经十分接近，但从扩展的质量来看，Chrome仍旧落后于Firefox,例如Chrome上还没有与FF上firebug相媲美的 Firefox的扩展是融合到浏览器主进程中的，安全性不够，Chrome扩展运行在隔离的进程中，某个扩展的安全问题不会影响到整个浏览器 FF的扩展在启动时升级（需要用户确认），而Chrome扩展自动升级 对浏览器的性能影响：1）在数量较少的扩展情况下，两者体验无区别，Chrome可能稍占优势，因为独立进程在单个扩展崩溃时不会影响整个浏览器。
2）在数量中等，如10-15个扩展，Chrome明显占有优势3）在数量较多的情况下，如20个扩展或更多，我们会发现火狐的资源占用和速度和中等数量的情况下没有太大区别，但是Chrome的内存占用节节攀升，翻身速度和扩展的增加数成正比 2021年4月17日星期六 。