Here's how I made a simple Chrome Extension to close all open tabs

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

Comments

[Ravavyr]

I see the other comments with CTRL options and people going "great stuff for devs"...

You all do realize you can right-click on a tab in chrome and choose "Close other tabs" ?
While i'm on a roll, did you know you can create tab groups and color code them as well, so you can collapse em to manage your tabs better?
You can also right-click outside the tabs on the right side to "Reopen closed tab" which is very useful.

Still, it's neat article on how to create a chrome extension :) Kudos.

[FJones]

Since you mention Reopen closed tab, I'll throw in Ctrl+Shift+T ;)

[Midhun]

:)

[Midhun]

@ravavyr Thanks dude , Ctrl+Shift+Y was already implemented but not mentioned in the post. will think about what you mentioned

[FJones]

Or Ctrl/Cmd+T and right-click + close all other (which you can probably also map to a keybind, come to think of it...).

Workflow optimizations are neat, but sometimes I do wonder if it really warrants installing a dozen different extensions to fill your browser with extra buttons to do all sorts of tiny things (most of which tend to require using the mouse more, which I'm not sure actually makes the workflow all that faster...)

[Midhun]

@fjones thanks for the ideas . problem you mentioned is 100% correct how to show dozens of extensions in browser. Currently added Ctrl+Shift+Y .. Surelly add mouse right click and close all

[Jon Randy 🎖️]

The process is damn-near identical for creating add-ons in other browsers. I wish people would mention that too, instead of giving the impression that this is only easily possible in Chrome

[Midhun]

yes you are right jon , simple change it can work in firefox and edge

[Midhun]

@lukeshiru thank you for your comments

[Midhun]

Thanks

[Jothin kumar]

Thanks for the useful article 👍.

[Nirbhay Parmar]

You just targeted the pain point of many developers. Very excited to try this.