css - 防止 Chrome 扩展 CSS 被网站覆盖

Question

我正在开发一个有趣的 chrome 扩展。在某些网站上，扩展程序的 CSS 会扭曲，因为该网站的 css 覆盖了我的扩展程序的 css。

我意识到这些场景之前已发布到 stackoverflow，但几乎所有答案都表明我使用 IFrame。

我对使用 IFrame 的概念不太满意，因为有时我必须更改网站内容，为此我必须在使用 IFrame 时找到解决方法。

我想出了以下解决方案

1. 介绍我的自定义 CSS 类命名约定并将这些类应用到我的 Chrome 扩展元素。

例如:

.Extension-Name-classname{
// css code
}

<element class=".Extension-Name-classname"> </element>

使用网络组件。我的想法是，由于每个 Web 组件都有自己的 CSS - 它将解决我的问题。

解决这个问题的方法应该是什么？

Answer 1

我不确定你想做什么，但是如果你正在注入(inject)一些 html 元素并希望你的 css 始终 take precedence on that element及其子元素，您应该为该元素提供一个 ID 并始终使用它 -

<element id="my-extension-spacename">
   <element class="class-name-1">
   </element>
   <element class="class-name-2">
   </element>
</element>

#my-extension-spacename .class-name-1 {
   // css code
}

#my-extension-spacename .class-name-2 {
   // css code
}