使用iframe在网页上显示chrome扩展UI存在问题？

我正在开发一个用于所有网页的chrome扩展。作为其功能的一部分，它需要在任何给定页面上显示UI

目前，为了做到这一点，我从内容脚本向页面添加了一个div（包含UI-HTML）。问题是，包含页面的样式应用于扩展的UI，导致它在不同的网页上看起来不同

解决此问题的两种方法：

为扩展的UI元素应用特定样式（标记为！重要）。这非常困难，因为根据页面的不同，任何元素的任何属性都可能有不同的值

将此UI添加到iframe，并将其插入页面。当然，这解决了方法1的CSS问题。但是我以前没有在扩展的上下文中对iframe做过很多工作，我想知道是否有什么需要注意的地方

我想到的一些潜在问题： 1.与iframe js交互的内容脚本可能会很复杂。 2.某些用户可能在特定或所有站点的浏览器级别禁用iFrame

通常，出于安全和性能（以及其他原因）的考虑，不赞成使用iFrame。我想知道在这种情况下，使用iframe是否是最明智的选择

---

另外，我打算稍后将扩展移植到Firefox。这可能不相关，但只是把它放在那里，以防它有助于倾斜的决定

作用域CSS可能是解决此问题的一种方法：谢谢-了解这一点非常有用。但我谈论的问题是另一种方式。作用域CSS允许您仅将CSS应用于DOM元素及其子元素（而不是父元素），但我需要确保父网页中的CSS不会应用于插入的扩展UI元素。虽然在这种情况下应用特定的样式是有帮助的，但它只在一定程度上有帮助，因为正如我所说的，根据网页的不同，任何元素的任何属性都可能被修改。这里有一个类似的问题，有一些信息性的答案：几周前我遇到过类似的问题，虽然对我来说，注入的HTML只在10个网站上运行，所以我可以用最少的CSS添加来过滤干扰。谢谢分享。它还与其他几个直接相关的问题联系在一起。10个网站听起来有些合理：）在这里添加这个问题，因为它也是相关的