Here's how I made a simple Chrome Extension to close all open tabs
Tags: javascript, webdev, tutorial, opensource
Published: 2022-01-15 20:02:19

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 🚀**](https://chrome.google.com/webstore/detail/close-all-tabs/dlpdgeljpkenimejgdeaainabjjmknlp)

**Architecture overview**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkfzvpbfeen846b8ozjd.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w72e2q143mso07wtipdd.gif)

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.](https://github.com/midhunz/close-all-tabs)

**_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h9eo0d9xzf9qz0kac8f.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1shakxgje3pa2tdsjj9y.png)

**It’s now time to test our chrome extension**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05tp6lqa2yj6a508cjj9.png)

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

**Feel free to contribute on GitHub**
[close-all-tabs](https://github.com/midhunz/close-all-tabs)

**More resources**
[Google official starter guide — build a browse action chrome extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/)
[Chrome Platform API Reference](https://developer.chrome.com/docs/extensions/reference/)
[Chrome Extension Architectural Overview](https://developer.chrome.com/docs/extensions/mv3/overview/)