Quickly change css stylesheet on any site

Question

I usually read a site which has white text on black background (why, oh why!). After a minute of reading it makes my eyes hurt so I usually end up opening Chrome's developer tools and changing the two or three styles that make the page readable for me.

Is there a way to automate this so that I don't have to do it over and over for every page?

score 1 · Accepted Answer · edited May 23 '17 at 12:18

Simply write a user script for Chrome in JS. I'll explain it with a script I did for an annoying site once:

Example-File:

JS:

// ==UserScript==
// @author          me
// @version         1.0
// @name            User Script Test
// @date            August 10, 2012
// @include         *.test.com/*    // the asterisk gets every subdomain and page
// @run-at          document-end
// ==/UserScript==

(function(){
    var $ad = document.getElementById('skyscraper');
    var $link = $ad.getElementsByTagName('a');
    $ad.removeChild($link[0]);
    $ad.setAttribute('style', 'width:100%; left:480px;');
})();

Write it in JS, for example covering an annoying ad, that just won't go away.
Important!!! Make sure that the script has an extension of *.user.js! Else the file is not recognised by Chrome on the following step. (it just shows the source code to you, what an awesome behaviour...)
Then go to the extensions tab of Google Chrome and drag&drop the script file to your extensions. There may be an additional warning that this is unsafe bla bla.

You can even load jQuery into the dom, pointed out in this great SO-Post:
How can I use jQuery in Greasemonkey scripts in Google Chrome?

If you care to know what happens with your script: It is located in Chromes Extensions Folder (Win 7, Chrome 23) and will auto-update when edited:

C:\Users\YourUserName\AppData\Local\Google\Chrome\User Data\Default\Extensions

Quickly change css stylesheet on any site

1 Answers1