Browser Extension Skills for AI Coding Agents

What Are AI Agent Skills?

AI Agent Skills are specialized instruction sets that turn AI coding agents into domain experts. Compatible with Claude Code, Cursor, Windsurf, GitHub Copilot, Cline, Aider, and more — skills give your AI agent deep knowledge of Chrome extension APIs, best practices, security patterns, and publishing workflows.

Each skill follows the progressive disclosure pattern: a concise SKILL.md is always loaded when the skill activates, while detailed reference files are loaded on-demand only when the agent needs deeper context. This keeps token usage efficient while providing comprehensive coverage.

Why These Skills?

Chrome extension development is uniquely challenging: scattered documentation, confusing permission warnings, multi-context debugging, and opaque Chrome Web Store reviews. These skills turn your AI coding agent into an extension development expert that can:

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/

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

Once installed, just describe what you want in natural language. Your AI agent automatically activates the right skill.

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

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

> Generate all icons and store listing screenshots for my extension

> Analyze my extension for security issues and publish to Chrome Web Store

Skills Overview

extension-create

Auto-scaffold a Chrome extension project using the WXT framework with samples from Chrome Extensions Samples.

Supported Frameworks

Scaffold Command

npx wxt@latest init my-extension --template react
cd my-extension
pnpm install
pnpm dev        # Dev mode with hot reload
pnpm build      # Production build
pnpm zip        # Store-ready zip

Entrypoints Reference

Extension Type → Configuration

extension-dev

Detect your framework/stack, find proper documentation, implement features, and debug across all extension contexts.

Auto Framework Detection

Chrome API Quick Reference (Top 20)

Message Passing Pattern

// Popup → Service Worker (one-time message)
const response = await chrome.runtime.sendMessage({ type: 'GET_DATA' });

// Service Worker listener
chrome.runtime.onMessage.addListener((msg, sender, reply) => {
  if (msg.type === 'GET_DATA') { reply({ data: '...' }); return true; }
});

// Background → Content Script (tab-targeted)
chrome.tabs.sendMessage(tabId, { type: 'ACTION' });

Debugging by Context

extension-manifest

Generate the best manifest.json based on your code. Analyzes Chrome API usage and maps to minimum required permissions.

Manifest Template (MV3)

{
  "manifest_version": 3,
  "name": "Extension Name",
  "version": "1.0.0",
  "description": "Brief description. Max 132 chars for CWS.",
  "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" },
  "action": { "default_popup": "popup.html" },
  "permissions": [],
  "host_permissions": [],
  "background": { "service_worker": "background.js", "type": "module" }
}

Common Mistakes

Key MV3 Rules

1. host_permissions is separate from permissions
2. Service workers replace background pages (no DOM, no window)
3. Remote code execution banned (no eval, no CDN scripts)
4. Use chrome.scripting.executeScript() not tabs.executeScript()

extension-analyze

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

What Gets Scanned

Top 10 Issues Found in Extensions

extension-test

Set up and run unit, integration, and E2E tests for Chrome extensions.

Testing Architecture

Unit Tests (Jest)          → Test isolated logic, chrome.* API mocks
Integration Tests (Jest)   → Test service interactions, message passing
E2E Tests (Puppeteer)      → Test in real Chrome with extension loaded

Quick Setup

npm install -D jest @types/jest ts-jest jest-chrome
npm install -D @testing-library/react @testing-library/jest-dom jsdom  # For React
npm install -D puppeteer  # For E2E

E2E: Launch Extension in Chrome

import puppeteer from 'puppeteer';
import path from 'path';

const browser = await puppeteer.launch({
  headless: false,  // extensions require non-headless
  args: [
    `--disable-extensions-except=${path.resolve('dist')}`,
    `--load-extension=${path.resolve('dist')}`,
  ],
});

extension-assets

Generate all required icons and Chrome Web Store listing assets.

Required Assets

Generation methods: ImageMagick CLI, Gemini API for AI-generated images, or prompt templates for manual generation with any image tool.

extension-publish

Chrome Web Store submission, listing optimization, and CI/CD automation.

Publishing Workflow

Top 10 Rejection Reasons

1. Single purpose violation — does too many unrelated things
2. Excessive/unnecessary permissions
3. Missing privacy policy (required when user data collected)
4. Missing permission justification in submission form
5. Description doesn't match functionality
6. Keyword spam in title/description
7. Remote code execution (eval, external scripts)
8. Improper user data handling or disclosure
9. Extension non-functional or crashes
10. Broken features / inaccessible links

Listing Optimization Tips

• Title: Action verb + Benefit, max 45 chars, no keyword stuffing
• Description: First 150 chars appear in search — make them count
• Screenshots: Annotate features, show real UI, 1280×800
• Category: Choose most specific fit

extension-migration

Step-by-step migration from Manifest V2 to V3. Reference: Official Migration Guide.

Key Breaking Changes

API Migration Map

chrome.extension.getURL()           → chrome.runtime.getURL()
chrome.tabs.executeScript()         → chrome.scripting.executeScript()
chrome.tabs.insertCSS()             → chrome.scripting.insertCSS()
chrome.browserAction.*              → chrome.action.*
chrome.pageAction.*                 → chrome.action.*
webRequest (blocking)               → declarativeNetRequest
localStorage                        → chrome.storage.local
XMLHttpRequest                      → fetch()
setInterval (background)            → chrome.alarms

Tips & Best Practices

Skill 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)
│       ├── 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.

Requirements

Resources