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

给公司的笔记产品开发浏览器扩展，以前写过 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