CSS Isolation for Chrome Extension

Question

I am creating a Chrome extension that injects a user interface using content scripts. The problem is that since each website is different and may try to tie using the default elements (divs, lists), etc., my ui looks different depending on which page it is used on.

I tried using YUI reset v3, and it helped, but did not fix all the weirdness. Does anyone know of a more aggressive reset method that does more than just align margins / indents and reset text sizes?

Thanks in advance.

Answer 1

We had a similar problem, we tried to flush CSS and also use specific id tags for CSS elements and rules, but it was never strong enough ...

The best solution was to insert elements into the DOM as DOM elements of the DOM containing an inline style. You can read your CSS file using AJAX requests and paste them dynamically into the Shadow DOM, just make sure they are in the web_accessible_resources files (you can use the wildcard in your CSS folder).

If you are new to the Shadow DOM, here is a good example of how it works. This may require a bit of re-factoring at your end, but it is really the only solution that works 100%.

Answer 2

I recently created Boundary, a CSS + JS library to solve such problems. A border creates elements that are completely separate from an existing CSS web page.

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

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 in #yourDialogID will not be affected by an existing web page.

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

https://github.com/liviavinci/Boundary

Answer 3

meyerweb reset styles look a bit 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 4

This is why you should enter document_end . You can do this by setting "run_at": "document_end" in the Content Script Manifest