Replacing Images with a Chrome Extension

I decided to start learning about the development of extensions for Google Chrome, and one simple yet nontrivial test of the extension API is to replace images in the page. This post demonstrates how to do just that.

First, a manifest for the extension must be created and named manifest.json. (You should probably create a dedicated directory to store this file in, since we'll be putting more files with it soon.) It is a JSON-formatted configuration file that tells Chrome some critical pieces of information about your extension. This manifest.json standing alone is a valid extension:

{
"manifest_version": 2,
"name": "Chrome Extension Test",
"version": "0"
}

The manifest_version field is a constant, a signature that tells Chrome how to interpret the manifest. The name field is the title that will display for your extension on the Extensions page. The version field must consist of 1 to 4 numbers between 0 and 65535, separated by dots.

Extensions can inject JavaScript files into pages. This simple script (I named it "imgrepl.js", you can name it anything but you should place it alongside manifest.json) loops through every image on the page and replaces it with one of the files in the "img" directory:

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].src = chrome.extension.getURL("img/img" + 
 getRandomInt(0, 5) + ".jpg");
}

For this to work, you must create a directory named "img" in your extension's directory and place image files titled "img0.jpg" to "img4.jpg" in that directory. You can include more image files by changing the bold-italic number 5 in the above script.

Then, this script and the images must be declared in the manifest. When declared as a Content Script, a JavaScript file (or even a CSS file) will be injected into the specified pages. The injection should be done and the code executed when the document finishes loading (since that's when the image tags will have been added to the DOM). The images in the "img" directory need to be registered as Web-Accessible Resources so that the script can access them. The following file is the updated manifest.json:

{
"manifest_version": 2,
"name": "Chrome Extension Test",
"version": "0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["imgrepl.js"],
"runat": "document_end"
}
],
"web_accessible_resources": [
"img/*.jpg"
]
}

The <all_urls> value for "matches" tells Chrome to inject the JavaScript file into all webpages. If you use non-JPG images, make sure to declare them in "web_accessible_resources".

In Chrome, open the Extensions page (under "More tools" in the settings menu). Check "Developer mode", then click "Load unpacked extension". Navigate to the directory containing manifest.json and hit OK to load the extension. When you navigate to a page that loads pictures with the <img> tag, you will see them replaced by your images.