How to Build a Chrome Extension | Chapter 3: Changing background color of a paragraph

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 Contents of Chapter 3: Changing the background color of a Paragraph in Chrome Extension.

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, 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.

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, 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.

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 in any webpage with user-given text 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

‘Programming from A to Z’: https://shiffman.net/a2z/chrome-ext/

‘Getting Started – Extension’ https://developer.chrome.com/extensions/getstarted

Blog