防止文档样式表影响chrome扩展注入元素样式

Question

我正在编写一个chrome扩展名，它会在文档中注入一些元素。问题是注入元素css是从文档中指定的样式表继承的。

文档中使用的样式

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

从扩展程序中注入div样式表

#myext div {
   color:#ccc;
}

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

为了解决这个问题，我得出结论，为我的容器（#myext）指定所有css属性，以便所有子元素都将继承这些属性或使用iframe来避免覆盖css。

最好的主意是什么？

Answer 1

根据你的建议制作特定于ID的所有内容将确保正确的div成为目标...这就是大多数插件往往会做的事情......你总是可以用SCSS编写它并编译它来制作编码时生活更轻松，使用SCSS你可以将所有内容包装在ID中：

#mytext {
    div {
        border: 0;
    }

    h1 {
        color: #000;
    }
}

Answer 2

也许你可以考虑创建自己的标签？

示例，您可以注入<div>而不是注入<custom-div>，并设置基本规则，例如display:block;。这将阻止继承常规标签css规则。

我目前正在构建一个chrome扩展，需要在页面中注入一些HTML，而我还没有找到反对上述解决方案的矛盾参数。