Question

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

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

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

我想出了以下解决方案

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

例如：

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

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

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

解决这个问题的赌注方式应该是什么？

Answer 1

我不确定你要做什么，但是如果你要注入一些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
}

防止Chrome扩展程序CSS被网站覆盖

1 个答案: