How to not apply a webpage's CSS on the div I am inserting into it via content scripts?
I am building a chrome extension in which I insert a div into webpage's body and set it's CSS position to fixed so that it floats over the page.
However, the host page's CSS gets applied over the div I am inserting and I don't want that to happen. How can I avoid that?
I tried applying normalize.css to get rid of the css being applied by host page but that doesn't seem to work.
As far as I know, there are three solutions, the first one being ideal:
Put your content into an iframe. The parent's css won't apply inside of it. Demo here (click).
Reset every css style on your element and all of its children. See this answer (click).
Use inline styles all the way.