Build a Tab Counter Chrome Extension: Track Your Open Tab Count

16 min read

Build a Tab Counter Chrome Extension: Track Your Open Tab Count

· 16 min read · Chrome Extensions, Tutorials

Build a Tab Counter Chrome Extension: Track Your Open Tab Count

If you have ever found yourself drowning in dozens of open browser tabs, you are not alone. The average Chrome user has between 15 and 70 tabs open at any given time, and this number continues to grow as we rely more heavily on web-based workflows. Building a tab counter Chrome extension is one of the most practical projects you can undertake as a Chrome extension developer. Not only does it solve a genuine problem, but it also teaches you fundamental concepts about the Chrome Extension APIs that you will use in virtually every extension you build.

In this comprehensive tutorial, we will walk through the complete process of creating a tab counter extension from scratch. You will learn how to count open tabs in Chrome, display that count in the browser action badge, and implement real-time updates whenever tabs are opened or closed. By the end of this guide, you will have a fully functional tab counter extension that you can customize and extend to meet your specific needs.

Why Build a Tab Counter Extension?

Before we dive into the code, let us consider why a tab counter extension is worth building. First and foremost, it addresses a real pain point that millions of Chrome users experience daily. Having a visible tab count in your browser toolbar serves as a gentle reminder to close unnecessary tabs and maintain a manageable workflow. Unlike complex tab management solutions that require significant user interaction, a simple tab counter provides at-a-glance awareness without adding cognitive overhead.

From a development perspective, building a tab counter extension teaches you several essential skills. You will learn how to interact with the Chrome Tabs API to retrieve tab information, how to use browser action badges to display dynamic content, and how to listen for events that indicate changes to the tab state. These concepts form the foundation for virtually every Chrome extension you will build in the future.

Additionally, a tab counter extension is remarkably lightweight and fast. Unlike extensions that require complex UI components or heavy background processing, a tab counter operates with minimal overhead. This makes it an excellent project for beginners who want to experience the satisfaction of building and using their own Chrome extension without getting bogged down in complexity.

Prerequisites

Before we begin building the tab counter extension, you will need a few things set up on your development machine. First and foremost, you need Google Chrome or a Chromium-based browser installed. This is essential for testing your extension during development. You will also need a text editor or IDE for writing code. Visual Studio Code is an excellent choice for Chrome extension development because it offers helpful extensions for JavaScript and JSON syntax highlighting.

You should have a basic understanding of HTML, CSS, and JavaScript. While this tutorial will explain every step in detail, familiarity with these web technologies will help you understand the underlying concepts more quickly. If you are new to JavaScript, do not worry the code we will write is straightforward and well-commented.

Finally, you need a way to load your extension into Chrome for testing. Chrome provides a built-in mechanism for loading unpacked extensions, which we will cover later in this tutorial. No external tools or servers are required everything you need is already included in Chrome.

Project Structure

Every Chrome extension follows a specific file structure, and understanding this structure is crucial to building successful extensions. For our tab counter extension, we will create a simple project with three essential files: the manifest file, a background script, and optionally, a popup interface.

Let us start by creating a new folder for our project. Name it tab-counter-extension. Inside this folder, we will create the following files:

  • manifest.json - The configuration file that tells Chrome about our extension
  • background.js - The background script that handles tab counting logic
  • popup.html - Optional HTML file for the popup UI
  • popup.js - Optional JavaScript for the popup functionality

For a minimal tab counter that displays the count in the browser action badge, we actually only need two files: manifest.json and background.js. This simplicity makes it an ideal starting point for new extension developers.

Creating the Manifest File

The manifest file is the backbone of every Chrome extension. It defines the extension is name, version, permissions, and the scripts that Chrome should load. For our tab counter extension, we will use Manifest V3, which is the current standard for Chrome extensions.

Create a file named manifest.json in your project folder and add the following content:

{
  "manifest_version": 3,
  "name": "Tab Counter",
  "version": "1.0",
  "description": "Display the number of open tabs in your browser toolbar",
  "permissions": [
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Tab Counter"
  }
}

Let us break down each component of this manifest. The manifest_version field tells Chrome that we are using the latest extension platform. The name and version fields identify our extension, while the description provides a brief explanation of what the extension does.

The permissions array is crucial. We are requesting access to the tabs API, which allows our extension to retrieve information about open tabs. Without this permission, we would not be able to count tabs or access their properties.

The background section defines a service worker file. In Manifest V3, background scripts run as service workers, which are event-driven and do not persist between Chrome sessions. This is different from the older background page model used in Manifest V2.

Finally, the action section configures the browser action. This is the icon that appears in Chrome is toolbar. By configuring this, we can set a badge text that displays our tab count directly on the toolbar icon.

Implementing the Background Script

