我正在構建一個使用內容腳本進行UI注入的Chrome擴展。問題是,由於每個網站都不同,可能會嘗試使用某些元素(div,列表)等的默認位置,我的UI看起來不同,具體取決於它使用的是哪個頁面。爲Chrome擴展隔離CSS
我試過使用YUI重置v3,並幫助,但並沒有消除所有的怪異。有人知道更積極的重置方法,不僅僅是清除邊距/填充和重置文本大小嗎?
在此先感謝。
我正在構建一個使用內容腳本進行UI注入的Chrome擴展。問題是,由於每個網站都不同,可能會嘗試使用某些元素(div,列表)等的默認位置,我的UI看起來不同,具體取決於它使用的是哪個頁面。爲Chrome擴展隔離CSS
我試過使用YUI重置v3,並幫助,但並沒有消除所有的怪異。有人知道更積極的重置方法,不僅僅是清除邊距/填充和重置文本大小嗎?
在此先感謝。
這就是爲什麼你應該注射在document_end
。您可以通過設置"run_at": "document_end"
中的Content Script Manifest
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;
}
我們已經有過類似的問題,我們已經試過CSS重置以及使用特定ID標籤的元素和CSS規則,但它從來沒有足夠強大......
的最佳解決方案將元素注入到DOM中作爲包含內聯樣式的影子DOM元素。您可以通過AJAX請求讀取您的CSS文件,並將它們動態注入到Shadow DOM中,只要確保它們在web_accessible_resources文件中(您可以在CSS文件夾中使用通配符)。
如果你不熟悉Shadow DOM,here is是一個很好的例子。可能需要對您的目標進行重新分解,但它確實是唯一能夠100%工作的解決方案。
我最近創建了Boundary,一個CSS + JS庫來解決這樣的問題。邊界創建與現有網頁的CSS完全分離的元素。
以創建一個對話框爲例。安裝分界後,您可以在您的內容腳本中#yourDialogID
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.
});
元素不會被現有的網頁受到影響做到這一點。
希望這會有所幫助。如果您有任何問題,請告訴我。
很好,這是沒有那麼多的時候的JavaScript執行,因爲它是在HTML被注入。將其放入正文意味着它可能會受到頁面樣式的影響。 –
我認爲解決方案是在iframe中使用匿名內容。技術詳細在這裏:http://www.borderstylo.com/posts/220-anonymous-content-injection-in-google-chrome –
我同意,最好的注射將iframes這種方式不會被繼承。但是當dom被加載時,你應該總是把它放在最後。因爲一些網站可以在開始時加載iframe, –