从chrome扩展的内容脚本动态注入jQuery后，为什么不能使用jQuery？

Question

当以脚本的方式在页面上以常规方式运行时，此代码在动态注入页面后将打印jQuery的版本。 但是在我的chrome扩展名中，当我在动态注入jQuery后尝试打印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);

所以这是我的问题：

我必须向iframe中动态注入一些代码（我以jQuery为例），因为我需要它具有iframe.contentWindow作为窗口的正确上下文。

问题是，每当我尝试使用通过诸如frame.contentWindow.someModule之类的someModule.js之类的脚本创建的全局frame.contentWindow.someModule （在本例中为frame.contentWindow.$因为我注入了jQuery源代码）时，它都是不确定的。 我认为这与chrome扩展名有关（例如chrome扩展名javascript与其他代码隔离了）

我的问题：

1. 为什么会这样？

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

还是可以直接在iframe中运行chrome扩展程序content-script？

摆弄上面的代码： 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