Chrome Extension 開發入門篇 09 - Chrome Extension 事件頁面

事件頁面的用途與後台頁面極為相似，最明顯的差異在於它的生命週期，事件頁面只在需要的時候載入進來，當事件頁面閒置時就會卸載，以便釋放記憶體與其他系統資源。

建立事件頁面

在設定檔中將 background 的 persistenet 設置為 false。

manifest.json

{
  ...
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  ...
}

會使事件頁面載入的情況

1. Extension 第一次安裝或更新為最新版本時。
2. 事件頁面監聽的某一事件被觸發時。
3. 內容腳本或其他的 Extension 發送訊息時。
4. Extension 中的其他頁面呼叫 runtime.getBackgroundPage 時。

將後台頁面轉換為事件頁面

1. 在設定檔中的 background 裡加入 "persistent" 並設置為 false。
2. 如果有使用 window.setTimeout() 或 window.setInterval()，請改用定时器 API。如果事件頁面已關閉，基於 DOM 的定時器將不會觸發。
3. 非同步的 HTML5 APIs 在事件頁面關閉時將無法使用，請改為對應的 Extension APIs，例如通知。
4. 將 extension.getBackgroundPage 改為使用 runtime.getBackgroundPage。

使用事件頁面的注意事項

1. 當每次載入事件頁面時，在事件頁面的頂層區域註冊 Extension 感興趣的事件。
2. 在 Extension 第一次安裝或更新時，可使用 runtime.onInstalled 來做一些初始化，例如右鍵選單。
3. 由於事件頁面不會長時間保持為載入狀態，所以不要使用全域變數來儲存運行中的狀態，請使用 storage APIor IndexedDB。
4. 除了使用 runtime.onSuspend 來處理卸載前需要做的清理動作外，也要定期儲存資料。
5. 使用 message passing 時，務必關閉不再使用的端口，在所有訊息端口關閉前，事件頁面不會卸載。

推薦閱讀

Chrome extension: 熬過了那些歷歷在目的千辛萬苦，我最後終於獲得了一些 event page 的小知識

結語：

雖然事件頁面能節省系統資源，但管理上也複雜許多，不建議初學者一開始就使用事件頁面，可先從後台頁面做起，等熟悉後再轉為事件頁面。如果您有問題，歡迎在下方留言。謝謝！