快速入门

本教程会过一遍使用 SDK 创建一个简单 add-on 的过程。

准备

要使用 SDK 创建 add-on，你需要：

• Firefox 38或以后版本。如果你需要在早期版本的 Firefox 上开发，你就要使用老的 cfx 工具。参看 cfx 快速入门的说明。
• 命令行 jpm 工具。参看 jpm 安装的说明。一旦你已经完成这些工作，你就会在一个命令行提示符下。

初始化空的 add-on

在命令行提示符下，创建一个新目录。进入新文件夹，键入 jpm init，然后敲回车

mkdir my-addon
cd my-addon
jpm init

接着你会被要求提供一些关于你的 add-on 的信息：这会用来创建 package.json 文件。如果光按回车的话，就表示接受属性的默认值。关于 jpm init 的更多信息，参看 jpm command reference.

一旦你设置了这些属性的值或者接受默认值，你会看到 "package.json" 的完整内容并被询问是否接受这些设置。

实现 add-on

现在你可以写 add-on 的代码了。除非你修改了"entry point"的值（package.json 中的 "main"），一般情况将从你的 add-on 的根目录下的"index.js"文件开始。这个文件就是在之前步骤中创建的。打开这个文件并且添加以下代码：

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://www.mozilla.org/");
}

保存文件

接下来，在根目录下创建目录"data"。

mkdir data

并保存这三个图标文件到"data"目录：

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

返回命令行，键入：

jpm run

这个 jpm 命令会运行一个带有你的 add-on 的 Firefox 的新实例。

如果找不到 Firefox，你可能要为它提供一个路径（如在Ubuntu中）：

jpm run -b /usr/bin/firefox

Firefox 启动以后，在浏览器右上角你能看到一个 Firefox logo 的图标。点击该图标，就会打开一个新标签页 https://www.mozilla.org/。

这就是这个 add-on 的全部功能了。它用到了 SDK 的两个模块：action button 模块，使你能加个按钮到浏览器上，以及 tabs 模块，使你能完成对标签页的基本操作。本例中，我们以及创建了一个图标是Firefox图标的按钮，并添加一个点击处理程序，可以在新标签页中打开 Mozilla 页面。

试着编辑这个文件。例如，我们可以改变加载的页面：

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://developer.mozilla.org/");
}

在命令行提示符下，再次执行 jpm run。这次点击按钮，它会带你到 https://developer.mozilla.org/ 页面。

打包 add-on

当你完成了 add-on 并准备发布它，你会需要把它打包为 XPI 文件。你能自己分发 XPI 文件，也可以把它们发布到 https://addons.mozilla.org，这样其他用户就能下载并按照它们。

要构建 XPI，只要在 add-on 的根目录下运行命令 jpm xpi：

jpm xpi

你应该看到像这样的信息：

JPM info Successfully created xpi at /path/to/my-addon/@my-addon-0.0.1.xpi

要测试附加组件是否能正常运行，可以尝试在你自己的火狐中安装 XPI 文件。你可以在 Firefox 中按 Ctrl+O 组合键（Mac 中是 Cmd+O），或者选择"文件"菜单里的“打开”。这样会弹出一个文件选择对话框：转到"@my-addon.xpi"文件，打开并按照提示安装 add-on。

注意 Firefox 默认需要 add-on 有签名，即使是本地开发的 add-on。安装完后他们会在已安装的 add-on 列表中出现，只因没有签名而被禁用。开发的时候，又或者你不准备发布，你可以打开 about:config 设置 xpinstall.signatures.required 为 false 来运行未经签名的组件。这个设置会应用到所有的 add-on，所以要十分小心，不要一不当心从别的地方安装了恶意组件。

要发布你的 add-on，请提交 XPI 文件到 addons.mozilla.org 或者如果你想在你自己的服务器上发布，运行 jpm sign。

总结

本教程中我们使用了下面三个命令来构建和打包 add-on ：

• jpm init 初始化一个空的 add-on 模板
• jpm run 运行一个装有 add-on 的新 Firefox 实例，所以我们可以试用它
• jpm xpi 打包 add-on 为 XPI 文件，用来发布

这是你在开发SDK add-on会用到的三个主要命令。完全的参考文档包含了所以你能使用的命令，以及这些命令的可选项。

这次开发的add-on 的代码用到了两个 SDK 模块，action button 和 tabs。这儿有参考文档，描述 SDK 中所有高层次和低层次的 API。

下一步?

要了解你能用 SDK API 做些什么，试着继续阅读教程。