Building “TagTamer” — A Chrome Extension with Manifest V3

Learn how to build a Chrome extension using Manifest V3 by creating TagTamer—a simple tool that highlights HTML heading tags on any webpage. This hands-on guide covers popup UI, background scripts, content scripts, and modern extension architecture.

JavaScript Extensions Web Engineering

January 8, 20263 min read8 sectionsBy Ahmed Abdullah

Building “TagTamer” — A Chrome Extension with Manifest V3

Introduction

Welcome to the world of Chrome extension development! In this article, we’ll embark on an exciting journey to create a handy tool called “TagTamer.” TagTamer is a Chrome extension designed to help users highlight and manage their heading tags on web pages with ease.

The Power of Manifest V3

Before we dive into the details of creating TagTamer, let’s briefly discuss Manifest V3. Chrome’s Manifest V3 is the latest version of the manifest file, which defines how Chrome extensions behave and what they can do. It brings improved performance, security, and a more streamlined architecture. So, let’s harness its capabilities to build our extension!

Meet TagTamer

TagTamer is a user-friendly extension that allows you to highlight specific heading tags within a webpage. You can choose from a list of headings (h1, h2, h3, h4, etc.) through radio buttons in the extension’s popup menu.

The Popup HTML

First, let’s create the popup HTML (popup.html) for our extension. This is the user interface where users can select the heading tags they want to highlight.

html

<!DOCTYPE html>
<html>
<head>
<title>TagTamer</title>
</head>
<body>
<label for="h1">H1</label>
<input type="radio" name="heading" id="h1" value="h1" />

<label for="h1">H2</label>
<input type="radio" name="heading" id="h2" value="h2" />

<label for="h1">H3</label>
<input type="radio" name="heading" id="h3" value="h3" />

<label for="h1">H4</label>
<input type="radio" name="heading" id="h4" value="h4" />

<!-- repeat for any tags (div, spans, .etc) -->

<script src="popup.js"></script>
</body>
</html>

Handling User Selection — popup.js

Now, let’s create the JavaScript (popup.js) that handles user input and sends the selected heading tag to the background script.

javascript

document.addEventListener("DOMContentLoaded", function () {
        const radioButtons = document.querySelectorAll('input[type="radio"]');

        radioButtons.forEach((radio) => {
                radio.addEventListener("change", function () {
                        const selectedTag = this.value;

                        chrome.runtime.sendMessage({ tag: selectedTag });
                });
});
});

Background.js — The Middleman

In the background.js script, we receive the selected heading tag and send it to the content script.

javascript

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
        if (message.tag) {
            chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
                    const activeTab = tabs[0];
                    chrome.tabs.sendMessage(activeTab.id, { tag: message.tag });
            });
}
});

Content.js — Applying the Styles

Finally, in the content.js script, we select the headings based on the received tag and apply the desired styles.

javascript

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
        if (message.tag) {
            const headings = document.querySelectorAll(message.tag);

            headings.forEach((heading) => {
                    heading.style.border = "4px solid red";
            });
}
});

Conclusion

Congratulations! You’ve just created TagTamer, a nifty Chrome extension that simplifies the process of highlighting specific heading tags on web pages. By following the principles of Manifest V3, you’ve built an user-friendly tool that enhances web browsing experiences.

Remember, extension development is an exciting journey filled with countless possibilities. TagTamer is just one example of how you can leverage Chrome’s Manifest V3 to create useful and enjoyable extensions. So, go ahead and explore the world of Chrome extensions — who knows what amazing tools you’ll create next!

Keep reading from the journal.

Your contracts keep spending after you sign them

July 20, 2026

Extensions

Your contracts keep spending after you sign them

An amendment-aware obligation register gives every deadline an owner

Stop switching models to fix your scanner

July 20, 2026

Engineering

Stop switching models to fix your scanner

Quality gates at capture set the accuracy ceiling before any model runs

A third of your ad spend reports to nobody

July 13, 2026

Engineering

A third of your ad spend reports to nobody

Server-side first-party collection makes the budget follow real numbers