The manifest

Chrome extensions require a file called the manifest. It’s a simple JSON file (named manifest.json) and is read by Chrome to understand what permissions the extension requires, which pages it should load on and things like the name and icons. Here’s a simple example for this application:

{
  "manifest_version": 2,
 
  "name": "Modify CSS and HTML",
  "version": "0.1.0",
  "description": "Lateral blog post demo extension",
 
  "content_scripts": [{
    "css": ["styles.css"],
    "js": ["content.js"],
    "matches": ["https://blog.lateral.io/*"]
  }]
 
}

At the top you can see the standard name, version and description fields. The important part is the content_scripts field. This tells Chrome that whenever we are on a page that matches the matches field, load the CSS file(s) in css and the Javascript file(s) in js.

styles.css
This is the stylesheet referenced by the manifest. All I want to do is to change the background of the blog to a simple pattern so my styles.css contains the following:

body {
  background: url('https://media.giphy.com/media/3o7WTDJQVuYwhhuLhC/giphy.gif') !important;
}
 
#masthead,
#primary {
  -webkit-filter: invert(100%);
  filter: invert(100%);
  background-color: #fff;
  padding: 20px !important;
}
#masthead {
  background: none;
}
#masthead img, #primary img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

I changed the background to a GIF of a unicorn floating through space. Since the GIF has a dark background, I set a background colour and inverted the main content areas.

Note: Here I am loading the background image from giphy, but it’s entirely possible to load from the extension itself using the web_accessible_resources field of the manifest and this tip from StackOverflow.

Note #2: I’m using !important here to override the existing pages CSS. You could probably get around this using a more specific selector, but for demonstration purposes I’ll leave it at that.

content.js
Now for the javascript file that gets loaded on the blog. Since this demo extension is already kind of ridiculous, I’m going to replace all the images on the blog with cats.

var images = document.getElementsByTagName('img');
for (var i = 0, l = images.length; i < l; i++) {
  images[i].src = 'http://placekitten.com/' + images[i].width + '/' + images[i].height;
}

Now we have everything in place, the extension folder should look something like this:

‍

‍

I put the code on GitHub at lateral/chrome-extension-blogpost and if you want to download the extension you can get a zip of it here.

To install the extension, visit chrome://extensions in Chrome and drag the folder containing the above files into the window:
‍

And now the Lateral blog looks like this:
‍

Hopefully the extension you make will be a bit more meaningful. ¯\_(ツ)_/¯

‍

‍