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

我试图让我的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文件中的其他function？

Answer 1

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

• 扩展代码 – 完全访问所有允许的chrome.* API。
  这包括背景页面以及所有可以通过chrome.extension.getBackgroundPage()直接访问的页面，比如浏览器popup窗口 。

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

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

要从注入脚本发送消息到内容脚本，必须使用事件。 看到这个答案的例子。 注意：从一个上下文扩展到另一个上下文的消息会自动（JSON）串行化和parsing 。

---

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

另外，当你使用chrome.tabs.onUpdated ，确保你testing页面是否完全加载，因为事件触发两次：加载之前，并在完成：

 //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();"}); } });