[教學] 如何對開發好的Firefox附加元件進行簽署

有時為了瀏覽器使用起來更方便,便會自己開發瀏覽器擴充套件(Extension),當開發好的瀏覽器擴充套件,打包成zip雖然可以在chrome上直接安裝,但是在firefox使用[從檔案安裝附加元件]時,會顯示錯誤 “檔案似乎已損毀,無法安裝此附加元件 (This add-on could not be installed because it appears to be corrupt),這是因為firefox只允許安裝有被簽署過的附加元件,當簽署過後就能夠正常安裝,此篇文章教兩個方法如何對擴充元件進行簽署。

兩個方法都需要先在Add-on Developer Hub 進行註冊

註冊網址:https://addons.mozilla.org/zh-tw/developers/

方法一、透過網頁直接上傳

進入Add-on Developer Hub頁面點選 [上架您的第一套附加元件]

接著會詢問如何發佈附加元件,可以依照自己需求做選擇

在本站 : 表示要把這個套件公開,讓所有使用者皆可以搜尋到並且安裝 (需要經過審核)

您自行處理 : 表示不會公開這個套件,會直接建立一個已經簽署好的xpi檔案 (不需經過審核)

接下來要上傳附加元件,需要將開發好的檔案包成zip檔案(manifest.json需在壓縮檔的根目錄)並上傳

上傳後系統會做初步的驗證,驗證沒有問題就點選 [簽署附加元件]

這時候會詢問需不需要上傳原始碼

如果是需要公開發佈而且程式碼是有經過像webpack之類的工具進行uglify 或 minify的,就需要上傳原始碼 (指目前上傳的程式是被工具加工產生出來的),選擇 ”是”

而如果是沒有要公開發佈的,可以直接選擇 “否”

接著按繼續

然後就會產生已經簽署的xpi檔案,便能下載來安裝使用

方法二、使用web-ext來進行簽證

web-ext是mozilla製作用來讓使用者可以使用command方式來加速開發流程的工具。

原始碼:https://github.com/mozilla/web-ext

首先在使用web-ext進行簽署之前需要取得金鑰

金鑰取得位置 : https://addons.mozilla.org/zh-TW/developers/addon/api/key/

進入網頁點 [產生新金鑰] 來取得 JWT 發行者 (JWT issuer)JWT 密語 (JWT secret)

請記下自己的JWT issuer 跟JWT secret 後面指令會用到

接著安裝web-ext

npm install -g web-ext

接著到manifest.json檔案所在的目錄中輸入以下指令

  your_api_key 就是發行者 (JWT issuer)、your_api_secrect 就是 JWT 密語 (JWT secret)

web-ext sign --api-key your_api_key --api-secret your_api_secrect

當建立成功會顯示 SUCCESS 並且產生檔案 .web-extension-id 與 web-ext-artifacts 資料夾

而web-ext-artifacts資料夾中會有 .xpi 檔案,這個檔案就是已經簽署過的extension,便可以直接安裝在firefox中