⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

WXT 开发 Chrome 扩展指南：现代跨浏览器扩展框架与 React/Vue 集成

chrome-extension-wxt by tenequm/claude-plugins

69 周安装量

19 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/tenequm/claude-plugins --skill chrome-extension-wxt

开发 JavaScript 框架浏览器扩展

🇨🇳中文介绍

使用 WXT 开发 Chrome 扩展

使用 WXT 构建现代、跨浏览器的扩展——这是一个支持 Chrome、Firefox、Edge、Safari 和所有 Chromium 浏览器的下一代框架，只需单一代码库。

何时使用此技能

在以下情况下使用此技能：

创建新的 Chrome/浏览器扩展
设置 WXT 开发环境
构建扩展功能（弹出窗口、内容脚本、后台脚本）
实现跨浏览器兼容性
使用 Manifest V3（自 2025 年起为强制标准，V2 已弃用）
将 React 19、Vue、Svelte 或 Solid 与扩展集成

快速开始工作流

1. 初始化 WXT 项目

# 使用选择的框架创建新项目
npm create wxt@latest

# 或使用特定模板
npm create wxt@latest -- --template react-ts
npm create wxt@latest -- --template vue-ts
npm create wxt@latest -- --template svelte-ts

2. 项目结构

WXT 使用基于文件的约定：

project/
├── entrypoints/              # 自动发现的入口点
│   ├── background.ts         # 服务工作者
│   ├── content.ts           # 内容脚本
│   ├── popup.html           # 弹出窗口 UI
│   └── options.html         # 选项页面
├── components/              # 自动导入的 UI 组件
├── utils/                   # 自动导入的工具函数
├── public/                  # 静态资源
│   └── icon/               # 扩展图标
├── wxt.config.ts           # 配置
└── package.json

3. 开发命令

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

后台脚本（服务工作者）

// entrypoints/background.ts
export default defineBackground({
  type: 'module',
  persistent: false,

  main() {
    // 监听扩展事件
    browser.action.onClicked.addListener((tab) => {
      console.log('Extension clicked', tab);
    });

    // 处理消息
    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
      // 处理消息
      sendResponse({ success: true });
      return true; // 保持通道开放以进行异步操作
    });
  },
});

// entrypoints/content.ts
export default defineContentScript({
  matches: ['*://*.example.com/*'],
  runAt: 'document_end',

  main(ctx) {
    // 内容脚本逻辑
    console.log('Content script loaded');

    // 创建 UI
    const ui = createShadowRootUi(ctx, {
      name: 'my-extension-ui',
      position: 'inline',
      anchor: 'body',

      onMount(container) {
        // 挂载 React/Vue 组件
        const root = ReactDOM.createRoot(container);
        root.render(<App />);
      },
    });

    ui.mount();
  },
});

// entrypoints/popup/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<!-- entrypoints/popup/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Extension Popup</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./main.tsx"></script>
</body>
</html>

基础 wxt.config.ts

import { defineConfig } from 'wxt';

export default defineConfig({
  // 框架集成
  modules: ['@wxt-dev/module-react'],

  // Manifest 配置
  manifest: {
    name: 'My Extension',
    description: 'Extension description',
    permissions: ['storage', 'activeTab'],
    host_permissions: ['*://example.com/*'],
  },

  // 浏览器目标
  browser: 'chrome', // 或 'firefox', 'edge', 'safari'
});

类型安全的存储

// utils/storage.ts
import { storage } from 'wxt/storage';

export const storageHelper = {
  async get<T>(key: string): Promise<T | null> {
    return await storage.getItem<T>(`local:${key}`);
  },

  async set<T>(key: string, value: T): Promise<void> {
    await storage.setItem(`local:${key}`, value);
  },

  watch<T>(key: string, callback: (newValue: T | null) => void) {
    return storage.watch<T>(`local:${key}`, callback);
  },
};

类型安全的消息传递

// utils/messaging.ts
interface Messages {
  'get-data': {
    request: { key: string };
    response: { value: any };
  };
}

export async function sendMessage<K extends keyof Messages>(
  type: K,
  payload: Messages[K]['request']
): Promise<Messages[K]['response']> {
  return await browser.runtime.sendMessage({ type, payload });
}

// 将脚本注入页面上下文
import { injectScript } from 'wxt/client';

await injectScript('/injected.js', {
  keepInDom: false,
});

# 为特定浏览器构建
npm run build -- --browser=chrome
npm run build -- --browser=firefox

# 创建商店就绪的 ZIP 包
npm run zip
npm run zip -- --browser=firefox

# 为所有浏览器构建
npm run zip:all

输出：.output/my-extension-{version}-{browser}.zip

现代技术栈（2025）

构建 Chrome 扩展的流行技术组合：

WXT + React + Tailwind + shadcn/ui

2025 年最流行的技术栈。结合了实用优先的样式和预构建的无障碍组件。

npm create wxt@latest -- --template react-ts
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx shadcn@latest init

