How to re-render a page from a Google Chrome extension?

Question

I'm new to writing extensions for Google Chrome. I want to make an extension that only runs on a few pages (that I'll choose) and re-renders their CSS after the page has loaded (ideally I would like something similar to what you can do with GM_addStyle in greasemonkey scripts).

How can I accomplish this in a Chrome extension?

Answer 1

You can use Content scripts that have access to the pages DOM.

In your manifest.json you could have:

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "run_at": "document_end"
    }
  ],

This will inject the css file mystyles in to any google page after the DOM has loaded. This doesn't completely overwrite the styles, but you will be able craft your CSS so it replaces their styles.

More information can be found on code.google.com. It also includes information about how to programmatically inject CSS into a page.