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


Tags: javascript,css,google-chrome,google-chrome-extension

Problem :

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?



Solution :

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.


    CSS Howto..

    How to align a HTML definition list (
    ) horizontally without limiting term or definition in height?

    How to link index.html to css file for github page

    How to create different and unique ID for some class in css?

    How to add CSS files for different platform devices? [closed]

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    How to use css style in php

    How do I get my HTML page to display in the browser without horizontal and vertical scroll bars?

    How to achieve this layout with CSS and div?

    How to force a list to be vertical using html css

    How to find the relevant stylesheet for a specific CSS code [closed]

    How Do I Get A Border From YUI GRID Tool?

    How to make dot-dash underline

    How to set width of container with two div's [closed]

    How do I create an oval around text in CSS?

    Showing border when clicking icon on phones browser

    Fixed sidebar, content under it, how to fix?

    Showing calendar exactly below a textbox

    How to make a layout in which certain tags will fill remaining space of parent tag/container?

    How to display inline with rails?

    How do you refer to more than one .css file in html?

    CSS\HTML - How to add Ionicons to CSS “content” property?

    Basic concept for how javascript replaces an html input with something interactive?

    How to dynamically remove all unwanted CSS and JS from page

    How to make CSS triangles (with borders) compatible across browsers

    How can I get the second child using CSS?

    How to change the css and html file at the same time

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    How to display an HTML list non-nested?

    How to position images next to text using CSS

    How to make a header bar fold over the webpage css