wxt-skills

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WXT 浏览器扩展开发框架

WXT Browser Extension Development Framework

WXT（Web eXtensions Tools）是一个基于 Vite 构建的现代化浏览器扩展开发框架，专为 Manifest V3 设计。

WXT (Web eXtensions Tools) is a modern browser extension development framework built on Vite, designed specifically for Manifest V3.

框架概述

Framework Overview

核心优势：

声明式入口点定义，自动生成 manifest 配置
基于 Vite 的极速构建速度
完整的 TypeScript 类型支持
多框架支持（Vanilla、Vue、React、Svelte、Solid）
多浏览器一键构建（Chrome、Firefox、Edge、Safari）
内置热重载和开发服务器

Core Advantages:

Declarative entry point definition, automatically generates manifest configurations
Blazing-fast build speed based on Vite
Complete TypeScript type support
Multi-framework support (Vanilla, Vue, React, Svelte, Solid)
One-click build for multiple browsers (Chrome, Firefox, Edge, Safari)
Built-in hot reload and development server

官方资源

Official Resources

官网：https://wxt.dev
GitHub：https://github.com/wxt-dev/wxt
快速开始：https://wxt.dev/guide/introduction.html
核心指南：https://wxt.dev/guide/essentials/

Official Website: https://wxt.dev
GitHub: https://github.com/wxt-dev/wxt
Quick Start: https://wxt.dev/guide/introduction.html
Core Guides: https://wxt.dev/guide/essentials/

模块导航

Module Navigation

本技能按功能分为 5 个核心模块，建议按顺序学习：

This skill is divided into 5 core modules by function, and it is recommended to learn in order:

1. 指引（guides/）

1. Guides (guides/)

入门指南：基于官方文档的快速入门，包含环境准备、项目创建、入口点、静态资源、前端框架、权限、消息传递、数据存储和发布。

项目结构：项目结构详解，包含默认结构、源码模式和核心文件作用。

静态资源：静态资源管理，包含资源目录、引用方式、图标配置、优化策略和最佳实践。

内容脚本：内容脚本开发，包含注入规则、与页面交互、调试方法和完整示例。

数据存储：数据存储方案，包含存储类型、监听变化、WXT 存储工具、数据迁移和最佳实践。

扩展内通信：扩展内通信，包含一次性消息、长连接、跨扩展通信、通信模式和完整示例。

国际化：国际化配置，包含语言文件、动态切换、复数形式、变量插值和完整示例。

框架配置：Vanilla/Vue/React/Svelte/Solid 框架的完整配置。

权限配置：权限声明方式、动态权限申请、最小权限原则和最佳实践。

浏览器适配：Chrome、Firefox、Edge、Safari 的适配和兼容性配置。

部署指南：构建、打包、发布到各浏览器的完整流程。

Getting Started: Quick start based on official documentation, including environment preparation, project creation, entry points, static resources, front-end frameworks, permissions, message passing, data storage, and publishing.

Project Structure: Detailed explanation of project structure, including default structure, source code mode, and roles of core files.

Static Assets: Static asset management, including asset directories, reference methods, icon configuration, optimization strategies, and best practices.

Content Scripts: Content script development, including injection rules, page interaction, debugging methods, and complete examples.

Data Storage: Data storage solutions, including storage types, change listening, WXT storage tools, data migration, and best practices.

Internal Extension Communication: Internal extension communication, including one-time messages, long connections, cross-extension communication, communication patterns, and complete examples.

Internationalization: Internationalization configuration, including language files, dynamic switching, plural forms, variable interpolation, and complete examples.

Framework Setup: Complete configuration for Vanilla/Vue/React/Svelte/Solid frameworks.

Permissions Configuration: Permission declaration methods, dynamic permission requests, principle of least privilege, and best practices.

Browser Adaptation: Adaptation and compatibility configuration for Chrome, Firefox, Edge, and Safari.

Deployment Guide: Complete process of building, packaging, and publishing to various browsers.

2. 命令行（cli/）

2. Command Line (cli/)

命令参考：所有开发、构建、测试、打包命令（Bun 为主）。

Bun 速查表：Bun 常用命令快速参考。

