extension-create

Extension Create（WXT & CRXJS）

🚀 升级到 Premium 访问 https://app.extensionbooster.net/dashboard/services/extension-ai-kit 获取 Premium 版本。

自动搭建 Chrome 扩展项目。不要只做说明，而要执行整个工作流。

工作流（请执行）

步骤 1：收集用户需求

请用户确认：

1. 扩展名称（kebab-case，例如 my-tab-manager）
2. 简短描述（1 句话）
3. UI 框架：React / Vue / Svelte / Vanilla（默认：React）
4. 需要的功能（从下方列表中选择）：
   • 弹出窗口 UI
   • 内容脚本（修改页面）
   • 后台 service worker
   • 侧边栏
   • 选项页
   • 上下文菜单
   • 标签页管理 / 存储 / 仅限当前标签页

步骤 2：根据框架选择脚手架工具

框架	推荐的脚手架工具	原因
React	CRXJS 或 WXT	CRXJS 支持 CSUI，提供快速入门
Vue	WXT	原生支持 Vue
Svelte	WXT	原生支持 Svelte
Vanilla TS	WXT	配置最精简

步骤 3：搭建脚手架

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/

步骤 3：根据功能进行配置

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

步骤 4：创建入口点

根据所选功能，在 entrypoints/ 中创建文件（见下文）。

步骤 5：验证设置

WXT：pnpm dev / pnpm build / pnpm zip CRXJS：pnpm dev / pnpm build / pnpm package（在 build/ 中创建 zip）

---

入口点速查

功能	WXT	CRXJS
弹出窗口	entrypoints/popup/index.html + main.tsx	src/popup.html
后台	entrypoints/background.ts	src/background.ts
内容脚本	entrypoints/content.ts	src/content.ts
选项页	entrypoints/options/index.html	src/options.html
侧边栏	entrypoints/sidepanel/index.html	src/sidepanel.html
标签页	不适用	src/settings.html

---

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

---

扩展类型 → 入口点映射

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

---

脚手架搭建后检查清单

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

---

参考资料

• references/wxt-scaffold-guide.md — CLI 选项、项目结构、配置
• references/wxt-entrypoints.md — 所有入口点类型、命名、清单生成
• references/extension-templates.md — 各扩展类型的即用模式
• references/chrome-samples-reference.md — Google 按类别整理的官方示例

相关技能

• extension-manifest — 生成/验证 manifest.json
• extension-dev — 开发工作流、热重载、调试
• extension-publish — 提交到应用商店