extension-create

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Extension Create (WXT & Plasmo)

扩展创建（WXT & Plasmo）

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

自动搭建Chrome扩展项目。请勿仅做解释——执行以下工作流。

Workflow (Execute This)

工作流（执行此流程）

Step 1: Gather requirements from user

步骤1：收集用户需求

Ask the user to confirm:

Extension name (kebab-case, e.g.
```
my-tab-manager
```
)
Short description (1 sentence)
UI framework: React / Vue / Svelte / Vanilla (default: React)
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

请用户确认以下信息：

扩展名称（短横线命名法，例如
```
my-tab-manager
```
）
简短描述（一句话）
UI框架：React / Vue / Svelte / Vanilla（默认：React）
所需功能（从以下列表选择）：
- 弹窗UI
- 内容脚本（修改页面）
- 后台服务工作线程
- 侧边面板
- 选项页面
- 上下文菜单
- 标签管理 / 存储 / 仅活动标签页

Step 2: Pick scaffolder based on framework choice

步骤2：根据框架选择搭建工具

Framework	Recommended Scaffolder	Why
React	Plasmo or WXT	Plasmo has CSUI, quickstarts
Vue	WXT	First-class Vue support
Svelte	WXT	First-class Svelte support
Vanilla TS	WXT	Lightest setup

框架	推荐搭建工具	原因
React	Plasmo 或 WXT	Plasmo支持CSUI，拥有快速启动模板
Vue	WXT	提供一流的Vue支持
Svelte	WXT	提供一流的Svelte支持
Vanilla TS	WXT	最轻量化的设置

Step 3: Scaffold

步骤3：搭建项目

WXT — multi-framework, file-based entrypoints:

bash

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

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

bash

undefined

WXT —— 多框架支持，基于文件的入口点：

bash

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

Plasmo —— 优先支持React，自动生成清单，丰富的快速启动模板：

bash

undefined

Basic React

基础React项目

npm create plasmo --with-src

With Tailwind CSS

集成Tailwind CSS

npm create plasmo -- --with-tailwindcss

With specific template (see https://docs.plasmo.com/quickstarts)

使用特定模板（查看https://docs.plasmo.com/quickstarts）

npm create plasmo -- --with-redux

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

npm create plasmo -- --with-redux

快速启动模板：https://docs.plasmo.com/quickstarts
完整文档：https://docs.plasmo.com/

Step 3: Configure based on features

步骤3：根据功能配置项目

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.

WXT：编辑

wxt.config.ts

配置权限和清单字段。 Plasmo：编辑

package.json

中的清单部分或

plasmo.config.ts

。Plasmo会从代码自动生成清单。

Step 4: Create entrypoints

步骤4：创建入口点

Create files in

entrypoints/

based on chosen features (see below).

根据所选功能在

entrypoints/

目录下创建文件（见下文）。

Step 5: Verify setup

步骤5：验证设置

WXT:

pnpm dev

pnpm build

pnpm zip

Plasmo:

pnpm dev

pnpm build

pnpm package

(creates zip in

build/

)

WXT：

pnpm dev

pnpm build

pnpm zip

Plasmo：

pnpm dev

pnpm build

pnpm package

（在

build/

目录生成压缩包）

Entrypoints Quick Reference

入口点快速参考

Feature	WXT	Plasmo
Popup	`entrypoints/popup/index.html` + `main.tsx`	`src/popup.tsx`
Background	`entrypoints/background.ts`	`src/background.ts`
Content script	`entrypoints/content.ts`	`src/contents/main.tsx`
Options page	`entrypoints/options/index.html`	`src/options.tsx`
Side panel	`entrypoints/sidepanel/index.html`	`src/sidepanel.tsx`
Tab page	N/A	`src/tabs/settings.tsx`

功能	WXT	Plasmo
弹窗	`entrypoints/popup/index.html` + `main.tsx`	`src/popup.tsx`
后台	`entrypoints/background.ts`	`src/background.ts`
内容脚本	`entrypoints/content.ts`	`src/contents/main.tsx`
选项页面	`entrypoints/options/index.html`	`src/options.tsx`
侧边面板	`entrypoints/sidepanel/index.html`	`src/sidepanel.tsx`
标签页页面	无	`src/tabs/settings.tsx`

wxt.config.ts Template

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

import { defineConfig } from 'wxt';

export default defineConfig({
  extensionApi: 'chrome',
  modules: ['@wxt-dev/module-react'],  // 或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

扩展类型 → 入口点映射

Type	Entrypoints	Permissions
Popup tool	popup	activeTab
Page modifier	content, background	activeTab or host_permissions
Side panel assistant	sidepanel, background	sidePanel, storage
Tab manager	popup, background	tabs, storage
Context menu	background	contextMenus, activeTab

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

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

```
pnpm install
```
执行完成
配置文件包含正确权限（WXT:
```
wxt.config.ts
```
/ Plasmo:
```
package.json
```
）
已为所选功能创建入口点
```
pnpm dev
```
加载扩展无错误
加载已解压扩展：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

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

extension-create

Original

Translation

Extension Create (WXT & Plasmo)

扩展创建（WXT & Plasmo）

Workflow (Execute This)

工作流（执行此流程）

Step 1: Gather requirements from user

步骤1：收集用户需求

Step 2: Pick scaffolder based on framework choice

步骤2：根据框架选择搭建工具

Step 3: Scaffold

步骤3：搭建项目

Basic React

基础React项目

With Tailwind CSS

集成Tailwind CSS

With specific template (see https://docs.plasmo.com/quickstarts)

使用特定模板（查看https://docs.plasmo.com/quickstarts）

Step 3: Configure based on features

步骤3：根据功能配置项目

Step 4: Create entrypoints

步骤4：创建入口点

Step 5: Verify setup

步骤5：验证设置

Entrypoints Quick Reference

入口点快速参考

wxt.config.ts Template

wxt.config.ts 模板

Extension Type → Entrypoints Map

扩展类型 → 入口点映射

Post-Scaffold Checklist

搭建后检查清单

References

参考资料

Related Skills

相关技能