Browser Extension Skills

AI-Powered Chrome Extension Development Toolkit

Production-grade skills for building, testing, analyzing, and publishing
Chrome & browser extensions with AI coding agents.

Get Started · Skills · Quick Start · Documentation · Contributing

---

💎 Diamond Sponsor

Extension Booster Build, optimize, and grow Chrome extensions — faster. The all-in-one platform for Chrome extension developers. Analytics, A/B testing, user feedback, growth tooling, and revenue optimization — all in one place.

Interested in becoming a sponsor? Reach out via Extension Booster.

---

🤖 Compatible AI Coding Agents

Agent	Type	Skills Support
Claude Code	CLI / IDE extension	Native skill loading
Cursor	AI-powered IDE	Via .cursor/rules/
Windsurf (Codeium)	AI-powered IDE	Via .windsurfrules
GitHub Copilot	IDE extension	Via .github/copilot-instructions.md
Cline	VS Code extension	Via .clinerules
Aider	CLI agent	Via .aider.conf.yml conventions
Continue	IDE extension	Via .continue/ config
Roo Code	VS Code extension	Via .roo/rules/
Augment Code	IDE extension	Via project instructions
Amazon Q Developer	IDE extension	Via project context

---

✨ Why These Skills?

Built by Extension Booster, these skills address the real pain points of Chrome extension development: scattered documentation, confusing permission warnings, multi-context debugging, and opaque Chrome Web Store reviews.

They turn your AI coding agent into an extension development expert that can:

• 🏗️ Scaffold a complete extension project in seconds
• 🛠️ Develop features with proper API usage and framework detection
• 📝 Generate optimized manifest.json with minimum permissions
• 🔍 Analyze code for security vulnerabilities and CWS compliance
• 🧪 Test across all extension contexts (service worker, content script, popup)
• 🎨 Create all required icons and store listing assets
• 🚀 Publish to Chrome Web Store with CI/CD automation
• 🔄 Migrate existing extensions from Manifest V2 to V3

---

📦 Skills Overview

Skill	Description	Use When
extension-create	Auto-scaffold with WXT or Plasmo based on framework choice	Starting a new extension project
extension-dev	Develop features with auto-detection for WXT, Plasmo, CRXJS, vanilla	Building new features, debugging
extension-manifest	Generate manifest.json or validate Plasmo auto-manifest	Setting up or updating manifest
extension-analyze	Security audit, best practices, CWS compliance (framework-aware)	Pre-submission review, code quality
extension-test	Unit, integration, and E2E testing with Puppeteer	Writing and running tests
extension-assets	Generate icons, screenshots, and store listing images	Preparing visual assets
extension-payment	Integrate payments (Stripe, Paddle, Lemon Squeezy, Polar, +10 more)	Monetizing, subscriptions, licensing
extension-backend	Build backend APIs with NestJS + MongoDB for auth, licensing, webhooks	Need server-side logic, API proxy
extension-ui	Polish extension UI/UX for popup, sidepanel, options (dark mode, a11y)	Building or improving extension UI
extension-review	Scan code for CWS rejection risks, generate report with fixes	Pre-submission review, compliance
extension-publish	Chrome Web Store submission, listing optimization, CI/CD	Publishing and updates
extension-migration	Migrate from Manifest V2 to V3 with step-by-step guidance	Upgrading legacy extensions

---

📥 Installation

Recommended: Using Skills CLI

Install all skills at once using the Skills CLI:

# Install all skills to your project
npx skills add quangpl/browser-extension-skills

# Install globally (available in all projects)
npx skills add quangpl/browser-extension-skills -g

# Install specific skills only
npx skills add quangpl/browser-extension-skills -s extension-create,extension-dev

# List available skills before installing
npx skills add quangpl/browser-extension-skills -l

Alternative: Manual Installation

# Clone the repository
git clone https://github.com/quangpl/browser-extension-skills.git

