About the
Lab.

Welcome to the Chrome Extension Lab. In this session, we'll dive deep into browser extensions and learn how to "hack" the web environment with JavaScript.

Recommended Learning

Master JavaScript

From core fundamentals to advanced asynchronous patterns and browser API integration—level up your JS skills.

Start Learning

Extension UI

Manifest V3

Active Session

14 Tabs Open

Extension Active

What we are building

We'll be constructing a Quick Tab Closer from scratch, covering Manifest V3, the Chrome Tabs API, popup interfaces, and asynchronous background logic. By the end of this lab, you'll have a fully functional browser extension ready for deployment.

Lab Objectives

1
Understand the Chrome Extension ecosystem.
2
Implement Manifest V3 for optimal performance.
3
Master the Tabs API to manipulate browser state.

Project Foundation

Every great tool starts with a simple manifest. We're building a Chrome Extension to clear digital clutter.

Current

×

Why this Lab?

Browser extensions are the ultimate playground for JavaScript. They allow you to "hack" your own environment, injecting logic directly into the tool you use most: the browser.

The Soul: Manifest V3

Defining permissions and metadata.

manifest.json

{
  "manifest_version": 3,
  "name": "Quick Tab Closer",
  "version": "1.0",
  "permissions": ["tabs"],
  "action": {
    "default_popup": "popup.html"
  }
}

Why Permissions?

By default, extensions are boxed in for safety. To touch other tabs, you must explicitly ask for the "tabs" permission. Chrome shows this to the user for transparency.

The Interface

A minimal trigger for our action.

popup.html

<!-- Just a button to trigger the magic -->
<button id="closeRight">
  Close Tabs to the Right
</button>
<script src="popup.js"></script>

Why separate JS?

Chrome Extensions strictly forbid "Inline JavaScript" for security. You cannot put script tags with code inside your HTML; you must link an external .js file.

The Engine

Querying and removing tabs.

popup.js

document.getElementById('closeRight').onclick = async () => {
  const [currentTab] = await chrome.tabs.query({ 
    active: true, currentWindow: true 
  });
  
  const tabs = await chrome.tabs.query({ 
    currentWindow: true 
  });

  const tabsToClose = tabs
    .filter(t => t.index > currentTab.index)
    .map(t => t.id);

  chrome.tabs.remove(tabsToClose);
};

Why Querying?

chrome.tabs.query returns an array. We use async/await because the browser needs time to communicate with its internal processes before giving us the list.

Deployment

Testing in your own browser.

1

Open Chrome and navigate to chrome://extensions

2

Enable "Developer mode" in the top-right corner.

3

Click "Load unpacked" and select your project folder.

Why Unpacked?

"Unpacked" means the extension runs directly from your files. This allows you to make changes to your code and simply refresh the extension to see updates instantly.

About theLab.