修改标签页中页面

为了修改特定标签页中的页面, 可以使用 tab对象的attach() 方法加载一个script脚本到页面中。因为他们的工作是和Web内容进行交互，所以这些脚本被称为content scripts(内容脚本)。

这是个简单的示例:

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    require("sdk/tabs").activeTab.attach({
      contentScript: 'document.body.style.border = "5px solid red";'
    });
  }
});

要运行这个示例你必须保存一个名为”icon-16.png“的图标文件在你的Add-on目录下的”data”目录下。你可以下载这个图标： 。

这个插件创建一个按钮，其中包含Mozilla的图标作为一个图标。这个按钮产生一个点击事件处理程序，处理事件中将获取当前活动标签页和加载一个脚本到该标签页中的页面。使用contentscript选项指定加载的脚本，该脚本只绘制一个红色边框页。

然后在浏览器窗口中打开任何网页，点击按钮 。你会看到一个红色的边界出现在页面中, 就像这样:

保持Content Script在一个单独的文件中

在上面的例子中我们的content script作为一个字符串来直接使用.除非脚本非常简单，你应该保持脚本作为一个单独的文件。这使得代码更容易维护、调试和审查。

比如，我们把上面的脚本代码保存在Add-on目录下的data目录中并取名为my-script.js，在代码中可以这样加载脚本：

var self = require("sdk/self");

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    require("sdk/tabs").activeTab.attach({
      contentScriptFile: self.data.url("my-script.js")
    });
  }
});

你可以加载多个脚本，同时这些脚本可以直接相互作用。所以你可以加载 jQuery, 然后在你的其他 content script使用它。

与Content Script传递信息

你的扩展插件脚本Add-on script和内容脚本content script 不能直接访问对方的变量和函数，但他们之间可以互相发送消息。

从一方发送消息到另外一方, 发送方需要调用 port.emit()发送消息， 同时接收方使用port.on()接收消息。

• 在 content script 中, port 是全局对象 self 的属性之一.
• 在 content script 中, tab.attach() 返回一个其中包含 port 属性的 worker 对象，你可以使用它来向 content script 发送消息

让我们重写上面的例子来从附加内容脚本 content script 传递一个消息。现在content script 需要像下面这样:

// "self" is a global object in content scripts
// Listen for a "drawBorder"
self.port.on("drawBorder", function(color) {
  document.body.style.border = "5px solid " + color;
});

在 add-on script 扩展脚本中，我们使用 attach()方法返回的对象向 content script 中发送一个“drawBorder”消息：

var self = require("sdk/self");
var tabs = require("sdk/tabs");

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    var worker = tabs.activeTab.attach({
      contentScriptFile: self.data.url("my-script.js")
    });
    worker.port.emit("drawBorder", "red");
  }
});

名为 drawBorder 的消息并不是一个内置的消息, 而是通过 port.emit()方法自定义的。

注入 CSS

不像 page-mod API, tab.attach() 不允许你直接注入CSS到页面中。

你需要使用 JavaScript 来修改页面的样式，就像前面的示例那样。

学习更多

要了解更多关于在SDK中标签页的使用, 可以查看打开一个网页教程,  列出打开的标签页教程, 和tabs API 参考手册.

要学习更多关于content scripts, 查看 content scripts guide.