我正在构建Chrome扩展程序,使用内容脚本执行一些UI注入。问题在于,由于每个网站都不同,并且可能会尝试使用某些元素(div,列表)等的默认定位,我的ui看起来会有所不同,具体取决于它所使用的页面。
我尝试过使用YUI重置v3,这有所帮助,但没有消除所有的怪异。有没有人知道一种更积极的重置方法,它不只是清除边距/填充并重置文本大小?
提前致谢。
答案 0 :(得分:8)
我们遇到了类似的问题,我们尝试过CSS重置,并且还使用了特定的id标签来表示元素和CSS规则,但它从来都不够健壮......
最好的解决方案是将元素作为包含内联样式的 Shadow DOM元素注入DOM。您可以通过AJAX请求读取CSS文件并将它们动态注入Shadow DOM,只需确保它们位于web_accessible_resources文件中(您可以在CSS文件夹中使用通配符)。
如果您不熟悉Shadow DOM,here is是一个很好的例子。您可能需要稍微重新分解,但它确实是唯一可以100%运行的解决方案。
答案 1 :(得分: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中的元素不会受到现有网页的影响。
希望这会有所帮助。如果您有任何疑问,请与我们联系。
答案 2 :(得分:0)
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;
}
答案 3 :(得分:-2)
这就是你应该在document_end
注射的原因。您可以在Content Script Manifest
"run_at": "document_end"
来实现