製作及安裝 Chrome 擴充功能

之前在下編寫的 HTML5 Gamepad API 需要到在下的專案到才能使用，或要下載一堆檔案到電腦，感覺非常麻煩
因此在下打算將這堆檔案包裝成為瀏覽器的擴充功能，方便使用

在下製作 Chrome 的擴充功能

Chrome 的附加元件主要根據 manifest.json
最基本的 manifest.json 需要提供

manifest_version

manifest 的版本，截至此文章發布日期，都是使用 2

name

附加元件的名稱，可以任何字元，字元長度為 45

version

附加元件的版本，使用 W.X.Y.Z 版本規格，數值為 0 至 65535

一個最基本的 manifest.json

{
    "manifest_version": 2,
    "name": "My Extension",
    "version": "0.1.2"
}

開啟 Chrome 後
在網址列輸入 chrome://extensions 或 選項 (Option) > 更多工具 (More tools) > 擴充功能 (extensions)


啟動 開發人員模式 (Developer mode)


按 載入未封裝項目 (Load unpacked)


載入 擴充功能根目錄
如果 manifest.json 正確，會顯示該 擴充功能 載入到 擴充功能項目 中，並顯示為 未封裝擴充功能 (Unpacked extension)
當擴充功能有任何改動，按下該擴充功能的重新載入按鈕便會更新擴充功能的內容


如果 manifest.json 錯誤，會顯示錯誤資訊

除了直接載入未封裝項目，亦可以將項目封裝成 Chrome 的擴充功能檔案 (.CRX)


再到 擴充功能項目 頁面
按 封裝擴充功能 (Pack extensions)
按 擴充功能根目錄 (Extension root directory) 的 瀏覽 Browse 按鈕


選擇 擴充功能根目錄
按 封裝擴充功能 (Pack extensions)



封裝成功後， .CRX 檔案會存放到與擴充功能目錄的相同位置


亦可以使用指令封裝，輸入

google-chrome --pack-extension="my-extension"

可以方便將大量擴充功能封裝


如果需要再次封裝擴充功能，需要刪除上次的 .PEM 檔案才能再次封裝擴充功能


如果 manifest.json 錯誤，會顯示錯誤資訊


將封裝擴充功能的 .CRX 檔案，拖曳到 擴充功能項目 中


按 新增擴充功能 (Add extension) 便可安裝擴充功能


顯示該 擴充功能 載入到 擴充功能項目 中
由於這個 .CRX 並沒有經 Chrome 線上應用程式商店認證
因此會顯示 來源不是 Chrome 線上應用程式商店 (Not from Chrome Web Store) 來提醒使用者


在下將 .CRX 複製到另一部安裝 Linux 的電腦能正常運作，但在 Windows 及 Mac OS 卻出現錯誤
先記下擴充功能的 ID


在 網址列 輸入 chrome://version 獲得 設定檔路徑 (Profile Path)


到 設定檔路徑\Extensions\擴充功能ID 的位置，找到 擴充功能 的目錄


將 擴充功能 的目錄複製其他位置


在 Chrome 中移除 (Remove) 該擴充功能


按 載入未封裝項目 (Load unpacked) 重新安裝 擴充功能


該 擴充功能 便可以正常使用

Google 在 https://developer.chrome.com/extensions/getstarted 有一份製作附加元件的參巧指引