妖哲开始搞前端4——激凸！Firefox插件

由于某一些原因，我们需要开发一个浏览器插件来拯救世界，那么就开始吧。
这边我们选择的宇宙运行速度最快的FireFox＝ ＝Chrome用户靠边啦靠边。

获取SDK

开发插件最主要的是需要获取开发者工具，Mozilla官方推荐使用的叫做Add－OnSDK.以下内容均可在官方文档中查询到。

开发Add-on SDK，你需要
* Python2.x.需要注意的是在任何平台都不支持Python3.x
* FireFox浏览器
* SDK点击我下载SDK的最新稳定版本

另外，你也能从他的GitHub repository库中找到最新的开发版本

安装到Mac OS X/Linux

无论你选择哪个方式都要解压缩文件的内容作为根路径，并通过shell/命令提示符切换到SDK的根目录下。例如：

1. tar -xf addon-sdk.tar.gz
2. cd addon-sdk

如果你是一个Bash1用户,继续运行（大多数情况下是的）

1. source bin/activate

如果你是一个非bash用户

1. bash bin/activate

现在你应该看见下面这个东西

1. localhost:addon-sdk-1.17 wutianzhe$ source bin/activate
   Welcome to the Add-on SDK. For the docs, visit https://addons.mozilla.org/en-US/developers/docs/sdk/latest/

并且命令提示符现在应该有一个包含SDK的根目录的新前缀

(addon-sdk-1.17)localhost:addon-sdk-1.17 wutianzhe$

安装到Windows

同样解压缩文件，并通过命令符进入到SDK根目录下，例如：

7z.exe x addon-sdk.zip
cd addon-sdk

接着运行激活命令：

bin\activate

同样可以看到命令提示符现在应该有一个包含SDK的根目录名称的新的前缀：

(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>

SDK的虚拟环境

当命令提示符出现新的前缀表明你的已经搭建好了SDK的运行环境，那么你就可以使用Add-on SDK来开发的命令行工具。

任何时候，你都可以通过运行 deactivate 命令停用虚拟环境.

配置好的虚拟环境是特定于这个特定的命令提示符。如果您关闭命令提示符， 它会关闭运行环境，你需要source bin/activate或 bin\activate 在一个新的命令提示符重新激活它。如果你打开一个新命令提示符，SDK将不会被激活在新的提示。

可以将SDK的多个副本拷贝在磁盘上的不同位置，并在它们之间切换，甚至可以让他们同时激活运行在不同的命令提示符。

当然你也可以不用每一次都手动激活它。

制作启动项

所有 activate 的作用是通过设置环境变量，使位于顶层 bin 目录下的脚本 位于当前命令符下，制作的启动项 ，通过永久环境中的这些变量设置，以便每一个新的命令提示符下都能读取它们。那么就不需要每次都去打开新的命令提示符来激活 activate 。

因为变量精确设置可能随SDK发布新版本的变化，所以最好是指激活脚本来确定哪些变量需要设置。激活使用不同的脚本设置bash环境不同的变量（Linux和MAC OS X和Windows环境）。
Windows

在Windows上，使用 bin\activate\activate.bat批处理脚本，也可以使用命令行setx工具或控制面板激活永久使用。
Linux/Mac OS X

在 Linux 和 Mac OS X,使用source bin/activate/activate bash 脚本, 你可以 ~/.bashrc ( Linux) 或~/.bashprofile (Mac OS X) 来激活。

检查完整性

使用提示符运行

1. cfx

他会产生下面的信息(高能预警，大量使用信息可以直接跳过）

Usage: cfx [options] command [command-specific options]
Supported Commands:
init - create a sample addon in an empty directory
test - run tests
run - run program
xpi - generate an xpi

Internal Commands:
testcfx - test the cfx tool
testex - test all example code
testpkgs - test all installed packages
testall - test whole environment

Experimental and internal commands and options are not supported and may be
changed or removed in the future.

Options:
–version show program’s version number and exit
-h, –help show this help message and exit
-v, –verbose enable lots of output

Supported Command-Specific Options:
-b BINARY, –binary=BINARY
path to app binary (run, test, testall, testex,
testpkgs)
–binary-args=CMDARGS
additional arguments passed to the binary (run, test)
–dependencies include tests for all deps (test, testall, testex,
testpkgs)
–extra-packages=EXTRA_PACKAGES
extra packages to include, comma-separated. Default is
‘addon-sdk’. (run, test, testall, testcfx, testex,
testpkgs, xpi)
-f FILENAME[:TESTNAME], –filter=FILENAME[:TESTNAME]
only run tests whose filenames match FILENAME and
optionally match TESTNAME, both regexps (test,
testaddons, testall, testex, testpkgs)
-g CONFIG, –use-config=CONFIG
use named config from local.json (run, test, testall,
testex, testpkgs, xpi)
-p PROFILEDIR, –profiledir=PROFILEDIR
profile directory to pass to app (run, test, testall,
testex, testpkgs)
–package-path=PACKAGEPATH
extra directories for package search (run, test, xpi)
–parseable display test output in a parseable format (run, test,
testaddons, testall, testex, testpkgs)
–pkgdir=PKGDIR package dir containing package.json; default is
current directory (run, test, xpi)
–static-args=STATIC_ARGS
extra harness options as JSON (run, xpi)
–templatedir=TEMPLATEDIR
XULRunner app/ext. template (run, xpi)
–times=ITERATIONS number of times to run tests (test, testall, testex,
testpkgs)
–update-link=UPDATE_LINK
generate update.rdf (xpi)
–update-url=UPDATE_URL
update URL in install.rdf (xpi)

Experimental Command-Specific Options:
-a APP, –app=APP app to run: firefox (default), fennec, fennec-on-
device, xulrunner or thunderbird (run, test, testall,
testex, testpkgs)
–abort-on-missing-module
Abort if required module is missing (run, test,
testpkgs, xpi)
–check-memory attempts to detect leaked compartments after a test
run (test, testaddons, testall, testpkgs)
–force-mobile Force compatibility with Firefox Mobile (run, test,
testall, xpi)
–force-use-bundled-sdk
When –strip-sdk isn’t passed, force using sdk modules
shipped in the xpi instead of firefox ones (run, test,
testall, testex, testpkgs, xpi)
–harness-option=KEY=VALUE
Extra properties added to harness-options.json (xpi)
–manifest-overload=MANIFEST_OVERLOAD
JSON file to overload package.json properties (xpi)
–mobile-app=MOBILE_APP_NAME
Name of your Android application to use. Possible
values: ‘firefox’, ‘firefox_beta’, ‘fennec_aurora’,
‘fennec’ (for nightly). (run, test, testall)
–no-run Instead of launching the application, just show the
command for doing so. Use this to launch the
application in a debugger like gdb. (run, test)
–no-strip-xpi retain unused modules in XPI (xpi)
-o, –overload-modules
Overload JS modules integrated into Firefox with the
one from your SDK repository (run, test, testall,
testex, testpkgs)
–output-file=OUTPUT_FILE
Where to put the finished .xpi (xpi)
–stop-on-error Stop running tests after the first failure (test,
testex, testpkgs)
–strip-sdk Do not ship SDK modules in the xpi (run, test,
testall, testex, testpkgs, xpi)

Internal Command-Specific Options:
–addons=ADDONS paths of addons to install, comma-separated (run,
test, testall, testex, testpkgs)
–e10s enable out-of-process Jetpacks (run, test, testex,
testpkgs)
–keydir=KEYDIR obsolete, ignored (run, test, testall, testex,
testpkgs, xpi)
–logfile=LOGFILE log console output to file (run, test, testex,
testpkgs)
–profile-memory=PROFILEMEMORY
profile memory usage (default is false) (test,
testall, testex, testpkgs)
–test-runner-pkg=TEST_RUNNER_PKG
name of package containing test runner program
(default is test-harness) (test, testall, testex,
testpkgs)

这是 CFX命令行程序， 是主界面加载项的SDK，可以使用它来启动Firefox和测试插件，打包附加分发，查看​​文档和运行单元测试

走马观花

接下来将要展现如何使用SDK开发一个简单的扩展

初始化

在命令行窗口中船舰一个新的文件夹，并且使用cfx init指令

mkdir addon-test
cd addon-test
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!”

竟然没有字符画，简直太让人伤心。最起码出现一只小狐狸

创建新的扩展

下面的扩展内容均基于firefox29.0版本之上。
打开上一步中创建好的文件夹“lib”中的main.js文件,键入如下代码

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

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

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

并且在你的data文件夹里新建一个icon文件夹，丢入三个图标

然后回到我们的命令行，输入以下指令

cfx run

这个 SDK 命令将会启动一个安装了您的扩展的 新的 Firefox 实例。在 Firefox 启动后，您将会在浏览器的右上角看到一个图标。点击此图标，将会打开一个新的标签，并载入http://www.mozilla.org/ 。

这就是这个扩展的功能。它使用了两个 SDK 模块： action button 模块，它可以让您在浏览器中添加按钮，以及 tabs 模块，它可以让您执行一些简单的标签操作。在这个实例中，我们创建了一个带有绿色W图标的按钮，并且添加了一个点击事件处理使得在新标签中加载 Mozilla 主页。

你也可以自行更改超链接，来实现其它页面的跳转

打包扩展

在您结束开发扩展并且准备分发它的时候，您将需要打包它为 XPI 文件。XPI 文件是 Firefox 扩展的安装文件格式。您可以自行分发 XPI 文件或者把它发布到 https://addons.mozilla.org 以便其他用户可以下载并且安装。

您可以在扩展所在的文件夹中执行 cfx xpi 以创建一个 XPI：

cfx xpi
－－－－你会看见下面的消息
Exporting extension to addon-test.xpi

为了测试生成的 XPI 是否正常工作，您可以尝试在您的 Firefox 中安装此 XPI 文件。您可以在 Firefox 中使用快捷键 Ctrl+O (Mac上 Cmd+O )， 或者在 Firefox 的 “文件” 菜单中选择 “打开”菜单项。这将出现一个文件选择对话框：找到 “my-addon.xpi” 文件，打开它并且遵循出现的提示以便安装它。

回顾

今次，我们主要使用了三个命令，创建并且打包了一个扩展

• cfx init 初始化一个空的扩展模版
• cfx run 运行一个带有扩展的Firefox例子
• cfx xpi 打包成一个可发布的文件

• 好的，今天就到这里为止

  ---

  1. bash shell是最常用的一种shell, 是大多数Linux发行版默认的shell ↩