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

January 8, 20263 min read8 sectionsBy Tensor Labs

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" />

html

<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;

code

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.

January 8, 2026

JavaScript

Mimicking React’s useState Hook with JavaScript Proxy Object

Learn how to recreate React’s useState-style reactivity in vanilla JavaScript using the Proxy object. This hands-on guide shows how to auto-update the UI, manage state changes, and add validations—without any frameworks.

May 18, 2026

#AI #SoftwareEngineering #Tech

Don't pre-build the AI layer

The retail industry has a name for the developer who builds the mall before the anchor tenant signs. Optimistic. The same developer five years later, when the mall is half empty and the anchor never showed, is called bankrupt.

May 8, 2026

#WorkCulture #Meetings #Productivity #Leadership

We added the meeting

Once, somebody had the bright idea that the team was not close enough. Let’s call this idea `the Standup`. Any resemblance to actual meetings is purely coincidental. Probably