CSS gets messed when script is injected

I built an extension which, whenever user visits some specific sites, I inject my script on the top of there web pages. I used

document.bo开发者_运维技巧dy.insertBefore(wrapperDiv, document.body.firstChild)

to do so.

Now problem: CSS of injected script gets messed up for each and every site(differ from one site to another).

How should I maintain single css structure for all sites?

---

You should be able to solve this problem by using unique IDs for your html tags with CSS.

That is, if your DIV CSS properties are interfering with their DIV CSS add a #uniqueNameHere ID to your DIV and set the CSS for the #ID.

This page on the use of the !important keyword may be useful too.

http://css-tricks.com/9462-when-using-important-is-the-right-choice/

---

Use unique selectors for your elements (be it classes with specific prefix or similarly constructed IDs), but you probably try to include CSS along with your script, which may not be a good idea.

In some cases the inline styling is the best idea - it will overwrite all the styles for your elements and will make sure the outlook of these elements is consistent across different pages.

So, I would say, go with inline styling.

For documentation on how the styles are overwritten in CSS 2.1, please see the following page: http://www.w3.org/TR/CSS21/cascade.html#specificity