quangpl/browser-extension-skills

---

Diamond Sponsor

Extension Booster — Build, optimize, and grow Chrome extensions faster.

The all-in-one platform for Chrome extension developers. Provides analytics, A/B testing, user feedback, growth tooling, and revenue optimization in a single platform.

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

---

Compatible AI Coding Agents

---

Why These Skills?

Sponsored 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

---

Upgrade to Premium

Get the Premium version of this AI Kit with advanced templates, priority support, and exclusive skills at: https://app.extensionbooster.net/dashboard/services/extension-ai-kit

---

Skills Overview

---

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 create-crxjs → 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 create-crxjs, chosen based on your UI framework. References Chrome Extensions Samples for proven patterns.

Scaffolder selection:

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

extension-dev

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

References:

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

extension-manifest

Generates optimal manifest.json by analyzing your codebase for Chrome API usage. For CRXJS projects, validates the auto-generated manifest and Vite 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 CRXJS workflows.

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

extension-migration

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

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

---

Requirements

---

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

---