# Copy all skills to your project
cp -r browser-extension-skills/skills/* .claude/skills/

# Or copy to global Claude Code skills
cp -r browser-extension-skills/skills/* ~/.claude/skills/

Alternative: Install Individual Skills

# Copy only the skills you need
cp -r browser-extension-skills/skills/extension-create .claude/skills/
cp -r browser-extension-skills/skills/extension-dev .claude/skills/

---

⚡ Quick Start

1. Create a New Extension

> Create a Chrome extension that highlights all links on a page

Your agent activates extension-create → asks for framework preference → picks WXT or Plasmo → scaffolds → sets up entrypoints → configures manifest.

2. Develop Features

> Add a popup that shows link count and lets users toggle highlighting

Your agent activates extension-dev → detects WXT + React → implements popup with chrome.tabs API.

3. Generate Assets

> Generate all icons and store listing screenshots for my extension

Your agent activates extension-assets → creates icons (16/32/48/128px) → generates listing images.

4. Analyze Before Publishing

> Analyze my extension for security issues and CWS compliance

Your agent activates extension-analyze → scans permissions, CSP, message handlers → reports issues.

5. Publish

> Prepare and publish my extension to Chrome Web Store

Your agent activates extension-publish → validates listing → packages → submits via CI/CD.

---

📚 Skill Details

extension-create

Automatically scaffolds a Chrome extension using WXT or Plasmo, chosen based on your UI framework. References Chrome Extensions Samples for proven patterns.

Scaffolder selection:

Framework	Recommended	Why
React	Plasmo	CSUI, rich quickstarts, auto-manifest
Vue / Svelte	WXT	First-class support, file-based entrypoints
Vanilla TS	WXT	Lightest setup

Supports: React, Vue, Svelte, Solid, Vanilla TypeScript Features: Auto-scaffold, framework-based scaffolder pick, entrypoint generation, Plasmo quickstart templates

extension-dev

Auto-detects your framework (WXT, Plasmo, CRXJS, vanilla) and UI library, then finds proper documentation to implement features.

References:

• Getting Started · Development Guide
• API Reference · Permissions List
• WXT Docs · Plasmo Docs

extension-manifest

Generates optimal manifest.json by analyzing your codebase for Chrome API usage. For Plasmo projects, validates the auto-generated manifest and plasmo.config.ts overrides.

References:

• Manifest Reference
• Permissions List

extension-analyze

Audits extensions for security vulnerabilities, performance issues, and Chrome Web Store policy compliance.

Checks: Permissions, CSP, message handlers, storage security, XSS vectors, dependencies, CWS compliance

extension-test

Sets up and runs unit, integration, and E2E tests for Chrome extensions.

Stack: Jest for unit/integration, Puppeteer for E2E, Chrome API mocks Key constraint: Extensions cannot run in headless mode

extension-assets

Generates all required icons and Chrome Web Store listing assets.

Supports: ImageMagick CLI generation, Gemini API for AI-generated images, prompt templates for manual generation

extension-payment

Integrates payment gateways and Merchant of Record services into Chrome extensions. Asks user for provider preference, fetches docs, implements backend + extension integration.

Providers: Stripe, PayPal, Paddle, Lemon Squeezy, Polar, Creem, Dodo Payments, Razorpay, Adyen, Square, Braintree, Authorize.Net, FastSpring, Gumroad Patterns: Account-based licensing, license keys, freemium with usage limits, trial periods AI-assisted docs: Stripe (llms.txt), Polar (llms.txt)

extension-backend

Builds a secure backend API for extensions that need server-side logic. Auto-activates when the agent detects a need for auth, licensing, webhooks, or API proxying.

Recommended stack: NestJS + MongoDB (Mongoose) Covers: Google OAuth via chrome.identity, license verification, payment webhooks, CORS for extensions, rate limiting, input validation Style guides: Google TypeScript · Google JavaScript

extension-ui

Builds polished, professional extension UIs. Analyzes existing UI and suggests improvements for popup, sidepanel, and options pages.

Covers: Extension UI constraints (popup 800x600, sidepanel 320-400px), design system setup (shadcn/ui, Tailwind, DaisyUI), dark mode, accessibility (WCAG AA), UX patterns (loading states, empty states, onboarding) Stacks: React + shadcn/ui, Vue + DaisyUI, Svelte + Tailwind, vanilla

extension-review

Scans extension source code for Chrome Web Store rejection risks based on official troubleshooting docs. Generates a clear Markdown or HTML report.

Checks: Remote code execution, code obfuscation, excessive permissions, missing privacy policy, single purpose, insecure transmission, keyword stuffing, minimum functionality, crypto mining, copyright circumvention, data disclosure Output: Markdown or HTML report with severity, root cause, file locations, and step-by-step fixes Verdict: LIKELY APPROVED / NEEDS FIXES / WILL BE REJECTED

extension-publish

Handles Chrome Web Store submission, listing optimization, and CI/CD automation. Supports both standard chrome-webstore-upload and Plasmo's built-in plasmo package workflow.

Features: Pre-submission checklist, listing SEO, common rejections guide, GitHub Actions workflow, Plasmo publish support

extension-migration

Step-by-step migration from Manifest V2 to V3. Suggests adopting WXT or Plasmo during migration for built-in MV3 support.

Reference: Migration Guide · WXT · Plasmo Covers: Service workers, declarativeNetRequest, CSP changes, API replacements, framework adoption

---

✅ Requirements

Requirement	Details
Claude Code	CLI or IDE extension
Node.js	v18+ recommended
npm / pnpm / yarn / bun	Any package manager
Chrome	For testing and debugging
Gemini API Key	Optional, for AI-generated assets (extension-assets)

---

💡 Tips & Best Practices

Permission Optimization

• Always prefer activeTab over broad tabs + host permissions
• Use optional permissions for non-essential features
• Run extension-analyze before every CWS submission

Performance

• Keep content scripts under 50KB (lazy-load heavy logic)
• Service workers should be event-driven (no polling)
• Use chrome.storage.session for temporary data

Security

• Validate all message senders (sender.id === chrome.runtime.id)
• Never use innerHTML with untrusted data
• No API keys in source code; use a proxy server

Testing

• Extensions cannot run in headless Chrome — always use headless: false
• Each E2E test should get a fresh browser instance
• Mock chrome.* APIs consistently with jest-chrome or manual mocks

Publishing

• First 150 characters of description appear in search results
• Screenshots at 1280x800 showing features in action convert best
• Single-purpose policy: one clear function per extension

---

🏛️ Architecture

Each skill follows the progressive disclosure pattern for optimal token efficiency:

skills/
├── extension-create/
│   ├── SKILL.md              # Quick reference (< 150 lines, always loaded)
│   └── references/           # Detailed docs (loaded on-demand by Claude)
│       ├── wxt-scaffold-guide.md
│       ├── wxt-entrypoints.md
│       ├── extension-templates.md
│       └── chrome-samples-reference.md
├── extension-dev/
├── extension-manifest/
├── extension-analyze/
├── extension-test/
├── extension-assets/
├── extension-publish/
└── extension-migration/

• SKILL.md — Always loaded when skill activates. Concise, actionable, < 150 lines.
• references/ — Loaded only when Claude needs deeper context. < 150 lines each.

---

🤝 Contributing

1. Fork the repository
2. Create your skill under skills/ following the structure above
3. Ensure SKILL.md < 150 lines, each reference < 150 lines
4. Test the skill with Claude Code on real extension projects
5. Submit a pull request

See CONTRIBUTING.md for detailed guidelines.

---

📄 License

MIT © quangpl

---

Powered by Extension Booster

extensionbooster.net — Supercharge your extension development workflow.

_{Made with ❤️ for the Chrome extension developer community.}