Question

I’m currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).

jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I’ve tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I’ve also tried to add “CSS reset” classes, etc, but nothing seems to be working.

What’s the best way to go around preventing the CSS from interfering with my HTML?

Answer 1

You can’t prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like “yourapplicationname_mainelement_name” or something), then override all possible styles that might give strange effects on your html.

Your plugin:

<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>

Your css:

#yourapplicationname_mainelement_name p {
  display: block;
  color: black;
  background: white;
  position: relative;
  ... and so on ...
}

As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.

Further… It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You’ll have a hard time without it when developing your application.