最适合： 具有一致设计系统的现代 UI 示例： https://github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension

WXT + React + Mantine UI

完整的组件库，包含 100 多个组件和内置的深色模式。

npm create wxt@latest -- --template react-ts
npm install @mantine/core @mantine/hooks

最适合： 需要复杂组件的功能丰富的扩展 示例： https://github.com/ongkay/WXT-Mantine-Tailwind-Browser-Extension

WXT + React + TypeScript（极简）

用于自定义设计的简洁设置，无需 UI 库依赖。

npm create wxt@latest -- --template react-ts

最适合： 简单的扩展或高度自定义的设计

有关高级主题的详细信息，请参阅参考文件：

React 集成：请参阅 references/react-integration.md 以获取完整的 React 设置、钩子、状态管理和流行的 UI 库
Chrome API：请参阅 references/chrome-api.md 以获取带有示例的全面 Chrome 扩展 API 参考
Chrome 140+ 功能：请参阅 references/chrome-140-features.md 以获取最新的 Chrome 扩展 API（sidePanel.getLayout() 等）
WXT API：请参阅 references/wxt-api.md 以获取完整的 WXT 框架 API 文档
最佳实践：请参阅 references/best-practices.md 以获取安全、性能和架构模式

常见问题及解决方案：

模块未找到错误：确保模块已安装并正确导入
CSP 违规：更新 manifest 中的 content_security_policy
热重载不工作：检查浏览器控制台是否有错误
存储未持久化：正确使用 storage.local 或 storage.sync

详细的故障排除，请参阅 references/troubleshooting.md

scripts/：用于常见扩展任务的辅助工具
references/：高级功能的详细文档
assets/：入门模板和示例组件

在构建扩展时，根据需要随时使用这些资源。

🇺🇸English

Chrome Extension Development with WXT

Build modern, cross-browser extensions using WXT - the next-generation framework that supports Chrome, Firefox, Edge, Safari, and all Chromium browsers with a single codebase.

When to Use This Skill

Use this skill when:

Creating a new Chrome/browser extension
Setting up WXT development environment
Building extension features (popup, content scripts, background scripts)
Implementing cross-browser compatibility
Working with Manifest V3 (mandatory standard as of 2025, V2 deprecated)
Integrating React 19, Vue, Svelte, or Solid with extensions

Quick Start Workflow

1. Initialize WXT Project

# Create new project with framework of choice
npm create wxt@latest

# Or with specific template
npm create wxt@latest -- --template react-ts
npm create wxt@latest -- --template vue-ts
npm create wxt@latest -- --template svelte-ts

2. Project Structure

WXT uses file-based conventions:

project/
├── entrypoints/              # Auto-discovered entry points
│   ├── background.ts         # Service worker
│   ├── content.ts           # Content script
│   ├── popup.html           # Popup UI
│   └── options.html         # Options page
├── components/              # Auto-imported UI components
├── utils/                   # Auto-imported utilities
├── public/                  # Static assets
│   └── icon/               # Extension icons
├── wxt.config.ts           # Configuration
└── package.json

3. Development Commands

npm run dev              # Start dev server with HMR
npm run build           # Production build
npm run zip             # Package for store submission

Core Entry Points

WXT recognizes entry points by filename in entrypoints/ directory:

Background Script (Service Worker)

// entrypoints/background.ts
export default defineBackground({
  type: 'module',
  persistent: false,

  main() {
    // Listen for extension events
    browser.action.onClicked.addListener((tab) => {
      console.log('Extension clicked', tab);
    });

    // Handle messages
    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
      // Handle message
      sendResponse({ success: true });
      return true; // Keep channel open for async
    });
  },
});

Content Script

// entrypoints/content.ts
export default defineContentScript({
  matches: ['*://*.example.com/*'],
  runAt: 'document_end',

  main(ctx) {
    // Content script logic
    console.log('Content script loaded');

    // Create UI
    const ui = createShadowRootUi(ctx, {
      name: 'my-extension-ui',
      position: 'inline',
      anchor: 'body',

      onMount(container) {
        // Mount React/Vue component
        const root = ReactDOM.createRoot(container);
        root.render(<App />);
      },
    });

    ui.mount();
  },
});

Popup UI

// entrypoints/popup/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);



<!-- entrypoints/popup/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Extension Popup</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./main.tsx"></script>
</body>
</html>

Configuration

Basic wxt.config.ts

import { defineConfig } from 'wxt';

export default defineConfig({
  // Framework integration
  modules: ['@wxt-dev/module-react'],

  // Manifest configuration
  manifest: {
    name: 'My Extension',
    description: 'Extension description',
    permissions: ['storage', 'activeTab'],
    host_permissions: ['*://example.com/*'],
  },

  // Browser target
  browser: 'chrome', // or 'firefox', 'edge', 'safari'
});

Common Patterns

Type-Safe Storage

// utils/storage.ts
import { storage } from 'wxt/storage';

export const storageHelper = {
  async get<T>(key: string): Promise<T | null> {
    return await storage.getItem<T>(`local:${key}`);
  },

  async set<T>(key: string, value: T): Promise<void> {
    await storage.setItem(`local:${key}`, value);
  },

  watch<T>(key: string, callback: (newValue: T | null) => void) {
    return storage.watch<T>(`local:${key}`, callback);
  },
};

Type-Safe Messaging

// utils/messaging.ts
interface Messages {
  'get-data': {
    request: { key: string };
    response: { value: any };
  };
}

export async function sendMessage<K extends keyof Messages>(
  type: K,
  payload: Messages[K]['request']
): Promise<Messages[K]['response']> {
  return await browser.runtime.sendMessage({ type, payload });
}

Script Injection

// Inject script into page context
import { injectScript } from 'wxt/client';

await injectScript('/injected.js', {
  keepInDom: false,
});

Building & Deployment

Production Build

# Build for specific browser
npm run build -- --browser=chrome
npm run build -- --browser=firefox

# Create store-ready ZIP
npm run zip
npm run zip -- --browser=firefox

Multi-Browser Build

# Build for all browsers
npm run zip:all

Output: .output/my-extension-{version}-{browser}.zip

Modern Stacks (2025)

Popular technology combinations for building Chrome extensions:

WXT + React + Tailwind + shadcn/ui

Most popular stack in 2025. Combines utility-first styling with pre-built accessible components.

npm create wxt@latest -- --template react-ts
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx shadcn@latest init

Best for: Modern UIs with consistent design system Example: https://github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension

WXT + React + Mantine UI

Complete component library with 100+ components and built-in dark mode.

npm create wxt@latest -- --template react-ts
npm install @mantine/core @mantine/hooks

Best for: Feature-rich extensions needing complex components Example: https://github.com/ongkay/WXT-Mantine-Tailwind-Browser-Extension

WXT + React + TypeScript (Minimal)

Clean setup for custom designs without UI library dependencies.

npm create wxt@latest -- --template react-ts

Best for: Simple extensions or highly custom designs

Advanced Topics

For detailed information on advanced topics, see the reference files:

React Integration : See references/react-integration.md for complete React setup, hooks, state management, and popular UI libraries
Chrome APIs : See references/chrome-api.md for comprehensive Chrome Extension API reference with examples
Chrome 140+ Features : See references/chrome-140-features.md for latest Chrome Extension APIs (sidePanel.getLayout(), etc.)
WXT API : See references/wxt-api.md for complete WXT framework API documentation
Best Practices : See references/best-practices.md for security, performance, and architecture patterns

Troubleshooting

Common issues and solutions:

Module not found errors : Ensure modules are installed and properly imported
CSP violations : Update content_security_policy in manifest
Hot reload not working : Check browser console for errors
Storage not persisting : Use storage.local or storage.sync correctly

For detailed troubleshooting, see references/troubleshooting.md

Resources

Official Documentation

WXT Docs: https://wxt.dev
Chrome Extension Docs: https://developer.chrome.com/docs/extensions
Firefox Extension Docs: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons

Bundled Resources

scripts/ : Helper utilities for common extension tasks
references/ : Detailed documentation for advanced features
assets/ : Starter templates and example components

Use these resources as needed when building your extension.

Weekly Installs

Repository

tenequm/claude-plugins

GitHub Stars

First Seen

Jan 26, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

opencode67

codex66

gemini-cli66

github-copilot64

kimi-cli63

cursor62

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

122,000 周安装

WXT 开发 Chrome 扩展指南：现代跨浏览器扩展框架与 React/Vue 集成

🇨🇳中文介绍

使用 WXT 开发 Chrome 扩展

何时使用此技能

快速开始工作流

1. 初始化 WXT 项目

2. 项目结构

3. 开发命令

相关 Skills

核心入口点

后台脚本（服务工作者）

内容脚本

弹出窗口 UI

配置

基础 wxt.config.ts

常用模式

类型安全的存储

类型安全的消息传递

脚本注入

构建与部署

生产构建

多浏览器构建

现代技术栈（2025）

WXT + React + Tailwind + shadcn/ui

WXT + React + Mantine UI

WXT + React + TypeScript（极简）

高级主题

故障排除

资源

官方文档

捆绑资源

🇺🇸English

Chrome Extension Development with WXT

When to Use This Skill

Quick Start Workflow

1. Initialize WXT Project

2. Project Structure

3. Development Commands

Core Entry Points

Background Script (Service Worker)

Content Script

Popup UI

Configuration

Basic wxt.config.ts

Common Patterns

Type-Safe Storage

Type-Safe Messaging

Script Injection

Building & Deployment

Production Build

Multi-Browser Build

Modern Stacks (2025)

WXT + React + Tailwind + shadcn/ui

WXT + React + Mantine UI

WXT + React + TypeScript (Minimal)

Advanced Topics

Troubleshooting

Resources

Official Documentation

Bundled Resources

最新 Skills