Changing Background Color of a Paragraph using Chrome Extension | Chapter 3
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 3: Changing the background color of a Paragraph in Chrome Extension.
Contents
- Requirements
- The Workflow
- Initializing The Chrome Extension
- The Output
- Summary
Requirements
To create a simple Chrome Extension that changes the background color of a paragraph, we would 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 Background Color Change",
"version" : "0.001",
"content_scripts" : [
{
"matches" : [
"<all_urls>"
]
}
]
}
Step 2: Create the content.js file with the following code.
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message,sender,sendresponse)
{
console.log(message.txt);
let paragraphs = document.getElementsByTagName("p");
for(elt of paragraphs)
{
elt.style['background-color'] = '#00CED1';
}
}
You can replace the color code with any other color of your choice.
Step 3: Create the background.js file with the following codes
console.log("Background running");
chrome.browserAction.onClicked.addListener(IconClicked);
function IconClicked(tab)
{
let msg = {
txt : "Hello"
}
chrome.tabs.sendMessage(tab.id,msg);
}
Step 4: Open the manifest.html file and add content.js script and background.js scripts.
{
"manifest_version" : 2,
"name" : "Chrome-Extension Background Color Change",
"version" : "0.001",
"content_scripts" : [
{
"matches" : [
"<all_urls>"
],
"js" : ["content.js"]
}
],
"background" : {
"scripts" : ["background.js"]
},
"browser_action" : {
}
}
The Workflow
When the browser action icon is clicked, the background script sends a message to the content script.
The content script on receiving a message from the background performs an action of changing the background color of the paragraph.
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, an extension 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.
The Output
Open any web page and all the paragraphs will change to the specified color because of our chrome extension running in the background.
If you want to see the background script running, type chrome://extensions in the address bar. Click on Inspect views Background page to see the background script running.
Summary
In this chapter, we were able to create a chrome extension that can change the BG Color of any paragraph by following a few simple steps.
I hope, we were able to pique your interest in building one chrome extension for yourself.
In the next chapter, we’ll be learning how to replace the text in the paragraphs on any web page with user-given text using Chrome Extension. Feel free to reach out for any queries.
Chrome Extension Series
# 1: An Introduction to Chrome Extensions
# 3: Changing the background color of a paragraph with Chrome Extension
# 4: Replacing paragraph text with your user-given text using Chrome Extension Chapter
# 5: Replacing images in a website using Chrome Extension
# 6: Replacing images with your own images using Chrome Extension
Originally published at https://heptagon.in