javascript - 使用 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

这是我在页面左上角看到的:

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

Requests to the server have been blocked by an extension.

有谁知道如何从内容脚本加载 iframe？我要做的是将 HTML 文件从我的 Chrome 扩展代码库加载到该 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”。

希望对您有所帮助。