是否可以在页面的内容中插入<iframe>？</iframe>

Question

使用内容脚本，我打算在<iframe>的页面中插入一个用户界面，但我有一些顾虑。

• 人们通常会使用设置/扩展来阻止页面上的iframe吗？
• 如果我的扩展程序iframe被阻止，我有办法检测到它吗？
• 在此方案中避免使用iframe的任何其他原因？

网站上有类似的问题，但他们没有具体问我想知道什么。

[我想使用iframe的原因是：我的扩展程序必须独立于加载的网站（即在任何网页上）运行。它的内容脚本需要显示设置/帮助等的UI。目前它通过在页面的DOM中插入div来实现。然而，来自网页的CSS被应用于扩展程序的UI，这比人们想象的更难修复。使用<iframe>似乎可以避免此问题。]

Answer 1

正如您所发现的那样，尝试从干扰中对您的CSS进行沙盒处理，在注入DOM时非常困难，而无需声明性地设置每个已知的样式属性。这是一个记录良好的问题，可以在以下帖子中找到一些解决方案：

• How do I prevent CSS interference in an injected piece of HTML?

• Is there a way to "sandbox" an HTML block away from its page's CSS without using iframes?

将您的用户界面放入<iframe>并没有什么根本性的错误。我不知道会阻止此行为的任何设置或扩展名。

如果您的框架UI需要与父页面上的DOM或内容脚本进行交互，您可以使用Window.Parent进行交互。如果您从其他域中提取用户界面，也可能需要考虑Same-Origin Policy。

Answer 2

按顺序回答：

1. 人do not commonly use settings/extensions to block iFrames。恰恰相反;最大的抱怨是如何从ISP和浸出/包装网站等放置的iframe中获取内容。

2. 是的，您可以通过让iFrame的JS发送“我已经开始”消息来检测您的iFrame是否被阻止。如果未检测到消息，则假设为最差。 ：）

3. 没有理由避免使用iFrame，除了它们有点像PITA一样。如果您只需要“显示设置/帮助等用户界面”，那么让您的扩展程序只打开the popup window types available to extensions之一可能会更好。您可以完全控制HTML / CSS / JS，而无需担心页面的干扰。