Isolating CSS for Chrome extension

Question

I\'m building a Chrome extension that does some UI injection using content scripts. The problem is that since every website is different and may try to screw around with the

Answer 1

meyerweb's reset styles look slightly more aggressive.

/* 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 2

I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.

Take creating a dialog for example. After installing Boundary, you can do this in your content script

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.
});

Elements within #yourDialogID will not be affected by the existing webpage.

Hope this helps. Please let me know if you have any question.

https://github.com/liviavinci/Boundary

Answer 3

We've had a similar issue, we've tried CSS resets and also using specific id tags for the elements and CSS rules, but it was never robust enough...

The best solution was to inject the elements into the DOM as Shadow DOM elements that contain the style inline. You can read your CSS file via AJAX requests and inject them to the Shadow DOM dynamically, just make sure that they are within the web_accessible_resources files (you can use a wildcard to your CSS folder).

In case that you are not familiar with Shadow DOM, here is a good example of how it works. It might take a bit of re-factoring on your end, but it's really the only solution that works a 100%.

Answer 4

That is why you should inject at document_end. You can do that by setting "run_at": "document_end" in the Content Script Manifest