使用Chrome扩展程序内容脚本将iframe加载到页面中

Question

我可以使用内容脚本将HTML / CSS动态添加到页面中。但是我尝试添加iframe广告代码，但遇到了一些麻烦。

这是我的代码：

  const myIFrame = `
    <iframe src="${modalIFrameURL}"></iframe>
  `;
  let div = document.createElement('div');
  div.style.zIndex = 9999999;
  div.innerHTML = myIFrame;
  document.body.insertBefore(div, document.body.firstChild);

请注意，modalIFrameURL的值为：

chrome-extension://omelijcoklpokoeobkpepoipjpbakoeo/modal-iframe.html

这是我在页面左上方得到的：

如果将鼠标悬停在灰色的失败框上，它会显示：

扩展阻止了对服务器的请求。

有谁知道如何从内容脚本加载iframe？我要做的是将Chrome扩展代码库中的HTML文件加载到该iframe中。

Answer 1

几周前，我遇到了这个问题。我发现在我的manifest.json文件中添加“ web_accessible_resources”部分可以解决该问题。

从您呼出的内容来看，它应该像这样：

"web_accessible_resources": [
    "modal-iframe.html"
],

https://developer.chrome.com/extensions/manifest/web_accessible_resources

只要确保您在扩展程序构建目录中包含“ modal-iframe.html”即可。

希望能有所帮助。