extension-create

用途

Extension Create 用于自动脚手架生成 Chrome 浏览器扩展项目。该技能强调“不要只解释，而是执行工作流”，即根据用户需求直接完成项目初始化、配置与入口文件创建。

主要能力

• 收集需求：向用户确认扩展名称（kebab-case，如 my-tab-manager）、一句话简短描述、UI 框架（React / Vue / Svelte / Vanilla，默认 React）以及所需功能。
• 功能选项包括：Popup UI、内容脚本（修改页面）、后台 Service Worker、侧边栏（Side panel）、选项页、右键菜单、标签页管理 / 存储 / 仅活动标签页。
• 根据框架选择脚手架：React 推荐 CRXJS 或 WXT（CRXJS 有 CSUI 与快速启动模板）；Vue 推荐 WXT（一等支持）；Svelte 推荐 WXT（一等支持）；Vanilla TS 推荐 WXT（最轻量）。
• 执行脚手架命令、配置权限与 manifest、创建入口文件、验证开发与构建流程。

使用方式

脚手架命令

WXT（多框架、基于文件的入口点）：

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

CRXJS（React 优先、自动 manifest、丰富快速启动模板）：

# Basic React
npm create crxjs
# With Tailwind CSS
npm create crxjs
# With specific template (see https://crxjs.dev/)
npm create crxjs

快速启动：https://crxjs.dev/ 完整文档：https://crxjs.dev/

配置

• WXT：编辑 wxt.config.ts，设置权限与 manifest 字段。
• CRXJS：编辑 vite.config.ts 或 manifest.json；CRXJS 通过 vite 配置处理 manifest。

wxt.config.ts 模板：

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" },
  },
});

入口点对照

功能	WXT	CRXJS
Popup	entrypoints/popup/index.html + main.tsx	src/popup.html
Background	entrypoints/background.ts	src/background.ts
Content script	entrypoints/content.ts	src/content.ts
Options page	entrypoints/options/index.html	src/options.html
Side panel	entrypoints/sidepanel/index.html	src/sidepanel.html
Tab page	N/A	src/settings.html

扩展类型到入口点与权限的映射

类型	入口点	权限
Popup 工具	popup	activeTab
页面修改器	content, background	activeTab 或 host_permissions
侧边栏助手	sidepanel, background	sidePanel, storage
标签页管理器	popup, background	tabs, storage
右键菜单	background	contextMenus, activeTab

验证

• WXT：pnpm dev / pnpm build / pnpm zip
• CRXJS：pnpm dev / pnpm build / pnpm package（在 build/ 生成 zip）

脚手架后检查清单

• pnpm install 已完成
• 配置具有正确权限（WXT：wxt.config.ts / CRXJS：package.json）
• 已为所选功能创建入口点
• pnpm dev 加载扩展无错误
• 加载未打包扩展：WXT → .output/chrome-mv3-dev / CRXJS → build/chrome-mv3-dev

适用场景

适用于需要快速创建 Chrome 扩展项目的开发者，尤其是希望根据框架与功能自动生成项目结构、入口文件与 manifest 配置的场景。

限制

资料未提供该技能的收费、价格、平台兼容性细节或效果保证。部分命令（如 CRXJS 的模板选择）在资料中未给出具体参数，需参考 https://crxjs.dev/。