[Add-ons] Firefox 附加元件開發 Web Extension Plugin Development 1

[Add-ons] Firefox 附加元件開發 Web Extension Plugin Development 1 介紹基本框架

 

這邊介紹FireFox的附加元件如何開發

如果是想要開發用在Android上的，近期可以先不用考慮，因為目前已不開放Android版的plugin。

 

1.介紹基本框架

首先需要先建立一個專案用資料夾，這邊可以任意命名(建議將資料夾命名為你專案的名稱) ，

然後每個 Firefox 的 Extension 專案都一定會有一個描述檔 manifest.json

基本內容如下

{
  "manifest_version": 2,
  "name": "附加元件名稱",
  "version": "1.0",
  "description": "附加元件名稱描述",
  "icons": {
    "48": "icons/icon-48.png"
  }
}

建立後，這邊可以看到manifest.json描述中有個圖示icons設定，你需要建立一個附加元件的圖示放在專案目錄下的 icons/icon-48.png

• 最前面的三個 key：manifest_version、name、version 必須寫進去，它包含了附加元件的基本詮釋資料（metadata）。
• description 是可選、但最好要有：它會在附加元件管理員內標示。
• icons 也是可選、但最好要有：它允許附加元件指定圖示、也會在附加元件的管理員顯示。

 

2.透過 content_scripts 撰寫功能

manifest提供了很多種設定，其中可以使用 content_scripts 來執行你想完成的功能腳本。


content_scripts 會在使用者瀏覽網頁時被載入，這邊你需要設定目標matches的網址類型，

matches 也可設定為全部可用的 "*://*" 

然後，再設定需要載入的腳本檔案，使用的方式如下

{
  "manifest_version": 2,
  "name": "附加元件名稱",
  "version": "1.0",
  "description": "附加元件名稱描述",
  "icons": {
    "48": "icons/icon-48.png"
  },
  "content_scripts": [
    {
      "matches": [
        "*://*.mozilla.org/*"
      ],
      "js": [
        "yourscript.js"
      ]
    }
  ]
}

這邊的js腳本的使用上與原網頁載入的js差不多。
 

3.載入測試

首先，將剛剛建立的專案用資料夾內的所有檔案直接打包為zip壓縮檔(不用包含最外層的專案資料夾) 

然後進入 Firefox 的除錯頁面 about:debugging

選擇 「這個Firefox」→「載入暫用附加元件...」

選取剛才打包完成的zip，即可載入測試專案。

參考資料: 

你的第一個 WebExtension