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 default positioning of certain elements (divs, lists) etc, my ui looks different depending on which page it is being used.

I've tried using YUI reset v3 and that helped but didn't remove all the weirdness. Does anybody know of an even more aggressive reset method that does more than just clearing margin/padding and reset text sizes?

Thanks in advance.

Answer 1

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%.