Extension Popup

A simple and functional pop-up interface using HTML, JavaScript, and CSS. It has features such as displaying an alert message, highlighting headings (h1, h2, h3) on the active page, and fetching and displaying details of the current tab. Clean, modern UI with Firefox’s signature blue color and responsive styling.

Background Script

Implements a service worker via background.js using Manifest V3. It initializes on extension installation, listens for and handles messages, and coordinates logic between the popup and content scripts

javascriptCopyEditbrowser.runtime.onInstalled.addListener(() => { 
  console.log("Firefox extension installed!"); 
});

Content Script

content.js demonstrates DOM interaction and styling injection. It runs on all URLs (<all_urls>), adds custom CSS to highlight elements, listens to messages from popup and background scripts, and performs in-page DOM manipulations

Example: 
javascriptCopyEditconsole.log("Firefox content script loaded!");

Manifest V3 (Firefox-Ready)

manifest.json v3 with gecko.id, activeTab, icons, popup, worker.

Folder Structure, cssCopyEdit. 
├── popup/ 
│   ├── popup.html│   └── popup.js├── scripts/ 
│   ├── background.js│   └── content.js├── icons/ 
│   ├── icon16.png│   ├── icon32.png│   └── icon48.png
├── manifest.json└── README.md

Extension Icons

Includes icons in 16px, 32px, and 48px.

 Ensures consistency across browser UI.
 Easily replaceable for custom branding.

Permissions

Minimal and scoped for security:

activeTab: Grants temporary access to the active tab.

Web Accessible Resources

Reserved for exposing assets (images/scripts) to content pages or iframes in the future.

jsonCopyEdit"web_accessible_resources": []