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

一尘不染

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

javascript

我正在尝试让我的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文件中的其他函数？

阅读 434

2020-04-25

共1个答案

一尘不染

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

扩展代码-完全访问所有允许的chrome.*API。
这包括背景页面，以及可以直接通过它访问的所有页面，例如浏览器弹出窗口。
内容脚本（通过清单文件或chrome.tabs.executeScript）- 部分访问某些chromeAPI，完全访问页面DOM（不访问任何window对象，包括框架）。
内容脚本在扩展名和页面之间的范围内运行。window内容脚本的全局对象不同于页面/扩展名的全局名称空间。
注入的脚本（通过Content脚本中的此方法-完全访问页面中的所有属性。 无法访问任何chrome.*API。
注入的脚本的行为就像页面本身包含的一样，并且不以任何方式连接到扩展。

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

另外，在使用时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();"});
    }
});

2020-04-25