How do you use Chrome Extensions to change CSS of a web site?

Question

I'm looking to create an extension for personal and possibly personal friend usage as well that simply changes a few colors that are displayed on a website I visit. I use Reddit Enhancement Suite, which has options for 'Night mode' that completely changes the color appearance of Reddit.

I would like to know how to edit or inject CSS code to this website so that the colors used in the website are what I would like them to be when I view the page. Mind you, this is of course just in my browser or in another Chrome browser using my extension.

Answer 1

You can do exactly as you said: you can inject a CSS file or code into the page. The easiest way is through the manifest (look at the CSS property).

You only need to complete your manifest.json in order for Chrome to know in which pages it has to insert your CSS file into.

If you want to decide programatically when to insert the CSS, you can use chrome.tabs.insertCSS(), where you can insert a CSS file or just the code as a string.

Answer 2

Instead of an extension, you could also do it in a user script. Then you can simply use GM_addStyle, just like with Greasemonkey scripts. It's much simpler to write and more lightweight in terms of memory usage.