Question

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

使用chrome.tabs.onUpdated.addListener()检查页面的时间改变
使用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文件中的其他函数？

Answer 1

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

扩展程序代码 - 对所有允许的chrome.* API的完全访问权限。
这包括background page以及可通过chrome.extension.getBackgroundPage()直接访问的所有网页，例如browser pop-ups。
Content scripts（通过清单文件或chrome.tabs.executeScript） - Partial访问部分chrome API ，完全访问权限到页面的DOM（不到任何window个对象，包括框架）。
内容脚本在扩展和页面之间的范围内运行。内容脚本的全局window对象与页面/扩展名的全局命名空间不同。
注入脚本（通过内容脚本中的this method） - 对页面中所有属性的完全访问权限。 无法访问任何chrome.* API。
注入的脚本的行为就像页面本身包含它们一样，并且没有以任何方式连接到扩展。请参阅this post以了解有关各种注射方法的更多信息。

要将注入的脚本中的消息发送到内容脚本，必须使用事件。有关示例，请参阅this answer。注意：在一个扩展中从一个上下文传输到另一个上下文的消息是自动（JSON） - 序列化和解析。

在您的情况下，可能会在评估内容脚本script.js之前调用后台页面中的代码（chrome.tabs.onUpdated）。因此，您将获得ReferenceError，因为init不是。{/ p>

此外，当您使用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();"});
    }
});

Chrome扩展程序代码与内容脚本与注入脚本

1 个答案: