Chrome extensions are a great way to enhance the functionality of the Chrome browser. This article is keeping the Chrome browser in mind, but the same knowledge can be used to create browser extensions for the other browsers.
If you are a beginner, go through this shot first.
We need some JavaScript for more advanced extension development to perform the logic. Mainly there are two types of scripts:
Background service worker (background script before manifest v3)
Content script
chrome.runtime.onInstalled.addListener()
. If we want to open a URL on uninstallation of the extension, we can use chrome.runtime.setUninstallURL()
.Chrome exposes a chrome.runtime.sendMessage()
api to the content script and chrome.runtime.onMessage.addListener()
api to the Background Service Worker.
First, we create a directory and all the bare minimum files which are required for the Chrome Extension using the following commands:
$ mkdir sample-chrome-extension
$ cd sample-chrome-extension
$ touch background.js content.js main.html manifest.json
Let’s take a look at the content of the files that we created above:
manifest.json
{
"name": "Hello Chrome",
"description": "The advance extension",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "main.html"
}
}
name
, description
, version
of the extension.manifest_version
.background.service_worker
(for the background script), content_scripts.js
(array for the content scripts), and action.default_popup
(for the HTML file) keeps the filename (relative location to project root).matches
.default_popup
shows up when we click on the extension icon.background.js
console.log("Hi from background Script file")
chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) {
console.log("Got message from content Script: ", request);
sendResponse('OK');
})
chrome.runtime.onMessage.addListener
takes an anonymous function executed when the content script sends a message.content.js
console.log("Hi from content script");
chrome.runtime.sendMessage({ data: document.title }, function (response) {
console.log(response);
});
chrome.runtime.sendMessage
to the background script with a payload object ({ data: document.title }
) with the title of the webpage.main.html
<!DOCTYPE html>
<html>
<head>
<title>The advance extension</title>
</head>
<body>
<h2>
Hi, Educative !!!
</h2>
</body>
</html>
title
tag and an h2
.To install your extension:
Go to chrome://extensions/
in your Chrome.
Turn on Developer mode.
Click Load unpacked and select the newly created directory (sample-chrome-extension).
Click service worker. It opens the dev tool window associated with your Background Service Worker:
Now open a new tab and the console to see the communication logs between two scripts. Here We pass the title of the page to the background service worker:
In the sample code, we add two types of script files and also see how they can pass data to each other and communicate.
We can use TS instead of JS for the development of Chrome extensions.
For more information, take a look at the official docs.