/ firefox

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

给公司的笔记产品开发浏览器扩展,之前写过 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 主页。

clipboard.png

尝试编辑 "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,所以还需要详细阅读相关文档。

参考链接