使用Chrome扩展程序内容脚本

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”。

希望有所帮助。