Command Reference: All development, build, test, and packaging commands (Bun as the primary tool).

Bun Cheatsheet: Quick reference for commonly used Bun commands.

3. 生命周期（lifecycle/）

3. Lifecycle (lifecycle/)

创建项目：使用 bunx wxt 创建新项目的完整流程。

构建阶段：8 个构建阶段的详细说明。

钩子函数：构建生命周期钩子的完整文档。

流程图：完整的构建流程图示。

Creating a Project: Complete process of creating a new project using bunx wxt.

Build Phases: Detailed explanation of 8 build phases.

Hook Functions: Complete documentation of build lifecycle hooks.

Flowchart: Complete build process diagram.

4. API（api/）

4. API (api/)

入口点 API：defineBackground、defineContentScript 等。

配置 API：defineConfig、defineManifest 等。

工具函数：存储、脚本注入、匹配模式等。

Entrypoint API: defineBackground, defineContentScript, etc.

Configuration API: defineConfig, defineManifest, etc.

Utility Functions: Storage, script injection, matching patterns, etc.

5. 示例（examples/）

5. Examples (examples/)

Vanilla 示例：原生 JavaScript/TypeScript 项目。

Vue 示例：Vue 3 项目示例。

React 示例：React 项目示例。

Svelte 示例：Svelte 项目示例（推荐）。

Solid 示例：SolidJS 项目示例（推荐）。

Vanilla Example: Native JavaScript/TypeScript project.

Vue Example: Vue 3 project example.

React Example: React project example.

Svelte Example: Svelte project example (Recommended).

Solid Example: SolidJS project example (Recommended).

4. API（api/）

4. API (api/)

接口文档：WXT 核心接口详细说明，包括入口点接口、配置接口、构建接口、开发服务器接口等。

类型文档：WXT 类型别名文档，包括配置类型、入口点类型、浏览器类型、模块类型等。

入口点 API：defineBackground、defineContentScript 等入口点定义函数。

配置 API：defineConfig、defineManifest 等配置函数。

工具函数：存储、脚本注入、匹配模式等工具函数。

Interface Documentation: Detailed explanation of WXT core interfaces, including entrypoint interfaces, configuration interfaces, build interfaces, development server interfaces, etc.

Type Documentation: WXT type alias documentation, including configuration types, entrypoint types, browser types, module types, etc.

Entrypoint API: Entrypoint definition functions such as defineBackground, defineContentScript.

Configuration API: Configuration functions such as defineConfig, defineManifest.

Utility Functions: Utility functions for storage, script injection, matching patterns, etc.

5. 示例（examples/）

5. Examples (examples/)

Vanilla 示例：原生 JavaScript/TypeScript 项目。

Vue 示例：Vue 3 项目示例。

React 示例：React 项目示例。

Svelte 示例：Svelte 项目示例（推荐）。

Solid 示例：SolidJS 项目示例（推荐）。

Vanilla Example: Native JavaScript/TypeScript project.

Vue Example: Vue 3 project example.

React Example: React project example.

Svelte Example: Svelte project example (Recommended).

Solid Example: SolidJS project example (Recommended).

快速开始

Quick Start

环境准备

Environment Preparation

bash

undefined

bash

undefined

安装 Bun（推荐）

Install Bun (Recommended)

curl -fsSL https://bun.sh/install | bash

验证安装

Verify installation

bun --version

undefined

bun --version

undefined

创建项目

Create Project

bash

undefined

bash

undefined

创建项目

Create project

bunx wxt@latest init

选择框架：Svelte（推荐）或 Solid

Select framework: Svelte (Recommended) or Solid

undefined

undefined

启动开发

Start Development

bash

cd my-extension
bun run dev

bash

cd my-extension
bun run dev

学习路径

Learning Path

初学者路径：指引（入门→框架）→ 示例（Svelte）→ 命令行（开发）

进阶路径：生命周期（阶段→钩子）→ API（入口点→配置→工具）→ 部署

快速上手：快速开始 → 选择框架示例 → 命令速查

Beginner Path: Guides (Getting Started → Framework) → Examples (Svelte) → Command Line (Development)

Advanced Path: Lifecycle (Phases → Hooks) → API (Entrypoints → Configuration → Utilities) → Deployment

Quick Start: Quick Start → Select Framework Example → Command Cheatsheet

包管理器支持

Package Manager Support

本技能以 Bun 为主，同时支持其他包管理器：

操作	Bun	npm	pnpm	Yarn
安装依赖	`bun i`	`npm i`	`pnpm i`	`yarn`
开发	`bun run dev`	`npm run dev`	`pnpm dev`	`yarn dev`
构建	`bun run build`	`npm run build`	`pnpm build`	`yarn build`

This skill primarily uses Bun, and also supports other package managers:

Operation	Bun	npm	pnpm	Yarn
Install Dependencies	`bun i`	`npm i`	`pnpm i`	`yarn`
Development	`bun run dev`	`npm run dev`	`pnpm dev`	`yarn dev`
Build	`bun run build`	`npm run build`	`pnpm build`	`yarn build`

框架选择建议

Framework Selection Recommendations

框架	推荐度	特点	适用场景
Svelte	⭐⭐⭐⭐⭐	轻量、高性能、学习曲线平缓	推荐首选
Solid	⭐⭐⭐⭐⭐	响应式、高性能、细粒度更新	推荐首选
Vue	⭐⭐⭐⭐	生态成熟、中文文档丰富	熟悉 Vue 的开发者
React	⭐⭐⭐⭐	生态庞大、就业机会多	熟悉 React 的开发者
Vanilla	⭐⭐⭐	无框架依赖、简单直接	简单扩展或团队无框架经验

Framework	Recommendation	Features	Use Cases
Svelte	⭐⭐⭐⭐⭐	Lightweight, high performance, gentle learning curve	Recommended as first choice
Solid	⭐⭐⭐⭐⭐	Reactive, high performance, fine-grained updates	Recommended as first choice
Vue	⭐⭐⭐⭐	Mature ecosystem, rich Chinese documentation	For developers familiar with Vue
React	⭐⭐⭐⭐	Huge ecosystem, abundant employment opportunities	For developers familiar with React
Vanilla	⭐⭐⭐	No framework dependencies, simple and direct	Simple extensions or teams without framework experience

官方资源

Official Resources

资源	链接
安装指南	https://wxt.dev/guide/installation.html
示例项目	https://wxt.dev/examples.html
API 参考	https://wxt.dev/api/reference/wxt/
GitHub 仓库	https://github.com/wxt-dev/wxt

Resource	Link
Installation Guide	https://wxt.dev/guide/installation.html
Example Projects	https://wxt.dev/examples.html
API Reference	https://wxt.dev/api/reference/wxt/
GitHub Repository	https://github.com/wxt-dev/wxt

调用时机

Trigger Scenarios

当您遇到以下情况时，可以调用本技能获取帮助：

创建新的浏览器扩展项目
配置 WXT 项目选项
使用 Svelte/Solid 等框架开发扩展
定义各种类型的入口点（后台脚本、内容脚本、弹出页面等）
使用存储、脚本注入等功能
构建和打包扩展
解决开发过程中遇到的问题

You can call this skill for help when you encounter the following situations:

Creating a new browser extension project
Configuring WXT project options
Developing extensions using frameworks like Svelte/Solid
Defining various types of entry points (background scripts, content scripts, popup pages, etc.)
Using functions such as storage and script injection
Building and packaging extensions
Solving problems encountered during development

技能结构说明

Skill Structure Explanation

本技能采用模块化设计，每个模块独立完整：

指引模块：理论学习和概念理解
命令行模块：实际操作和工具使用
生命周期模块：深入理解构建流程
API 模块：查阅函数和配置
示例模块：参考完整代码

建议按模块顺序学习，但也可根据需求直接跳转到对应模块。

This skill adopts a modular design, and each module is independent and complete:

Guides Module: Theoretical learning and concept understanding
Command Line Module: Practical operations and tool usage
Lifecycle Module: In-depth understanding of build processes
API Module: Looking up functions and configurations
Examples Module: Referencing complete code

It is recommended to learn in module order, but you can also jump directly to the corresponding module according to your needs.