将iframe加载到页面中，使用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中。

- Alexander Mills

---

如果您创建一个新的配置文件，并且只安装正在测试的扩展程序，问题是否仍然存在？ - Wesley Smith

你认为另一个扩展程序阻止了 iframe 吗？如果是这样，那么我的 iframe 解决方案就行不通了，因为其他用户可能会遇到我面临的同样问题。其他用户也会有阻止 iframe 或其他内容的扩展程序...对吧？ - Alexander Mills

是的，即使使用新配置文件并仅加载我的扩展程序，我仍然会收到相同的错误提示：“已被扩展程序阻止向服务器发送请求。” - Alexander Mills

可能是由于消息内容的原因。我会创建一个新的配置文件，逐个添加扩展程序，直到问题再次出现，以缩小引起问题的扩展程序范围。然后，查看为什么该扩展程序会导致问题。 - Wesley Smith

这取决于 iframe 的样式设置。右键单击框架边缘，然后单击“检查”。这将在开发工具控制台中打开 DOM 检查器。在控制台中悬停在 iframe 节点上，您应该清楚地看到框架占用的所有空间。然后，您可以在右侧 CSS 面板中调整框架的 CSS，直到它不干扰页面为止。 - Wesley Smith

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

希望能对您有所帮助。

- Sarah Dasko