火狐瀏覽器擴展開發入門指南

時間 2019-12-07

原文原文鏈接

給公司的筆記產品開發瀏覽器擴展，以前寫過 Chrome 下的插件『十閱』，對火狐插件開發一無所知。git

那麼，看官方文檔。github

建立擴展的方式

火狐有三種建立擴展的方式json

1. 附加組件 SDK 擴展（使用一組高級別的 JavaScript APIs 開發無需重啓的擴展。）
2. 無須重啓的擴展（手動建立無需重啓的擴展。）
3. 傳統擴展 （使用 overly 的方式建立傳統的擴展。）

一開始沒仔細看文檔，而是找了火狐內置的擴展查看源碼進行修改學習，折騰了一上午，發現很是蛋疼（採用的是上面第三種方式），安裝擴展須要重啓瀏覽器，刪除擴展須要重啓瀏覽器，很是消耗時間和精力，差點精神崩潰。segmentfault

因此說必定要看文檔啊，看起來第一種應該是最簡單的方式了，果斷用它了。瀏覽器

安裝 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和測試插件，打包附加分發，查看文檔和運行單元測試。ui

初始化擴展

在命令行窗口中，建立一個新的文件夾。進入新建立的文件夾，鍵入 cfx init，而後回車：spa

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 主頁。

嘗試編輯 "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" 文件，打開它而且遵循出現的提示以便安裝它。