Master 8 core extension capabilities including Manifest v3 and Chrome Web Store publishing to build powerful browser tools today.
Browser API
Manifest v3
JavaScript
Chrome DevTools
Web Architecture
About This Skill
Unlock the power of the browser with this expert skill. Covering 8 essential capabilities from Manifest v3 to Chrome Web Store publishing, you will learn to build high-performance extensions.
Quick Start
1Initialize your manifest.json with version 3
2Define your content scripts and background workers
3Load the unpacked extension into Chrome DevTools
Example Command
npx extension-builder init my-new-extension
Core Capabilities
Extension Architecture
Structured project organization including manifest, popup, content, and background directories.
Manifest v3 (MV3)
Implementation of the latest modern browser extension configuration standards.
Content Scripts
Injecting logic and manipulating the DOM of web pages seamlessly.
Background Workers
Managing long-running tasks and event-driven logic using service workers.
Usage Examples
Before
A static, non-interactive HTML file
After
A dynamic popup that interacts with the browser tab
Before
Generic JS running on all pages
After
Targeted logic running only on 'google.com'
Before
Legacy Manifest v2 configuration
After
Modern, secure Manifest v3 configuration
SKILL.md
---
name: browser-extension-builder
description: 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.
risk: unknown
source: vibeship-spawner-skills (Apache 2.0)
date_added: 2026-02-27
---
# 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.
**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.
### Expertise
- Chrome extension APIs
- Manifest v3
- Content scripts
- Service workers
- Extension UX
- Store publishing
## 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 Architecture
### Project Structure
```
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
```
### Manifest V3 Template
```json
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0",
"description": "What i
Frequently Asked Questions
FAQ
Is this compatible with Firefox and Safari?
Yes, the skill covers cross-browser support techniques to ensure your extension works across all major engines.
Who is the target audience for this skill?
It is designed for web developers and software engineers looking to master browser-based tooling.
How does this differ from standard web development?
Unlike standard web dev, this focuses on the unique constraints of the extension API, permissions, and store policies.
Does it support modern JavaScript syntax?
Absolutely, it focuses on modern ES6+ and the latest Manifest v3 standards.
What are the expected results after using this skill?
You will be able to architect, build, and publish production-ready extensions to the Chrome Web Store.
Discussion
Discussion
0 comments
U
On This Page
Trigger Phrases
Use these phrases to activate this skill in your AI coding assistant:
Build a Chrome extensionImplement Manifest v3Create content scriptsDesign extension popupsPublish to Chrome Web Store
