在 Chrome 扩展程序创建的 iframe 中附加或执行脚本 [重复]

Question

主要问题

我正在构建一个 Chrome 扩展程序，其中涉及将 iframe 附加到页面。该扩展在后台页面中进行 AJAX 调用以检索要包含的外部 CSS / JS 的 URL，因此我需要将这些资源动态添加到 iframe。 iframe 代码是一个 HTML 页面，包含在扩展程序的 web_accessible_resources 中（它的 URL 为 chrome-extension://...）

这就是我在 iframe 中所做的：

window.onload = function() {
  chrome.runtime.sendMessage({action: "getResources"}, function(response) {
    // get urls of css / js files
    let { css, js } = response; // css and js are arrays of urls retrieved

    let head = document.getElementsByTagName('head')[0];
    for (let i = 0; i < css.length; i++) {
      let link = document.createElement('link');
      link.href = css[i];
      link.type = "text/css";
      link.rel = "stylesheet";

      head.appendChild(link);
    }

    for (let i = 0; i < js.length; i++) {
      let script = document.createElement('script');
      script.src = js[i];
      script.type = "text/javascript";
      script.onload = function() {
        window.alert('loaded script');
      }
      head.appendChild(script);
    }
  }
}

在此之后，我可以从头部记录样式表和脚本，以便成功附加它们。但是，script.onload 中的回调没有被调用，我尝试使用this answer 中的 getComputedStyle 来检查 CSS，但没有成功。所以样式表和脚本实际上都没有被执行。

我想知道 Chrome 扩展是否只是不允许动态注入 iframe。

---

附加信息

以下是我尝试过的一些事情：

• 将 URL 添加到权限

  提到here。我加载的所有脚本都来自 manifest.json 文件的权限字段中列出的站点，因此 CORS 应该不是问题。

• 尝试加载脚本的 hacky 方法

  我试过script.innerHTML = "console.log('success')"，也试过head.innerHTML = '<scr' + 'ipt type="text/javascript" src="[URL_TO_LOAD]"></scr' + 'ipt>'。都没有奏效。我没有尝试使用document.write 或eval 的任何解决方案，因为即使出于安全原因，我也永远不会使用它们。

• 设置超时

  我尝试在加载脚本后设置超时，以防它需要一段时间才能执行，但即使在 10 秒后，本应存在的全局变量仍然未定义。

• HTTPS

  请求通过 HTTPS 提供的脚本也不起作用。

任何帮助将不胜感激。

Answer 1

原来这是由于 Chrome 的Content Security Policy。我找到了答案here。但是，可以动态注入 iframe 的脚本必须是本地文件或通过 HTTPS 提供。