Firefox Add-on 製作

介紹

Linux 開發

Windows 開發

注意 Windows 開發要安裝 Python 2.X 版本，3.X 版本不能用

另外以下使用 cfx 指令，不過之後推薦改用 jpm，jpm 指令需要用 npm 安裝，所以你要先安裝 nodejs

下面分別示範 cfx 和 jpm

使用 cfx 開發

此篇記錄 Linux 開發實作內容，首先建立資料夾 mozilla

然後下載 Add-on SKD 放進去解壓縮，此時結構如下

1
2
addon-sdk-1.17/
jetpack-sdk-latest.zip*

接著執行 source bin/activate，執行完前面會出現 (addon-sdk-1.17)

1
(addon-sdk-1.17)jason.cc.chiu:~/mozilla$

現在建立一個我們的專案目錄(附加元件)，依照你想要的名稱命名

1
2
3
mkdir mdn-mod
cd mdn-mod
cfx init

完成之後可以用 tree 指令來看一下架構

tree 指令並非預設指令，需要自行安裝 sudo apt-get install tree

1
2
3
4
5
6
7
8
9
10
(addon-sdk-1.17)jason.cc.chiu:~/mozilla$ tree mdn-mod/
mdn-mod/
├── data                // Add-on 需要的資源檔案
├── lib                 // Add-on 主要的 JavaScript 程式碼
│   └── main.js         // 程式的進入點(目前是空的) 
├── package.json        // 定義這個 Add-on 的 metadata
└── test                // 測試檔案
    └── test-main.js

3 directories, 3 files

package.json 填寫參考這裡

預設內如如下

1
2
3
4
5
6
7
8
9
{
  "name": "mdn-mod",
  "title": "mdn-mod",
  "id": "jid1-wiMk7csR0xVhEg",
  "description": "a basic add-on",
  "author": "",
  "license": "MPL 2.0",
  "version": "0.1"
}

使用 page-mod API

此 API 作用為，當使用者進入某網頁時，自動插入 JavaScript 到此頁面

API 介紹參考這裡

打開 lib/main.js 加入

1
2
3
4
5
6
7
8
9
10
11
// 匯入 SKD 檔案
var pageMod = require("sdk/page-mod");  
var data    = require("sdk/self").data;
 

pageMod.PageMod({
    // 只要網址結尾是 mozilla.org，就插入 contentScriptFile 指定的 JavaScript 檔案
    include: "*.mozilla.org", 
    // data.url("my-script.js")，放在 data/ 中的 my-script.js
    contentScriptFile: data.url("my-script.js")
});

現在新增 my-script.js 到 data 資料夾下面，並將下面程式碼加入其中

1
2
// 將 body tag 設為紅色
document.body.style.background="red";

現在近來進行測試，一般可以執行 cfx run，他會開啟乾淨的瀏覽器幫我們測試

但如果有問題你也可以直接安裝到你目前瀏覽器測試

要直接安裝需要打包，在 mdn-mod 資料夾下執行 cfx xpi

會產生一個 mdn-mod.xpi 檔案，現在在瀏覽器中按下 Ctrl+Shift+A 打開附加元件介面

右上角有個齒輪 > 從檔案安裝附加元件 > 選擇剛剛產生出來的 mdn-mod.xpi

預設情況下會跳出錯誤，說你的附加元件沒有經過驗證不能安裝

所以我們要把檢查的功能關掉，關掉步驟參考這裡

記住測試完附加元件要再打開比較安全，安裝好之後就可以打開Mozilla網站測試

成功的話背景會變成紅色

使用 jpm 開發

注意，要安裝 jpm 你需要安裝 nodejs，先檢查你是否成功安裝 nodejs

輸入 node -v 看是否有出現版本，如果有再執行

1
npm install jpm --global

安裝成功後執行 jpm -V 看是否安裝成功，jpm 使用方式和 cfx 基本上一樣

首先也是建立新的資料夾 mdn-mod，然後進入輸入 jpm init

接下來會自動問你一些訊息來產生 package.json 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
title: (My Jetpack Addon)
name: (mdn-mod)
version: (0.0.1)
description: (A basic add-on)
entry point: (index.js)
author: Jason
engines (comma separated): (firefox,fennec)
license: (MIT)
JPM [info] About to write to Y:\mdn-mod\package.json:

{
  "title": "My Jetpack Addon",
  "name": "mdn-mod",
  "version": "0.0.1",
  "description": "A basic add-on",
  "main": "index.js",
  "author": "Jason",
  "engines": {
    "firefox": ">=38.0a1",
    "fennec": ">=38.0a1"
  },
  "license": "MIT",
  "keywords": [
    "jetpack"
  ]
}


Is this ok? (yes) yes

不過產生出來的架構和 cfx 有點不一樣

1
2
3
4
5
6
7
8
mdn-mod/
├── index.js
├── package.json
├── README.md
└── test
    └── test-index.js

1 directory, 4 files

index.js 是進入的程式碼，所以一樣放入以下程式碼

1
2
3
4
5
6
7
var pageMod = require("sdk/page-mod");  
var data    = require("sdk/self").data;
 
pageMod.PageMod({    
    include: "*.mozilla.org",     
    contentScriptFile: data.url("my-script.js")
});

然後自己建立 data 資料夾並放入 my-script.js，而 my-script.js 放入以下程式碼

1
document.body.style.background="red";

現在執行 jpm run 測試，成功一樣背景會出現紅色，這種方法就不用改驗證權限

接下來新增按鈕，在 my-script.js 下面加上

1
2
var button = "<button onClick='alert(\"Hi!\")'>CLICK ME</button>";
document.body.innerHTML = button + document.body.innerHTML;