firefox扩展开发入门指南
发布于 2015-12-03 00:24:43 | 226 次阅读 | 评论: 0 | 来源: PHPERZ
Firefox 浏览器
firefox 即 火狐浏览器 。Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。Firefox由Mozilla基金会与社区数百个志愿者以GPL/LGPL/MPL三种授权方式发布
给公司的笔记产品开发浏览器扩展，之前写过 Chrome 下的插件『十阅』，对火狐插件开发一无所知。
那么，看官方文档。
创建扩展的方式
火狐有三种创建扩展的方式
-
附加组件 SDK 扩展（使用一组高级别的 JavaScript APIs 开发无需重启的扩展。）
-
无须重启的扩展（手动创建无需重启的扩展。）
-
传统扩展 （使用 overly 的方式创建传统的扩展。）
一开始没仔细看文档，而是找了火狐内置的扩展查看源码进行修改学习，折腾了一上午，发现非常蛋疼（采用的是上面第三种方式），安装扩展需要重启浏览器，删除扩展需要重启浏览器，非常消耗时间和精力，差点精神崩溃。
所以说一定要看文档啊，看起来第一种应该是最简单的方式了，果断用它了。
安装 SDK
开发 Add-on SDK，你需要：
-
Python 2.5，2.6 或 2.7。 需要注意的是在任何平台都是不支持 Python3.x版本的 。确保你已经安装过Python。
-
Firefox火狐浏览器(本教程针对最新的浏览器)。
-
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