火狐浏览器插件开发入门教程

黄璇

许多网友都想学习火狐浏览器插件开发这一方面的知识，不过，目前，许多资料都是比较晦涩难懂，不太适合初学者。那么，初学者想要学习火狐浏览器插件开发该怎么入门呢？还是一起来看看今天的火狐浏览器插件开发入门教程！

火狐浏览器
　　首先需要知道什么是“Firefox插件”。这里说的“插件”只是一个通俗的说法，其实Firefox这种扩展功能的“插件”包括：扩展extension和插件plugin。
　　Firefox火狐浏览器官方网站的解释是：Extensions are small add-ons that add new functionality to your Mozilla program. Plugins are programs that allow websites to provide content to you and have it appear in your browser.（扩展是能够给Mozilla增加一些新功能的附加软件，插件是允许网站向你提供内容并在浏览器中显示的程序）。通俗的讲，“扩展”是基于Firefox本身增加的一些实用功能，而“插件”则是在Firefox之外独立编写的程序，用于显示网页中的特定内容如Flash、视频和Java 等。
　　其实，我们需要开发的是Extension。
　　要开发Extension，可以分几步走：
　　1.了解什么是Extension，一般现成的Extension怎样组成的？里边包含的每个文件具体的作用是什么？
　　2.了解Firefox处理运行Extension的机制。例如Xpcom，chrome机制等。
　　3.看看入门例子，用记事本，做一个最简单的扩展，运行一下。另外，使用Firefox，下载一些常用的扩展，并查看一下人家的源代码。
　　4.正式搭建开发环境。
　　5.一边学习人家的代码，一边修改代码实现自己的扩展。
　　第一步和第二步：
　　需要了解：chrome，rdf，manifest，xul，xpcom等概念。
　　扩展（extensions）
　　Extensions添加新功能到Mozilla Firefox中。Extensions可以简单添加一个工具栏按钮，也可以实现一个完整的新功能。Extensions可以让firefox更加适合个人需要。
　　Extensions跟plugins（插件）不同。插件帮助浏览器显示特殊内容，例如播放多媒体文件。常见的插件是flash player。而Extensions也跟搜索引擎插件不同，搜索引擎插件只是在搜索栏里边多加入一个搜索引擎地址而已。
　　一个扩展，通常是一个XPI（Cross-Platform Installer Module）包，其实是一个zip类型的压缩包，里边包括必须的文件。在下边的图1中，显示了一个标准的扩展包括的文件和文件的目录结构。
firefox扩展目录结构
firefox扩展目录结构
　　在上图中，content 目录下面存放的是扩展的描述界面的 XUL 文件和增加行为的 JavaScript 文件。locale 目录存放的是本地化相关的文件。如果需要支持英文和中文，就可以在 locale 目录下面新建 en-US 和 zh-CN 目录来存放相应的本地化字符串。skin 目录存放的是一些 CSS 文件，用来定义扩展的外观。chrome.manifest 是 Chrome 注册的清单文件（参见 2.2节）。install.rdf 分别包含了扩展安装的信息。
　　chrome
　　Chrome 指的是应用程序窗口的内容区域之外的用户界面元素的集合，这些用户界面元素包括工具条，菜单，进度条和窗口的标题栏等。Chrome 提供者能为特定的窗口类型（如浏览器窗口）提供 chrome。有三种基本的 chrome 提供者：
　　l 内容（Content）：通常是 XUL（XML User Interface Language） 文件。 而XUL文件将会指定扩展在Firefox中运行时表现的界面和功能。XUL文件是一种Javascript文件，设计的目的是为了描述窗口和对话框的内容。
　　l 区域（Locale） ：存放本地化信息。
　　l 皮肤（Skin）：描述 chrome 的外观。通常包含 CSS 和图像文件。
　　XULRunner
　　XULRunner 项目提供一套称为XULRunner的Mozilla运行支持包，用于启动基于XUL+XPCOM（见2.4节）的程序，例如Firefox，Thunderbird，Sunbird。它提供各种机制，包括安装，升级，卸除这些软件的功能。
　　而Firefox整个程序主界面和扩展的界面都是由XUL文件来描述的，所以在Firefox运行过程中，和扩展使用过程中，都是靠XULRunner来支持。
　　XPCOM
　　XPCOM（Cross Platform Component Object Model）是一种跨平台组件对象模型，类似于微软的 COM。它有多种语言系结（Language Binding），使 XPCOM 组件可使用并实现于C++、JavaScript、Java 及 Python。XPCOM 的界面是由称为 XPIDL （Interface Definition Language）所定义。
　　XPCOM 自身提供了一套核心组件和类别，例如，档案和内存管理、线程、基本数据结构（strings， arrays， variants）等。大多数 XPCOM 组件并非由核心组件所提供，而是由其他平台或应用程序、甚至是延伸套件所提供。
　　而在Firefox中，绝大多数的功能都基于XPCOM机制。例如Firefox为扩展开发提供的接口都是用XPCOM方式来实现的。
　　例如gRDF = Components.classes［“@mozilla.org/rdf/rdf-service;1”］
　　.getService（Components.interfaces.nsIRDFService）;
　　将获取RDF模块的nsIRDFService实例。
　　XPInstall
　　XPInstall（Cross-Platform Install）是Mozilla系列软件或者其他基于XUL的软件中用于安装extensions的技术。在Firefox2.0的源代码中，有一个名为xpinstall的文件夹，存放跟XPInstall模块相关的代码。
　　另外需要特别指出Firefox的扩展分为普通默认扩展和定制安装扩展。普通默认扩展没有定制的安装代码，整个安装过程由Firefox默认流程来执行。而定制安装扩展的安装包中有定制的安装过程信息。而这些信息是用专门的Javascript代码编写，调用XPInstall提供的API来实现。定制安装扩展，常见的例子是用Firefox打开扩展中心，点击某个扩展就可以在线安装，其中就是调用了XPInstall的API。
　　简单了解Firefox Extension组成说明和Firefox处理Extension的过程分析。
　　第三步：
　　根据这个简单教程，尝试一下hello world：
　　另外就是在Firefox官方扩展网站下载一些扩展来研究一下了。
　　安装后，Extension的代码会在磁盘这个位置：
　　C：\Documents and Settings\UserName\Application Data\Mozilla\Firefox\Profiles\Profile\extensions
　　第四步：
　　正式开始使用开发环境。
　　1.Firefox安装相关的扩展：firebug，1.Firefox 3.0，这个肯定必不可少了。在此推荐3.0，因为最新版3.6或者3.7，那些扩展还没有更新跟进，所以要想安装更多的扩展，还是以3.0为好。
　　2.Firebug，这个不必多说。虽然我只是菜鸟，只是用这个来定位某些xul元素对应什么代码，但帮助不少。再到firebug的官网，下载chromebug：（有了chromebug才能更好的调试自己写的chrome文件）
　　因为调试js需要开开关关firefox，太麻烦，所以一些代码可以在firebug控制台先测试。在firefox7试验过
　　3.Extension Developer。官网推荐，当然安装啦。这个是一套Firefox扩展，包括打包xpi功能，预览xul等。
　　4.Spket IDE。开发扩展的IDE，官网推荐的，比较好用。不过好像不能打包xpi，也不能测试。不过只作为编辑器也不错了。用它来看人家的扩展的代码，非常舒服……
　　5.xul explorer。预览xul效果。
　　6.emEditor。快速打开代码文件，进行修改。另外最重要的功能是：查找。研究人家的代码的时候，JavaScript的代码转来转去，太难找到某些变量或者对象的定义了。用emEditor的“在文件中查找”功能，作用非常大，查找出来的结果有预览……（后来发现，也可以直接用Spket IDE的search--file功能，跟eclipse的查找功能类似，不过缺点就是没有预览，每次要双击了才知道是怎么匹配的。）
　　7.另外，习惯使用eclipse + spket + XULBooster + Firefox
　　第五步：
　　慢慢学习Javascript，CSS还有一些细节的技术。尝试修改人家已有的Extension，加入自己想要的功能。