javascript - 防止文档样式表影响chrome扩展注入(inject)的元素样式

Question

我正在编写一个 chrome 扩展程序，它将向文档中注入(inject)一些元素。问题是注入(inject)的元素 css 是从文档中指定的样式表继承的。

文档中使用的样式

div {
    color:red;
    border:1px solid black;
}

从扩展中注入(inject) div 样式表

#myext div {
   color:#ccc;
}

但是，我没有在我的样式表中指定边框颜色，因此它继承自页面样式表并丑化了嵌入元素。

为了克服这个问题，我得出一个结论，即为我的容器 (#myext) 指定所有 css 属性，这样所有子元素都将从这些属性继承，或者使用 iframe 来避免覆盖 css。

什么是最好的主意？

Answer 1

像您建议的那样将所有内容都特定于 ID 将确保正确的 div 被定位...这就是大多数插件倾向于做事的方式...您总是可以在 SCSS 中编写它并编译它以使编码时的生活更轻松，使用 SCSS 你可以将所有内容包装在 ID 中，例如:

#mytext {
    div {
        border: 0;
    }

    h1 {
        color: #000;
    }
}