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

给公司的笔记产品开发浏览器扩展,之前写过 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,所以还需要详细阅读相关文档。

参考链接

tieshou wang

Read more posts by this author.

Subscribe to 王铁手的博客

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!