列出打开的标签页

学习本教程之前你需要学习 jpm 基础

列出打开的标签页,你可以遍历 tabs 对象本身。

下面的 add-on 添加一个 action button 当用户单击该按钮时,该日志将在打开的标签页中记录:

require("sdk/ui/button/action").ActionButton({
  id: "list-tabs",
  label: "List Tabs",
  icon: "./icon-16.png",
  onClick: listTabs
});

function listTabs() {
  var tabs = require("sdk/tabs");
  for (let tab of tabs)
    console.log(tab.url);
}

注意:为此你需要一个按钮图标,以"icon-16.png"的文件名保存到你的 add-on 的"data"目录下。你可以从这里下载图标:

运行该 add-on,加载一对标签页,并点击按钮,你会看到在控制台输出如下的内容:

info: http://www.mozilla.org/en-US/about/
info: http://www.bbc.co.uk/

你不能直接访问到标签页中的任何宿主内容(具体概念请查阅相关内容:JavaScript 本地对象、内置对象、宿主对象 )。

为了访问标签页的内容,你需要使用 tab.attach() 添加一个脚本,此 add-on 加载加载一个页面,然后将一个脚本附加到所有打开的标签页,该脚本将向标签页的文档添加红色边框:

require("sdk/ui/button/action").ActionButton({
  id: "list-tabs",
  label: "List Tabs",
  icon: "./icon-16.png",
  onClick: listTabs
});

function listTabs() {
  var tabs = require("sdk/tabs");
  for (let tab of tabs)
    runScript(tab);
}

function runScript(tab) {
  tab.attach({
    contentScript: "document.body.style.border = '5px solid red';"
  });
}

学习更多

要了解更多关于SDK中标签如何工作, 查看 tabs API reference

要了解更多关于在标签中运行脚本, 查看 tutorial on using tab.attach()

文档标签和贡献者

标签: 
 此页面的贡献者: zaobao, addOn
 最后编辑者: zaobao,