为什么我不能在从Chrome扩展程序的内容脚本动态注入后使用jQuery？

Question

当在页面上以通常的方式作为脚本运行时，此代码在动态注入页面后打印jQuery的版本。但是在我的chrome扩展中，当我在动态注入它后尝试打印jQuery版本时，输出为undefined。

// create iframe
var frame = document.createElement("iframe");

// when frame loads
frame.addEventListener("load", function() {
  // create script to dynamically inject into DOM
  var script = frame.contentWindow.document.createElement("script");
  // when script loads print jquery version
  script.addEventListener("load", function() {
    console.log(frame.contentWindow.$.fn.jquery); // output -> 2.2.1
  });
  frame.contentWindow.document.head.appendChild(script);
  script.src = "https://code.jquery.com/jquery-2.2.1.js";
});

document.body.appendChild(frame);

所以这是我的问题：

我必须动态地将一些代码（我使用jQuery作为示例）注入到iframe中，因为我需要它将iframe.contentWindow的正确上下文作为窗口。

问题在于每当我尝试使用{strong>使用frame.contentWindow.someModule这样的脚本创建的全局（在这种情况下，它是frame.contentWindow.$我注入了jQuery源代码）它是未定义的。我认为这与Chrome扩展有关（比如chrome扩展javascript与其他代码隔离）

我的问题：

1. 为什么会这样？

2. 如何绕过（或解决此问题）呢？ 2.1。如何动态添加JavaScript（文件或某些代码），使其位于iFrame（而不是父窗口）的上下文中。我必须在运行时这样做，因为它是带有内容脚本的chrome扩展。

或者我可以直接在iframe中运行chrome扩展内容脚本吗？

摆弄上面的代码： https://jsfiddle.net/wj83oytd/5/

Answer 1

发现问题，

  

内容脚本在称为隔离的特殊环境中执行   世界。他们可以访问他们注入的页面的DOM，   但不是页面创建的任何JavaScript变量或函数。   它将每个内容脚本视为没有其他JavaScript   在正在运行的页面上执行。反过来也是如此：   页面上运行的JavaScript无法调用任何函数或访问任何函数   由内容脚本定义的变量。

     

https://developer.chrome.com/extensions/content_scripts#execution-environment

解，

动态注入您想要作为内联JavaScript代码运行的代码，而不是在内容脚本中运行它

不起作用的代码：

 // calling it in the content-script
 console.log(frame.contentWindow.$.fn.jquery); // undefined

解决方案：

var script = frame.contentWindow.document.createElement("script");
script.innerHTML = "console.log(window.$.fn.jquery);"; // set script code
// adding it to the frame and running it in it's context
frame.contentWindow.document.body.appendChild(rmptipScript); // injects the code
// prints 2.2.1