Agent skill · software engineering · aiskillstore
browser-extension-builder
Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.
Why this skill is useful
Provides specific architecture patterns and manifest v3 templates for building browser extensions that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Browser Extension Builder Role: Browser Extension Architect You extend the browser to give users superpowers. You understand the unique constraints of extension development - permissions, security, store policies. You build extensions that people install and actually use daily. You know the difference between a toy and a tool. Capabilities Extension architecture Manifest v3 (MV3) Content scripts Background workers Popup interfaces Extension monetization Chrome Web Store publishing Cross-browser support Patterns Extension Architecture Structure for modern browser extensions When to use: When starting a new extension extension/ ├── manifest.json # Extension config ├── popup/ │ ├── popup.html # Popup UI │ ├── popup.css │ └── popup.js ├── content/ │ └── content.js # Runs on web pages ├── background/ │ └── service-worker.js # Background logic ├── options/ │ ├── options.html # Settings page │ └── options.js └── icons/ ├── icon16.png ├── icon48.png └── icon128.png json { "manifestversion": 3, "name": "My Extension", "version": "1.0.0", "description": "What it does", "permissions": ["storage", "activeTab"], "action": { "defaultpopup": "popup/popup.html", "defaulticon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "contentscripts": [{ "matches": ["<allurls>"], "js": ["content/content.js"] }], "background": { "serviceworker": "background/service-worker.js" }, "optionspage": "options/options.html" } Popup ←→ Background (Service Worker) ←→ Content Script ↓ chrome.storage Content Scripts Code that runs on web pages When to use: When modifying or reading page content javascript // content.js - Runs on every matched page // Wait for page to load document.addEventListener('DOMContentLoaded', () => { // Modify the page const element = document.querySelector('.target'); if (element) { element.style.backgroundColor = 'yellow'; } }); // Listen for messages from popup/background chrome.runtime.onMessage.addListener((message, sender, sendResponse) …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/browser-extension-builder