Now we need to create the background script that will count tabs and update the badge. Create a file named background.js in your project folder and add the following code:

// Function to count and display the number of open tabs
function updateTabCount() {
  // Query all tabs in all windows
  chrome.tabs.query({}, function(tabs) {
    // Get the count of tabs
    const tabCount = tabs.length;
    
    // Set the badge text to display the count
    chrome.action.setBadgeText({ text: tabCount.toString() });
    
    // Optionally, set badge background color
    chrome.action.setBadgeBackgroundColor({ color: '#4CAF50' });
  });
}

// Listen for tab changes and update the count
chrome.tabs.onCreated.addListener(updateTabCount);
chrome.tabs.onRemoved.addListener(updateTabCount);
chrome.tabs.onUpdated.addListener(updateTabCount);

// Update count when extension is installed or updated
chrome.runtime.onInstalled.addListener(updateTabCount);

// Update count when browser starts
chrome.runtime.onStartup.addListener(updateTabCount);

// Initial count update
updateTabCount();

This script does several important things. First, it defines an updateTabCount function that queries all open tabs using the chrome.tabs.query API. The empty object {} passed to this function means we want all tabs from all windows.

Once we have the tabs, we extract the length of the array, which gives us the total count. We then use chrome.action.setBadgeText to display this number directly on the toolbar icon. We also set a green background color for the badge using chrome.action.setBadgeBackgroundColor.

The script then sets up event listeners for various tab-related events. The onCreated event fires when a new tab is opened, onRemoved fires when a tab is closed, and onUpdated fires when a tab is reloaded or its URL changes. In each case, we call updateTabCount to refresh the displayed count.

We also listen for onInstalled and onStartup events to ensure the badge is updated when Chrome starts or when our extension is first installed. Finally, we call updateTabCount immediately when the script loads to display the current tab count.

Testing Your Extension

Now that we have created both the manifest and background script, it is time to test our extension in Chrome. Follow these steps to load your extension:

  1. Open Chrome and navigate to chrome://extensions in the address bar
  2. Enable the “Developer mode” toggle in the top right corner of the page
  3. Click the “Load unpacked” button that appears in the top left
  4. Select the folder containing your extension files

Once you have loaded the extension, you should see a number appear in your browser toolbar. This number represents the total count of open tabs across all Chrome windows. Try opening and closing tabs to see the count update in real time.

If the extension is not working as expected, check the following common issues. First, ensure that your manifest.json file is valid JSON. You can validate it using an online JSON validator. Second, make sure that the file names in your manifest match the actual file names in your project folder. Third, check for any errors in the extension is service worker by clicking the “service worker” link in the extension management page and looking at the console output.

Enhancing the Extension

While our basic tab counter extension works well, there are several enhancements we can add to make it more useful. In this section, we will explore some optional improvements that demonstrate additional Chrome Extension APIs and patterns.

Adding a Popup Interface

Many users prefer to have more detailed information about their tabs. We can add a popup that displays not just the total tab count, but also additional statistics like the number of tabs per window. To do this, we need to create a popup HTML file and update our manifest.

First, create a file named popup.html:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      min-width: 200px;
      padding: 15px;
    }
    h2 {
      margin-top: 0;
      color: #333;
    }
    .stat {
      margin: 10px 0;
      font-size: 14px;
    }
    .count {
      font-weight: bold;
      font-size: 24px;
      color: #4CAF50;
    }
  </style>
</head>
<body>
  <h2>Tab Counter</h2>
  <div class="stat">Total Open Tabs: <span id="total-count" class="count">-</span></div>
  <div class="stat">Open Windows: <span id="window-count" class="count">-</span></div>
  <script src="popup.js"></script>
</body>
</html>

Then create a popup.js file:

document.addEventListener('DOMContentLoaded', function() {
  // Get total tab count
  chrome.tabs.query({}, function(tabs) {
    document.getElementById('total-count').textContent = tabs.length;
  });
  
  // Get window count
  chrome.windows.getAll({}, function(windows) {
    document.getElementById('window-count').textContent = windows.length;
  });
});

Finally, update your manifest to include the popup:

"action": {
  "default_popup": "popup.html",
  "default_title": "Tab Counter"
}

Now when users click on the extension icon, they will see a popup with additional information about their tabs and windows.

Adding Storage for Preferences

If you want to allow users to customize how the tab count is displayed, you can use the Chrome Storage API to save their preferences. This demonstrates how to persist data across browser sessions, which is essential for many extensions.

First, add the storage permission to your manifest:

"permissions": [
  "tabs",
  "storage"
]

Then, modify your background script to read user preferences:

