extension-create（扩展创建）

Extension Create (WXT & Plasmo)

Auto-scaffold a Chrome extension project. Do NOT just explain — execute the workflow.

Workflow (Execute This)

Step 1: Gather requirements from user

Ask the user to confirm:

1. Extension name (kebab-case, e.g. my-tab-manager)
2. Short description (1 sentence)
3. UI framework: React / Vue / Svelte / Vanilla (default: React)
4. Features needed (pick from list below):

- Popup UI - Content script (modify pages) - Background service worker - Side panel - Options page - Context menu - Tab management / Storage / Active tab only

Step 2: Pick scaffolder based on framework choice

Step 3: Scaffold

WXT — multi-framework, file-based entrypoints:

npx wxt@latest init <name> --template <react|vue|svelte|vanilla>
cd <name> && pnpm install

Plasmo — React-first, auto-manifest, rich quickstarts:

# Basic React
npm create plasmo --with-src
# With Tailwind CSS
npm create plasmo -- --with-tailwindcss
# With specific template (see https://docs.plasmo.com/quickstarts)
npm create plasmo -- --with-redux

Quickstarts: https://docs.plasmo.com/quickstarts Full docs: https://docs.plasmo.com/

Step 3: Configure based on features

WXT: Edit wxt.config.ts with permissions and manifest fields. Plasmo: Edit package.json manifest section or plasmo.config.ts. Plasmo auto-generates manifest from code.

Step 4: Create entrypoints

Create files in entrypoints/ based on chosen features (see below).

Step 5: Verify setup

WXT: pnpm dev / pnpm build / pnpm zip Plasmo: pnpm dev / pnpm build / pnpm package (creates zip in build/)

Entrypoints Quick Reference

wxt.config.ts Template

import { defineConfig } from 'wxt';

export default defineConfig({
  extensionApi: 'chrome',
  modules: ['@wxt-dev/module-react'],  // or vue/svelte
  manifest: {
    name: 'My Extension',
    description: 'What it does',
    permissions: ['storage', 'activeTab'],
    host_permissions: ['<all_urls>'],
    action: { default_popup: 'popup.html' },
  },
});

Extension Type → Entrypoints Map

Post-Scaffold Checklist

• pnpm install completed
• Config has correct permissions (WXT: wxt.config.ts / Plasmo: package.json)
• Entrypoints created for chosen features
• pnpm dev loads extension without errors
• Load unpacked: WXT → .output/chrome-mv3-dev / Plasmo → build/chrome-mv3-dev

References

• references/wxt-scaffold-guide.md — CLI options, project structure, config
• references/wxt-entrypoints.md — All entrypoint types, naming, manifest generation
• references/extension-templates.md — Ready-to-use patterns per extension type
• references/chrome-samples-reference.md — Google's official samples by category

Related Skills

• extension-manifest — Generate/validate manifest.json
• extension-dev — Dev workflow, hot reload, debugging
• extension-publish — Store submission