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

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

文档中使用的样式

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

从扩展注入的div样式表

#myext div {
   color:#ccc;
}

但是，我没有在样式表中指定边框颜色，所以它继承了页面样式表和丑陋的嵌入元素

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

---

最好的办法是什么？

按照你建议的那样针对ID做每件事，以确保正确的DIV成为目标。。。这就是大多数插件的工作方式。。。您可以始终在SCSS中编写它，并对其进行编译，以简化编码过程，使用SCSS您可以将所有内容包装在ID中，如：

#mytext {
    div {
        border: 0;
    }

    h1 {
        color: #000;
    }
}

---

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

例如，您可以插入一个

，并将其设置为基本规则，如

显示：块。这将阻止继承常规标记css规则

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