为什么内容脚本不能使用后台页面加载的 jQuery？

Question

我正在构建我的第一个扩展程序，但在让后台页面加载脚本在内容脚本中工作时遇到问题，这让人怀疑后台页面上加载的任何脚本是否真的可用于所有内容脚本。

我有两个 javascript 文件，functions.js 和 content.js，它们都使用 jQuery。我在后台页面加载 jQuery 和函数脚本以减少每个站点匹配的解析。一次就够了，因为它们都是函数。

ma​​nifest.json 无效

{
  "name": "extension name",
  "background_page": "background.html",
  "content_scripts": [ {
    "js": [ "js/functions.js", "js/content.js" ],
    "matches": [ "http://*.mysite.com/*" ],
    "exclude_globs": [ "*board*" ],
  } ],
  "version": "0.1"
}

注意：使用“include_globs”加载 CDN 的 jQuery 不起作用。模拟 @include 是失败的，所以我不得不在扩展中包含 jQuery。

ma​​nifest.json 工作中

{
  "name": "extension name",
  "background_page": "background.html",
  "content_scripts": [ {
    "js": [ "js/jquery-1.7.1.min.js", "js/functions.js", "js/content.js" ],
    "matches": [ "http://*.mysite.com/*" ],
    "exclude_globs": [ "*board*" ],
  } ],
  "version": "0.1"
}

注意：这里我删除了在后台页面加载 jQuery。

background.html

<html>
    <head>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/functions.js"></script>
    </head>
</html>

content.js

console.log('testing console');  // this works
alert('testing native JS');  // this works
$('<div id="myTestingDiv" />').prependTo('body');  // this fails

Answer 1

背景页面、弹出页面和内容脚本都在不同范围和文档中运行。

在后台页面中定义的任何变量和脚本都不能在内容脚本中直接访问，反之亦然。
另一方面，注入的内容脚本可以相互交互。

您可以使用以下方法访问全局 (window) 对象：

• 获取背景页面的window：chrome.extension.getBackgroundPage()
• 获取当前扩展中的任何/所有 window 对象：chrome.extension.getViews()