Chrome Extension Development in a Nutshell (中文翻譯版)

偶然看到一篇關於 Chrome Extension 不錯的文章

原文在此

01. Chrome Extension(底下簡稱 CE)在初始化時，會去參考 "manifest.json" 這個檔案，裡面描述了此 CE 的各個特性。

02. CE 包含了 3 個主要部份，"popup"、"background" 和 "content"，CE 中不需要 3 個全部用到。

03. 當使用者按下 CE 圖示時，出來的頁面便是 "popup"。

04. 只有當使用者按下 CE 圖示時，所有在 "popup" 裡的 JavaScript 才會被啟動。

05. "background" 就像是 1 個背景服務，它可以一直處於喚醒狀態，或是去監聽當某些事件發生時的監聽器。

06. 為了減少資源使用，Google 建議把 "background" 當監聽器來使用。

07. "background" 可以監聽很多種類的事件，例如改變瀏覽器目前頁面(tab)、視窗焦點改變、URL 更新、title 更新、還有 "Google storage" 更新等。

08. 使用 "background" 的 1 個例子是去執行更新設定，當下列情況發生時，"background" 便會被呼叫；i. 瀏覽器啟動時、ii. 第一次安裝 CE 時、iii. 更新 CE 時。因此，你可以把版本資訊儲存在 "local storage" 或 "Google storage"，然後在這些時間點與目前本版本資訊比較並做一些適當的處理。

09. "content" 是跑在使用者正在瀏覽頁面上的一份程式碼，你可以把 "content script" 想成是當使用者瀏覽頁面時，會被 CE 注入到該瀏覽頁面。

10. Chrome 處理 "content script" 的方式讓開發者變輕鬆。你可以想像當 "content script" 被注入到使用者瀏覽的頁面時， "content script" 是運行在獨立的環境中。因此，"content script" 不能去存取瀏覽頁面裡 script 的變數和函數等，這意味者我們不需要擔心衝突。舉例來說，我們不用檢查瀏覽頁面是否有載入 "jQuery" 或載入時用的版本，我們想要使用 "jQuery" 就在我們自己的 "content script" 裡去使用它，我們也不需擔心我們宣告的函數或全域變數是否與瀏覽頁面裡的 script 衝突。

11. 這 3 個部份的 code 都是直接跑在他們各自的環境中，因此你不能在 "content script " 中去存取 "background" 的函數及變數。

12. 然後還是有辦法在這 3 個部份間彼此溝通。

13. Chrome 提供了 API 去取得每個 extension 頁面的 "windows" object。使用 "windows" object 便可以存取 "popup" 和 "background" 的變數及函數。

14. Chrome 提供了 API 讓開發者可以在 "content" 和 "popup" 或 "content" 和 "background" 之間透過傳送訊息來溝通。此組 API 可以接受 callback function 在發送完訊息後被呼叫。接收方使用 "event listener" 來監聽訊息，接收方在收到訊息後，做完相關動作後，透過這個 callback function 來告知處理結束。

15. Chrome 注重 Extension 的安全性。

16. 只有當開發者模式使用未包裝的 Extension 時，Chrome 才會忽略安全性。有些因為 "permission" 宣告問題原本不能正常工作的都有可能會工作。

17. 對於包裝過的 Extension，需確保有宣告正確的 "permission"。舉例來說，當你要發送 Ajax 請求去外部 Server 時，你需要在 JSON 檔案宣告外部 Server 的 Domain。所以當你要發佈 Extension 時，請檢查每個 API 需要的權限。

18. Extension 不允許 Inline JavaScript，所有的 JavaScript Code 必須用 include 的方式使用。即使是 "onClick='btnClick()'" 這樣的 HTML屬性都不被允許。

19. 一般來說，當你上手後，開發 Chrome Extension 並不會很困難。

20. 當你開發完 1 個 Chrome Extension，如果你想發佈它，最簡單的方式便是在 Chrome web store。

21. 只要花美金 $5 並在 Chrome web store dashboard 註冊帳號，你便可以發佈自己的 Chrome Extension。

22. 美金 $5 只要支付一次即可。