從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