Replace Images on a Website with your own using a Chrome Extension | Chapter 5

Published in

Heptagon

5 min readMar 10, 2019

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 customization to these extensions. Note: 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 with your own images using Chrome Extension.

Chrome Extension that replace web images with user-given images

Requirements
The Workflow
Initializing The Chrome Extension
The Output
Summary

Requirements

In this chapter, we are going to create a chrome extension that replaces the web images with user-given 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 on 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 a 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 the background script replaces the images on the webpage with our 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, 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.

Browser Action: 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.

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

Output

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

Summary

I 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 web page with our own images (by selection) using Chrome Extension.

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.