開發自己的 Firefox add-on 附加元件(七) Tabs 模組

Tabs 模組讓我們能夠簡單的存取分頁( tabs )和分頁相關的事件。


這個模組本身可以當作所有視窗中的所有分頁的清單來使用。特別是可以把它們列舉出來：

var tabs = require('tabs');
for each (var tab in tabs)
  console.log(tab.title);

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

我們也可以用 index 來存取個別分頁：

var tabs = require('tabs');
 
tabs.on('ready', function () {
  console.log('first: ' + tabs[0].title);
  console.log('last: ' + tabs[tabs.length-1].title);
});

可以開啟新分頁，並指定各種屬性和位置：

var tabs = require("tabs");
tabs.open("http://www.example.com");

我們可以註冊事件監聽函式，當分頁開啟、關閉、完成載入 DOM 內容 、以及得到焦點或失去焦點時，監聽函式會被通知：

var tabs = require("tabs");
 
// Listen for tab openings.
tabs.on('open', function onOpen(tab) {
  myOpenTabs.push(tab);
});
 
// Listen for tab content loads.
tabs.on('ready', function(tab) {
  console.log('tab is loaded', tab.title, tab.url)
});

我們可以取得、設定分頁的各種屬性(但要注意，跟分頁的內容相關的屬性，如 URL，要等到分頁的 ready 事件觸發之後才能得到完整正確的內容)。藉由設定 url 屬性，我們可以在分頁中載入新的網頁：

var tabs = require("tabs");
tabs.on('activate', function(tab) {
  tab.url = "http://www.example.com";
});

我們可以將 content script 附加到某分頁中的網頁，然後使用這些 script 來操作該網頁的內容：

var tabs = require("tabs");
 
tabs.on('activate', function(tab) {
  tab.attach({
    contentScript: 'self.postMessage(document.body.innerHTML);',
    onMessage: function (message) {
      console.log(message);
    }
  });
});

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