Google chrome extension 隔离Chrome扩展的CSS

我正在构建一个Chrome扩展，它使用内容脚本进行一些UI注入。问题是，由于每个网站都不一样，可能会试图改变某些元素（div、list）等的默认位置，因此我的ui根据使用的页面的不同而不同

我尝试过使用YUI重置v3，这很有帮助，但并没有消除所有的奇怪之处。有谁知道一种更激进的重置方法，它不仅仅是清除边距/填充和重置文本大小

---

提前感谢。

这就是为什么您应该在

文档末尾插入
。您可以通过设置
“run\u at”：“document\u end”
中的看起来更具攻击性

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

我们也遇到过类似的问题，我们尝试过CSS重置，也为元素和CSS规则使用了特定的id标记，但它从来都不够健壮

最好的解决方案是将包含内联样式的元素作为阴影DOM元素注入DOM。您可以通过AJAX请求读取CSS文件，并将它们动态地注入到shadowdom中，只需确保它们位于可访问的web资源文件中（您可以在CSS文件夹中使用通配符）

如果您不熟悉shadowdom，这是一个很好的示例，说明它是如何工作的。这可能需要对您的终端进行一点重新分解，但这确实是唯一一个100%有效的解决方案。
我最近创建了Boundary，一个CSS+JS库来解决类似的问题。Boundary创建的元素与现有网页的CSS完全分离

以创建对话框为例。安装Boundary后，可以在内容脚本中执行此操作

var dialog=Boundary.createBox（“yourDialogID”、“yourDialogClassName”）；
Boundary.loadBoxCSS（“yourDialogID”，“dialog.css中元素的样式”）；
边界附加框(
“#yourDialogID”，
“提交”
);
边界。查找（“提交”按钮）。单击（函数（）{
//函数返回一个常规jQuery DOM元素
//所以你可以用它做任何你想做的事。
//点击按钮后的一些js。
});

#yourDialogID中的元素将不受现有网页的影响

希望这有帮助。如果你有任何问题，请告诉我

好吧，与其说是在javascript执行时，不如说是在注入HTML时。将其放入正文意味着它可能会受到页面样式的影响。我认为解决方案是在iFrame中使用匿名内容。这里详细介绍的技术：我同意，最好的注入方式是iFrame，这样样式就不会被继承。但是在加载dom时，应该始终将其放在末尾。因为有些网站在一开始加载iframe的时候可能会弄脏你的iframe。