css - 如何将 div 和后代的所有样式重置为 Chrome 默认值

Question

我不确定这是否可行，但我想将所有用户样式设置回 div 和后代的 chrome 默认值。

我正在构建一个 Chrome 插件，它可以在任何网页上创建一个弹出窗口，但是由于每个页面都有过多的自定义样式，我试图找出每一个不一致的地方并用我的 div(和后代)自定义覆盖它风格，它正在成为一场噩梦。

每次我认为我已经涵盖了所有基础时，另一个站点会实现其他需要覆盖的内容。

在这种情况下标准化弹出窗口的最简单方法是什么？

我能想到的一种方法是(硬着头皮)获取默认的 Chrome CSS 样式并将它们实现到一系列捕获所有后代选择器中，但是肯定有更好的方法。

Answer 1

如果您想绝对确保元素的样式不受网页 CSS 的影响，有 2 种可能的解决方案:

1. 使用iframe实现你的弹出窗口。 (此解决方案“安全”且足够简单，但基于弹出窗口和网页之间的交互类型，它可能会变得很麻烦。)

2. 利用 Shadow DOM 。 (这可能是“正确”的解决方案，但实现起来可能会稍微复杂一些。)

关于第二种解决方案的一些资源:

• 介绍性 tutorial .
• 将“Shadow DOM”概念融入 Chrome 扩展的实际示例:
  RobW 的 Display Anchors extension