63

我试图让我的 Chrome 扩展程序在init()加载新页面时运行该功能，但我无法理解如何执行此操作。据我了解，我需要在 background.html 中执行以下操作：

  1. 用于chrome.tabs.onUpdated.addListener()检查页面何时更改
  2. 用于chrome.tabs.executeScript运行脚本。

这是我的代码：

//background.html
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    chrome.tabs.executeScript(null, {code:"init();"});
});

//script.js
function init() {
    alert("It works!");
}

我还想知道 init() 函数是否可以访问位于其他 JS 文件中的其他函数？

4

1 回答 1

169

Chrome 扩展中的 JavaScript 代码可以分为以下几组：

  • chrome.*扩展代码 - 对所有允许的API的完全访问权限。
    这包括背景页面，以及所有可以直接访问它的页面chrome.extension.getBackgroundPage()，例如浏览器弹出窗口。

  • 内容脚本（通过清单文件或chrome.tabs.executeScript） -部分访问某些chromeAPI，完全访问页面的 DOM（不访问任何window对象，包括框架）。
    内容脚本在扩展和页面之间的范围内运行。内容脚本的全局window对象不同于页面/扩展的全局命名空间。

  • 注入脚本（通过内容脚本中的此方法）- 完全访问页面中的所有属性。无法访问任何chrome.*API。
    注入脚本的行为就像它们被页面本身包含一样，并且不以任何方式连接到扩展。请参阅这篇文章以了解有关各种注射方法的更多信息。

要从注入脚本向内容脚本发送消息，必须使用事件。有关示例，请参见此答案。注意：在扩展中从一个上下文传输到另一个上下文的消息是自动 (JSON) 序列化和解析的。

在您的情况下，可能会在评估chrome.tabs.onUpdated内容脚本之前调用后台页面 ( ) 中的代码。script.js所以，你会得到一个ReferenceError，因为initis not 。

此外，当您使用 时chrome.tabs.onUpdated，请确保测试页面是否已完全加载，因为该事件会触发两次：加载前和完成时：

//background.html
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        // Execute some script when the page is fully (DOM) ready
        chrome.tabs.executeScript(null, {code:"init();"});
    }
});
于 2012-03-28T21:41:34.483 回答