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.
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.
`<!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.
`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.
`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.
`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!
You might also like
Keep reading with more notes from the journal.
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.
#FutureOfWork #Productivity #TechLeadersh
The billable hour was always a workaround
In the early 1900s, coal miners across South Wales were paid by the ton. It was a reasonable arrangement. Effort and output correlated tightly enough, measurement was simple, and the variance between a fast miner and a slow one was narrow enough that the proxy held.
#Agents #Tech #Simplicity #Engineering
Not everything needs an agent
In 1931, Rube Goldberg won a Pulitzer Prize for drawings of machines that accomplished simple tasks through spectacular chains of unnecessary steps. A self-wiping napkin apparatus involving a parrot, a lit candle, a swinging pendulum, and seven other components.