在Chrome扩展程序

Question

主要问题

我正在构建Chrome扩展程序，其中包含向页面添加iframe。扩展在后台页面中进行AJAX调用以检索要包含的外部CSS / JS的URL，因此我需要将这些资源动态添加到iframe。 iframe代码是扩展程序web_accessible_resources中包含的HTML页面（它的网址为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。

其他信息

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

• 将网址添加到权限

  提到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的任何解决方案，因为即使他们出于安全原因工作，我也绝不会使用这些解决方案。

• 的setTimeout

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

• HTTPS

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

任何帮助将不胜感激。

Answer 1

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