css - 防止 Chrome Extension CSS 被网站改写

Question

我正在开发一个有趣的 chrome 扩展。在某些网站上，扩展的 CSS 会失真，因为网站的 CSS 覆盖了我的扩展的 CSS。

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

我对使用 IFrame 的想法不是很满意，因为有时我必须更改网站内容，为此我将不得不在使用 IFrame 时寻找解决方法。

我想出了以下解决方案

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

例如:

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

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

1. 使用网络组件。我的想法是，因为每个 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
}