開發自己的 Firefox add-on 附加元件(五) Page-worker 模組

Page-worker 模組提供了建立常駐、隱形的頁面和存取其DOM的方法。

這個模組會產生一個建構函式 Page，期會建構一個新的page worker。在memory釋放之後，這個page worker可能會被destroyed，如此一來我們就必須再建立一個新的實體(instance)來載入另一個page。

我們用Page()建構子的contentURL 選項來指定要載入的page。contentURL可指向遠端檔案：

pageWorker = require("page-worker").Page({
  contentScript: "console.log(document.body.innerHTML);",
  contentURL: "http://en.wikipedia.org/wiki/Internet"
});

也可指向包裝在add-on中data 目錄下的HTML檔案，藉由self模組的 data.url()方法：

pageWorker = require("page-worker").Page({
  contentScript: "console.log(document.body.innerHTML);",
  contentURL: require("self").data.url("myFile.html")
});

Scripting Page-Worker Content
要存取page的DOM，必須使用script。在SDK中這種script稱文content scripts，因為其專門用來和web content互動。

我們可以使用Page()建構子的contentScript或contentScriptFile選項，來指定一個或多個 content scripts 載入到page中。使用contentScript時，我們將script以string傳入(如上例)；使用contentScriptFile時，我們傳入的值是指向在data目錄下的script檔案的URL(使用self模組的data.url()方法)。

雖然content scripts可以存取DOM內容，但無法存取任何SDK APIs，所以我們會需要在content script和main add-on code之間交換訊息。

舉例來說，content script可能讀取某些內容並將其傳會給main add-on，然後main-addon code可能會使用simple-storage API來將其儲存。我們可以使用postMessage() API 或 (通常) port API 來和script通訊。

下面的範例中，add-on從Wikipedia中載入一個頁面(page)，然後執行一段script以傳回所有的標題給main add-on code：

var pageWorkers = require("page-worker");
 
// This content script sends header titles from the page to the add-on:
var script = "var elements = document.querySelectorAll('h2  span'); " +
             "for (var i = 0; i  elements.length; i++) { " +
             "  postMessage(elements[i].textContent) " +
             "}";
 
// Create a page worker that loads Wikipedia:
pageWorkers.Page({
  contentURL: "http://en.wikipedia.org/wiki/Internet",
  contentScript: script,
  contentScriptWhen: "ready",
  onMessage: function(message) {
    console.log(message);
  }
});

程式碼第 15 行的 Console 用法請見這裡。

簡單來說，這個例子使用contentScript 屬性來用string建立content script。不過為了使程式碼容易閱讀和debug，我們實際製作add-on時可以使用contentScriptFile，並將content script放置在獨立的檔案中。

了解更多Page-worker類別的詳細建構子、方法、屬性、事件，請參考這裡。