Question

我正在构建Chrome扩展程序，使用内容脚本执行一些UI注入。问题在于，由于每个网站都不同，并且可能会尝试使用某些元素（div，列表）等的默认定位，我的ui看起来会有所不同，具体取决于它所使用的页面。

我尝试过使用YUI重置v3，这有所帮助，但没有消除所有的怪异。有没有人知道一种更积极的重置方法，它不只是清除边距/填充并重置文本大小？

提前致谢。

Answer 1

我们遇到了类似的问题，我们尝试过CSS重置，并且还使用了特定的id标签来表示元素和CSS规则，但它从来都不够健壮......

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

如果您不熟悉Shadow DOM，here is是一个很好的例子。您可能需要稍微重新分解，但它确实是唯一可以100％运行的解决方案。

Answer 2

我最近创建了Boundary，一个CSS + JS库来解决这样的问题。 Boundary创建的元素与现有网页的CSS完全分开。

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

var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");

Boundary.appendToBox(
    "#yourDialogID",
    "<button id='submit_button'>submit</button>"
);

Boundary.find("#submit_button").click(function() {
  // find() function returns a regular jQuery DOM element
  // so you can do whatever you want with it.
  // some js after button is clicked.
});

#yourDialogID中的元素不会受到现有网页的影响。

希望这会有所帮助。如果您有任何疑问，请与我们联系。

https://github.com/liviavinci/Boundary

Answer 3

meyerweb's reset styles看起来更具侵略性。

/* 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;
}

Answer 4

这就是你应该在document_end注射的原因。您可以在Content Script Manifest

中设置"run_at": "document_end"来实现

隔离Chrome扩展程序的CSS

4 个答案: