wxt-skills

Original：🇨🇳 Chinese
Translated
4 scriptsChecked / no sensitive code detected

WXT is a modern browser extension development framework that supports Chrome, Firefox, Safari, and Edge; it provides TypeScript support, HMR hot reload, and multi-framework support (Vanilla/Vue/React/Svelte/Solid); suitable for rapid development of cross-browser extensions.

2installs
Sourcemorning-start/coze-skills
Added on

NPX Install

npx skill4agent add morning-start/coze-skills wxt-skills

Tags

Translated version includes tags in frontmatter
browser-extension-developmentwxt-frameworkvite-integrationcross-browser-supportmulti-framework-development

SKILL.md Content (Chinese)

View Translation Comparison →

WXT Browser Extension Development Framework

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

Framework Overview

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

Module Navigation

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

1. Guides (guides/)

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. Command Line (cli/)

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 (lifecycle/)

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/)

Entrypoint API: defineBackground, defineContentScript, etc.
Configuration API: defineConfig, defineManifest, etc.
Utility Functions: Storage, script injection, matching patterns, etc.

5. Examples (examples/)

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/)

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 (examples/)

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
# Install Bun (Recommended)
curl -fsSL https://bun.sh/install | bash

# Verify installation
bun --version

Create Project

bash
# Create project
bunx wxt@latest init

# Select framework: Svelte (Recommended) or Solid

Start Development

bash
cd my-extension
bun run dev

Learning Path

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

This skill primarily uses Bun, and also supports other package managers:
OperationBunnpmpnpmYarn
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

FrameworkRecommendationFeaturesUse Cases
Svelte⭐⭐⭐⭐⭐Lightweight, high performance, gentle learning curveRecommended as first choice
Solid⭐⭐⭐⭐⭐Reactive, high performance, fine-grained updatesRecommended as first choice
Vue⭐⭐⭐⭐Mature ecosystem, rich Chinese documentationFor developers familiar with Vue
React⭐⭐⭐⭐Huge ecosystem, abundant employment opportunitiesFor developers familiar with React
Vanilla⭐⭐⭐No framework dependencies, simple and directSimple extensions or teams without framework experience

Official Resources

ResourceLink
Installation Guidehttps://wxt.dev/guide/installation.html
Example Projectshttps://wxt.dev/examples.html
API Referencehttps://wxt.dev/api/reference/wxt/
GitHub Repositoryhttps://github.com/wxt-dev/wxt

Trigger Scenarios

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

This skill adopts a modular design, and each module is independent and complete:
  1. Guides Module: Theoretical learning and concept understanding
  2. Command Line Module: Practical operations and tool usage
  3. Lifecycle Module: In-depth understanding of build processes
  4. API Module: Looking up functions and configurations
  5. 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.