2013年11月26日 星期二

Chrome Extension 入門 - 背景執行緒 (3/?)

上一篇 基本架構介紹 完後，接下來要來詳細介紹各個元素，首先來介紹背景執行緒 (background.js)。

設定

要使用背景執行緒，必須先在 Extension 設定檔 (manifest.json) 內設定。而設定的方式有兩種：
1. HTML 頁面
將背景執行緒指定為 HTML 格式的檔案 background.html。

manifest.json
{
  "name": "My extension",
  ...
  "background": {
    "page": "background.html"
  },
  ...
}

再從 background.html 檔案載入 scripts。

background.html
<html>
  <head>
    <script type="text/javascript" src="background-1.js"></script>
    <script type="text/javascript" src="background-2.js"></script>
  </head>
  <body>
  ...
  </body>
</html>

2. Scripts 腳本
直接設定背景執行緒有哪些 scripts 檔。

manifest.json
{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background-1.js", "background-2.js"]
  },
  ...
}

生命週期

依生命週期的長短分為後台網頁和事件頁面兩種：
後台網頁： 需要有一個長時間運行的 scripts 來管理一些任務或狀態。
事件頁面： 事件頁面與後台網頁很像，但是事件頁面只在需要時加載，當事件頁面當前不活動時將會卸載，釋放內存及其他系統資源。
設定方式如下，persistent 設定為 false 時，就是事件頁面。預設為 true (後台網頁)。

manifest.json
{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background-1.js", "background-2.js"],
    "persistent": false
  },
  ...
}

事件註冊

部分的 API 只有在背景執行緒才能執行 (例如：右鍵選單建立與事件監聽)，因此通常需要在背景執行緒註冊監聽事件。
範例 1 : 右鍵選單 (官方範例: Context Menus Samples)

sample.js
...
// Create some radio items.
function radioOnClick(info, tab) {
  console.log("radio item " + info.menuItemId +
              " was clicked (previous checked state was "  +
              info.wasChecked + ")");
}
var radio1 = chrome.contextMenus.create({"title": "Radio 1", "type": "radio",
                                         "onclick":radioOnClick});
var radio2 = chrome.contextMenus.create({"title": "Radio 2", "type": "radio",
                                         "onclick":radioOnClick});
...

範例 2 : 瀏覽器按鈕 (官方範例: Print this page)

background.js
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  var action_url = "javascript:window.print();";
  chrome.tabs.update(tab.id, {url: action_url});
});

總結：

看完這篇，你應該可以知道背景執行緒如何設定，生命週期的類型分為後台網頁和事件頁面兩種，以及常應用於事件監聽和管理一些任務或狀態。
如果你有任何問題，歡迎在下面留言。
張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)