Building “TagTamer” — A Chrome Extension with Manifest V3
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!
