Chrome Extension - Prevent CSS From Being Over Written

Question

I am writing a Chrome Extension where a small panel appears on top of the existing website. When I go to certain websites, I notice that the CSS of my panel has been over-written by the website's CSS. I am currently using Eric Meyer's CSS Reset but it does not seem to be doing the trick. Is there something else I can do?

Answer 1

Here's a nifty 'hack' with iframes, where you don't actually instantiate an iframe:

1. Append an iframe to the DOM, this will be a container for your do dad
2. Walk into the iframe and add your HTML code to the innerHTML of the body

It looks like this:

var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = '<a href="yomama.com">Normal link!!</a>';