Simple Chrome black background dark theme extension - How to build one in 5 minutes

There are times when a white background is best replaced with a black one.  If you are using Chrome, you can build your own custom extension in just a few minutes that can easily modify colours of your favourite website(s). To do this, we leverage the Content Scripts feature available to Chrome Extensions that is kind of like a poor man’s version of GreaseMonkey.  Best of all though, there are no closed custom 3rd party Chrome extensions to install from some unknown developer, here you will be the developer!

Content Scripts provide a mechanism to manipulate the DOM. The DOM is essentially a tree of all objects that constitute the webpage (images / links / text / styles etc).

What we are going to do is create an unpacked extension that simply adds a new stylesheet link at the end of the page load which will change the background colour to black, and the text/link/visited-link colours to various shades of grey. For our test, we will modify all pages falling under cnn.com and yahoo.com.

To get started, first create yourself a folder (on your Desktop or wherever) that will host the two files that comprise our extension, for example "Black Background Extension"

Within this folder, create a file named toggle.js that has the following contents:

var cssStyle='* { background: black !important; color: #EEEEEE !important }'
+ ' :link, :link * { color: #A1A1A1 !important }'
+ ' :visited, :visited * { color: #505050 !important }';

if(document.createStyleSheet) {
  document.createStyleSheet("javascript:'"+cssStyle+"'");
} else {
  var cssLink = document.createElement('link');
  cssLink.rel = 'stylesheet';
  cssLink.href = 'data:text/css,'+escape(cssStyle);
  document.getElementsByTagName("head")[0].appendChild(cssLink);
}

Next, create a file named manifest.json that has the following contents:

{
  "name": "Black Background",
  "version": "1.0",
  "description": "Sets background colour to black, and text, link, and visited link to shades of grey",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://*.cnn.com/*", "http://*.yahoo.com/*"],
      "js": ["toggle.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

Now, it is a simple matter of firing up Chrome, and typing in chrome://extensions in the address bar. Once the Extensions are displayed, activate the Developer mode option.

Next, choose the Load unpacked extension… button and navigate to the folder created above hosting our unpacked extension.

If all goes to plan, our extension should now be listed.  We also have the option of packing our extension in to a signed zip file that would allow us to redistribute it.

Finally, simply restart the Chrome browser and attempt to access a site from our match rules (cnn.com for example).  You should see that the background colour is now black!

For details on the content_scripts options leveraged in our manifest, refer to the Chrome documentation http://developer.chrome.com/extensions/content_scripts.html