火狐浏览器扩展开发入门指南

给公司的笔记产品开发浏览器扩展，之前写过 Chrome 下的插件『十阅』，对火狐插件开发一无所知。

那么，看官方文档。

创建扩展的方式

火狐有三种创建扩展的方式

1. 附加组件 SDK 扩展（使用一组高级别的 JavaScript APIs 开发无需重启的扩展。）
2. 无须重启的扩展（手动创建无需重启的扩展。）
3. 传统扩展 （使用 overly 的方式创建传统的扩展。）

一开始没仔细看文档，而是找了火狐内置的扩展查看源码进行修改学习，折腾了一上午，发现非常蛋疼（采用的是上面第三种方式），安装扩展需要重启浏览器，删除扩展需要重启浏览器，非常消耗时间和精力，差点精神崩溃。

所以说一定要看文档啊，看起来第一种应该是最简单的方式了，果断用它了。

安装 SDK

开发 Add-on SDK，你需要：

1. Python 2.5，2.6 或 2.7。 需要注意的是在任何平台都是不支持 Python3.x版本的 。确保你已经安装过Python。
2. Firefox火狐浏览器(本教程针对最新的浏览器)。
3. SDK本身

我的系统是 Mac，且安装了 HomeBrew，所以安装 SDK 只需要一行命令即可

brew install mozilla-addon-sdk

其他平台的安装方法，详见 https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Installation

装完以后就可以在 Shell 里面执行 cfx ，cfx 是主界面加载项的SDK，可以使用它来启动Firefox和测试插件，打包附加分发，查看文档和运行单元测试。

初始化扩展

在命令行窗口中，创建一个新的文件夹。进入新创建的文件夹，键入 cfx init，然后回车：

mkdir my-addon
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!"

实现扩展

打开在上一步骤中创建好的 "lib" 文件夹中的 "main.js" 文件，添加以下的代码：

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var button = buttons.ActionButton({
  id: "sf-link",
  label: "访问 SegmentFault",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});
function handleClick(state) {
  tabs.open("http://sf.gg/");
}

保存该文件。
下一步，保存以下的三个图标文件到 "data" 文件夹中：

icon-16.png
icon-32.png
icon-64.png

回到命令行窗口，键入：

cfx run

这个 SDK 命令将会启动一个安装了您的扩展的新的 Firefox 实例。在 Firefox 启动后，您将会在浏览器的右上角看到一个 SegmentFault 标记的图标。点击此图标，将会打开一个新的标签，并载入http://sf.gg/ 。

这个扩展使用了两个 SDK 模块： action button 模块，它可以让您在浏览器中添加按钮，以及 tabs 模块，它可以让您执行一些简单的标签操作。

在这个实例中，我们创建了一个带有 SegmentFault 图标的按钮，并且添加了一个点击事件处理使得在新标签中加载 SegmentFault 主页。

尝试编辑 "main.js"。比如说，我们改变加载的页面：

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var button = buttons.ActionButton({
  id: "sf-link",
  label: "访问 SegmentFault",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});
function handleClick(state) {
  tabs.open("http://segmentfault.com/u/wtser");
}

在命令行窗口中，再次执行 cfx run 。这一次点击图标的按钮将带您到 http://segmentfault.com/u/wtser。

打包扩展

XPI 文件是 Firefox 扩展的安装文件格式。
在完成扩展开发并且准备分发它的时候，需要打包它为 XPI 文件。您可以自行分发 XPI 文件或者把它发布到 https://addons.mozilla.org 以便其他用户可以下载并且安装。

在扩展所在的文件夹中执行 cfx xpi 以创建一个 XPI：

cfx xpi

会看到类似的消息：

Exporting extension to my-addon.xpi.

为了测试生成的 XPI 是否正常工作，您可以尝试在您的 Firefox 中安装此 XPI 文件。您可以在 Firefox 中使用快捷键 Ctrl+O (Mac上 Cmd+O )，或者在 Firefox 的 "文件" 菜单中选择 "打开"菜单项。这将出现一个文件选择对话框：找到 "my-addon.xpi" 文件，打开它并且遵循出现的提示以便安装它。

总结

我们使用了三个命令，创建并且打包了一个扩展：

cfx init 初始化一个空的扩展模板
cfx run 运行一个安装好扩展的新的 Firefox 实例，以便我们可以在其中尝试扩展
cfx xpi 打包扩展为一个 XPI 文件以便发布

这是在开发 SDK 扩展时使用的三个主要的命令。

在实际的开发过程中，你还会需要获悉其他的 API,所以还需要详细阅读相关文档。

参考链接

https://developer.mozilla.org/en-US/Add-ons
https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs