妖哲開始搞前端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 ↩