Chrome Extension 入門 - 基本架構介紹 (2/?)

完成第一個 Chrome Extension 後，再來就要介紹一下 Chrome Extension 的基本架構。

一個完整的 Extension 會包含五大重要元素： Extension 設定檔 (manifest.json)、背景執行緒 (background.js)、設定頁面 (options.html)、彈出式頁面 (popup.html)、內文執行緒 (contentscript.js)。

1、Extension 設定檔 (manifest.json)：

為整個 Extension 最重要的部分，設定 Extension 名稱、版本、執行方式等等，若有設定錯誤，在載入時就會失敗。

manifest.json

{
  "name" : "InsertCSS",
  "version" : "1.0.0",
  "manifest_version": 2,
  "description" : "Insert CSS file to current page.",
  "background" : {
    ...
  },
  "browser_action" :
  {
    ...
  },
  ...
}

2、背景執行緒 (background.js)：

生命週期的設定有兩種，一為執行完所有 scripts 就結束，另一為隨著瀏覽器開啓而開始，關閉而結束。
部分的 API (如 chrome.*APIs) 只有在此才能執行，因此通常扮演訊息傳遞 (Message Passing) 的接收者。

3、設定頁面 (options.html)：

Extension 的客制化設定頁面，依據不同使用者喜好有不同的設定。

4、彈出式頁面 (popup.html)：

當按下 Chrome 瀏覽器右上方或網址列右方的 Extension 按鈕後所彈出的頁面。
此頁面無法讀取當前頁面的內容，常作為顯示訊息之用途。

5、內文執行緒 (contentscript.js)：

一個分頁 (Tab) 對應一個內文執行緒，可設定在分頁開啓後的執行時間點。
此執行緒可讀取或修改分頁裡的內容。

總結：

介紹到這裡，你應該可以知道一個 Chrome Extension 會由哪些東西組成。
上面介紹的五大元素，只有設定檔 (manifest.json) 一定要存在，其餘四個元素就看你需求而加入。
當然，Chrome Extension 不止這些東西，例如「右鍵選單」，上述的五大元素及其他元素將會在後續做詳細介紹。
如果你有任何問題，歡迎在下面留言。