function updateTabCount() {
  chrome.storage.sync.get(['badgeColor'], function(result) {
    const color = result.badgeColor || '#4CAF50';
    
    chrome.tabs.query({}, function(tabs) {
      const tabCount = tabs.length;
      chrome.action.setBadgeText({ text: tabCount.toString() });
      chrome.action.setBadgeBackgroundColor({ color: color });
    });
  });
}

Users can then set their preferred color using the storage API from a separate options page.

Handling Large Tab Counts

If a user has more than 99 tabs open, the badge will not display the full number because Chrome badges are limited to two characters. You can handle this gracefully by showing “99+” for any count over 99:

function updateTabCount() {
  chrome.tabs.query({}, function(tabs) {
    let tabCount = tabs.length;
    let displayText = tabCount > 99 ? '99+' : tabCount.toString();
    
    chrome.action.setBadgeText({ text: displayText });
    chrome.action.setBadgeBackgroundColor({ color: '#4CAF50' });
  });
}

This small enhancement prevents the badge from overflowing and provides a clear indication that the user has a very large number of tabs open.

Best Practices and Optimization

When building Chrome extensions, it is important to follow best practices that ensure your extension is performant, secure, and maintainable. Here are some recommendations specific to tab counter extensions:

Minimize API Calls

While our current implementation updates the badge on every tab event, this is generally fine for most users. However, if you are building a more complex extension, you should be mindful of how often you query the tabs API. Each call to chrome.tabs.query requires Chrome to gather information from all open tabs, which can be resource-intensive if done excessively.

For a simple tab counter, the current approach is perfectly acceptable. But if you were building a more feature-rich extension, you might consider using the chrome.tabs.onActivated event instead of updating on every single change, or implementing a debounce mechanism that limits how often the count is refreshed.

Handle Permissions Carefully

Always request only the permissions your extension absolutely needs. For our tab counter, we only need the tabs permission. Avoid requesting unnecessary permissions like <all_urls> or cookies unless your extension specifically requires them. Not only does this improve security, but it also makes users more confident about installing your extension.

Test Across Scenarios

Be sure to test your extension in various scenarios. What happens when you have multiple Chrome windows open? What happens when you use tab groups? What happens in Incognito mode? Our current implementation handles all of these scenarios correctly because we query all tabs in all windows, but it is worth verifying this behavior yourself.

Consider Manifest V3 Compliance

Google is continuously evolving the Chrome extension platform, and Manifest V3 represents the current direction of the ecosystem. Make sure your extension follows V3 best practices, such as using service workers instead of background pages and avoiding remotely hosted code. Our tab counter extension is fully compliant with Manifest V3 standards.

Publishing Your Extension

Once you have built and tested your tab counter extension, you may want to publish it to the Chrome Web Store so others can benefit from it. The publishing process involves creating a zip file of your extension, setting up a developer account, and submitting your extension for review.

To prepare your extension for publication, first create a zip file containing all the necessary files: manifest.json, background.js, and any other files your extension uses. Make sure not to include unnecessary files like editor config files or temporary files.

Next, navigate to the Chrome Web Store Developer Dashboard and sign in with your Google account. If you have not previously published extensions, you may need to pay a one-time registration fee. Once your account is set up, click the “New Item” button and upload your zip file.

You will need to provide several pieces of information, including a detailed description of your extension, screenshots, and icons. Take time to write a compelling description that highlights the benefits of your tab counter extension. Include relevant keywords like “chrome extension tab counter” and “count open tabs chrome” to improve discoverability in search results.

After submitting your extension, it will go through a review process. Google is typically quick to approve simple extensions like tab counters, but the review can take anywhere from a few hours to a few days. Once approved, your extension will be available in the Chrome Web Store for anyone to install.

Conclusion

Congratulations! You have successfully built a fully functional tab counter Chrome extension from scratch. Throughout this tutorial, you learned how to create a Manifest V3 extension, interact with the Chrome Tabs API, display dynamic content in the browser action badge, and handle tab-related events for real-time updates.

The skills you gained in this tutorial extend far beyond tab counters. The concepts of querying tabs, listening for events, and updating browser actions are fundamental to virtually every Chrome extension you will build. Whether you go on to create complex productivity tools, developer utilities, or entertainment extensions, you will repeatedly draw upon the knowledge from this project.

Consider ways to extend your tab counter further. You could add features like tab usage statistics over time, alerts when the tab count exceeds a certain threshold, or integration with other productivity tools. The Chrome APIs offer tremendous flexibility, and there is no limit to what you can create.

Building Chrome extensions is an incredibly rewarding endeavor. You are not only learning valuable technical skills but also creating tools that can genuinely improve people is daily lives. A simple tab counter might seem minor, but for users who struggle with tab overload, it can be a small but meaningful step toward better productivity. Start building, keep experimenting, and most importantly, have fun creating something useful.

No previous article
No next article