Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.
Chrome Extensions are fairly easy to create, and they can really enhance your browser’s capabilities and solve repetitive tasks.

Demo 🚀

Architecture overview

popup.
Extension UI pages
background.js
The background script is the extension’s event handler; it contains listeners for browser events that are important to the extension
contentscript.js
Extensions that read or write to web pages utilize a content script
Let’s build your Chrome extension now.
Let’s make a Chrome extension to quickly close all open tabs and open a brand new one. It will take less than 10 lines of code.

By clicking the extension icon, we close all open tabs. When you click on the extension, the application should read all open tabs and remove them as well as create a new tab.
We do not need any user interface for this example, and we are not changing or reading from user browser tabs. Therefore, there is no requirement for a content script for a chrome extension. We simply listen for clicks on the extension icon. For this, we need a background.js file.

Source Github.

Step 1:

Create A New Directory

Open terminal, make a new directory called “close-all-tabs” and open your favorite text editor.

mkdir close-all-tabs

In order for Chrome to load your plugin, the extension files need to be pointed to a folder on your computer. In this directory, you can add all of the files you need for your extension.

Step 2
Create a file called manifest.json in the newly created folder.
The manifest.json file contains information about the extension. It is written in JSON format.V3 is used in this example
You can read more about what it contains in Google Chrome developer documentation: Manifest File Format

{
"manifest_version": 3,
"name": "Close All Tabs",
"description": "Close all open tabs and create an empty tab",
"version": "0.0.1",
"icons": {
"48": "icons/48.png",
"128": "icons/128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {}
}

Step 3
Create a background.js
it contains listeners for browser events that are important to the extension. It lies dormant until an event is fired then performs the instructed logic. An effective background script is only loaded when it is needed and unloaded when it goes idle.

// toolbar button event listener
chrome.action.onClicked.addListener(function (thisTab) {
chrome.tabs.create({}, function (newTab) {
let querying = chrome.tabs.query({}, function (tabs) {
for (let tab of tabs) {
if (tab.id !== newTab.id) chrome.tabs.remove(tab.id);
}
});
});
});

Step 4
Create a folder called icons and keep our extension icon in 3 different sizes in it
manifest.json

"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
},

Step 5
Load Extention to chrome

1. 1. Go to chrome://extensions in your browser
2. To enable Developer mode, check the box in the top right-hand corner, as shown above:
3. To load an unpacked extension, click Load unpacked extension to bring up the file selection dialog.
4. The extension will be loaded and active as soon as it is valid! A message will appear at the top of the page if it is invalid. Please correct the error and try again.

It’s now time to test our chrome extension

1. Pin Extension to browser
2. Open multiples tabs
3. Click on the extension

Feel free to contribute on GitHub
close-all-tabs

More resources
Google official starter guide — build a browse action chrome extension
Chrome Platform API Reference
Chrome Extension Architectural Overview