3 個步驟將 Bookmarklet 、 Userscript 封裝成 Chrome Extension

透過正確地設定 manifest.json ，將腳本注入到對應的 URL 裡頭。

很多時候撰寫書籤工具（Bookmarklet）通常時注入一些腳本在該分頁裡頭，但是要交付給其他使用者相當不易，若是寫成 Userscript 又得先要求使用者安裝 Userscript 的 Plugin 。

將上次寫的 Youtube 影片懸浮外掛 變成 Extension

1. 建立一個資料夾

├── icon.png (options)
├── index.js
└── manifest.json

2. 設定 manifest.json

值得注意的是，第 8 行可以決定想要注入 index.js 的目標網址，例如如果你的腳本想在 Facebook 執行，那麼你可以設定成：

"matches":["*://www.facebook.com/*"],

icons 則是選擇性的，如果沒有 icons ，Chrome 會依照套件的名字來生成對應的圖標。

3. 直接安裝 or 壓縮起來並且上架

在 「Chrome → 更多工具 →擴充套件」可以選擇『載入未封裝項目』，這時選擇「步驟 1」建立的資料夾，即可將腳本安裝進入 Chrome 。

或者壓縮起來透過『開發人員資訊主頁』上架Extension。

後記

Extension 的好處在於，有時候我想透過 NPM 安裝方便的套件來輔助我注入腳本時，在 Userscript 與 Bookmarklet 只能透過動態掛載 CDN （總不可能整個複製過來）。

而在封裝 Extension 時，我們可以使用 NPM 並且透過 parcel 幫我們預編譯，最後再把編譯後的資料夾打包成壓縮檔。

自己隨便寫的 script 如下：

"scripts": {
  "build": "rm -rf dist/ && mkdir dist &&  cp src/manifest.json dist/ && cp src/icon.png dist/ && parcel build src/index.js"
}

最後我的 Extension 就可以模組化去開發了。

src
├── icon.png
├── index.js
├── lib
│   ├── floatStyle.js
│   └── switcher.js
└── manifest.json

編譯($ npm run build)後

dist
├── icon.png
├── index.js
└── manifest.json