DEV Community

Midhun
Midhun

Posted on

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

Image description

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.

Image description

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

Image description

  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.

Image description

It’s now time to test our chrome extension

Image description

  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

Discussion (14)

Collapse
lukeshiru profile image
Luke Shiru

You can always do Ctrl. + N or + N to create a new window, and then close the previous window with all the tabs on it, but I guess for some folks this might be convenient. Either way, thanks for sharing your dev process so folks interested in creating their own extensions can follow this :D

Cheers!

Collapse
fjones profile image
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...)

Collapse
midhunz profile image
Midhun Author • Edited on

@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

Collapse
midhunz profile image
Midhun Author

@lukeshiru thank you for your comments

Collapse
ravavyr profile image
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.

Collapse
fjones profile image
FJones

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

Collapse
midhunz profile image
Midhun Author

:)

Collapse
midhunz profile image
Midhun Author

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

Collapse
jonrandy profile image
Jon Randy • Edited on

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

Collapse
midhunz profile image
Midhun Author

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

Collapse
thecodepedia profile image
Thecodepedia

Amzing tips

Collapse
midhunz profile image
Midhun Author

Thanks

Collapse
jothinkumar profile image
Jothin kumar • Edited on

Thanks for the useful article 👍.

Collapse
nirbhayparmar profile image
Nirbhay Parmar

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