How to Build a Chrome Extension | Chapter 5: How to replace images in a Website

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the Contents of Chapter 5: How to replace images in a website using Chrome Extension.

Requirements
The Workflow
Initializing The Chrome Extension
The Output
Summary

Requirements

In this chapter, we are going to create a chrome extension will be able to replace all the images in a web page with our own images.

Image Storage Folder

The images that are to be randomly replaced with the webpage images have to be stored in a folder. Refer the Chapter 2 for creating a folder or a file.

Copy some image of your choice to the folder(For Chrome extension icon)
Let’s create a folder called images and copy some images into it in .jpg format.

Code Files

To create a Chrome Extension that replaces all the images in the web page with our own images, we require the following files. If you want to know more about the types of files mentioned in this post, do visit Chapter 1: An introduction on chrome extensions via the chapter navigation section at the bottom of this post.

manifest.json: Contains the configurations, properties, and information about the Chrome Extension.
content.js: Contains the content that needs to be performed on chrome.
background.js: Loads when the chrome is launched.

Step 1: Create the manifest.json file with the following code.

{
"manifest_version" : 2,
"name" : "Chrome Extension: Replace Image",
"version" : "0.1"
}

Step 2: Add these images as web-accessible resources in your manifest.json as shown below

{
"manifest_version" : 2,
"name" : "Chrome Extension: Replace Image",
"version" : "0.1",
"web_accessible_resources" : [
"images/*.jpg"
]
}

Step 3: Let’s create a background script for the extension which sends a message to content script, using that message content performs the task. Create background.js script as shown below.

console.log(“Background running”);
chrome.browserAction.onClicked.addListener(buttonClicked);
function buttonClicked(tab)
{
let msg = {
txt : “Hello”
}
chrome.tabs.sendMessage(tab.id,msg);
}
}

Step 4: Now add background.js as background script in manifest.json

{
"manifest_version" : 2,
"name" : "Chrome Extension: Replace Image",
"version" : "0.1",
"web_accessible_resources" : [
"image/*.jpg"
],
"background" : {
"scripts" : ["background.js"]
}
}

Step 5: Go to chrome://extensions tab and reload the extension. You can see Inspect views background page. If you click on that link, you would see the background running.

Step 6: Let’s write the content.js script to perform the image replace function.

console.log('We are ready to replace the images!');
chrome.runtime.onMessage.addListener(replace);
function replace()
{
let filenames = [
"deer.jpg",
"kitten.jpg",
"panda.jpg",
"puppy.jpg",
"rabbit.jpg",
];
let imgs = document.getElementsByTagName('img');
for(imgElt of imgs)
{
let r = Math.floor(Math.random() * filenames.length);
let file = 'images/' + filenames[r];
let url = chrome.extension.getURL(file);
imgElt.src = url;
console.log(url);
}
}

Our final manifest.json file with the content script will look like the following

{
"manifest_version" : 2,
"name" : "Chrome Extension: Replace Image",
"version" : "0.1",
"web_accessible_resources" : [
"images/*.jpg"
},
"background" : {
"scripts" : ["background.js"]
},
"browser_action" : {
"default_icon" : "r.png"
},
"content_scripts" : [
{
"matches" : [
"<all_urls>"
],
"js" : ["content.js"]
}
]
}

The Workflow

After the Extension is clicked the background.js sends a message to the content.js file. The content.js after receiving a message from background script replaces the images in the webpage with images that we have saved in the folder.

Initializing The Chrome Extension

After all the files for the Chrome Extension are created and filled with the given codes, to add the Chrome Extension to your browser perform the following steps.

Step 1: Go to Google Chrome and type chrome://extensions in the address bar.

Step 2: Enable Developer Mode option on the top right corner of the page.

Step 3: Click the Load unpacked button.

Step 4: Select the folder where we have written the code and click open.

Now the Chrome Extension is loaded into the browser.

replace images with your own images using Chrome Extension

BrowserAction: Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup.

Note: Even if you don’t specify a browser action icon, a default icon with the letter of the name of your extension (given in manifest) will be assigned.

Output

Now open a web page which contains images, open the console using ctrl+shift+j. You can see the message saying “We are ready to replace the images!”

Now click on the extension icon, you will see all the images in the web page replaced with our images.

Summary

Hope the fifth chapter in the “How to build a chrome extension” series was able to pique your interest in creating your very own extension.

In this chapter we learned how to replace all the images in a website using Chrome Extensions.

In the next chapter, we’ll be learning how to replace all the images in a web page with our own selected images using Chrome Extension. Feel free to reach out for any queries.

Chapter Navigation

Chapter 1: An Introduction to Extensions

Chapter 2: Bookmarklets

Chapter 3: Changing the background color of a paragraph with Chrome Extension

Chapter 4: Replacing paragraph text with your user-given text using Chrome Extension

Chapter 5: Replacing images in a website using Chrome Extension

Chapter 6: Replacing images with your own images using Chrome Extension

Chapter 7: Deploy and Publish your Chrome Extension

Chapter 8: The Atomic Habit Tracker

References

The Coding Train: Videos

Blog