chrome-extension-wxt

Build cross-browser extensions with WXT using Manifest V3.

32|2|Updated Nov 5, 2025
One-click install
npx skills add https://github.com/tenequm/claude-plugins --skill chrome-extension-wxt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-extension-wxt
Source: https://github.com/tenequm/claude-plugins/tree/main/chrome-extension-wxt/skill
Command: npx skills add https://github.com/tenequm/claude-plugins --skill chrome-extension-wxt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Develop modern Chrome extensions with a single codebase using the WXT framework across Chrome, Firefox, Edge, and Safari.

Core Features & Use Cases

  • File-based project structure (entrypoints, components, utils)
  • Manifest configuration via wxt.config.ts
  • Cross-browser compatibility with MV3 conventions

Quick Start

Initialize with npm create wxt@latest and start building for your framework (React/Vue/Svelte) template

Frequently Asked Questions about chrome-extension-wxt

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Chrome extension with a single codebase for multiple browsers?

WXT enables building Chrome extensions once and deploying across Chrome, Firefox, Edge, and Safari using Manifest V3. Initialize a project with npm create wxt@latest, configure your framework (React, Vue, Svelte, or Solid), and WXT handles cross-browser compatibility automatically through its file-based structure and build tooling.

What's the difference between Manifest V2 and Manifest V3 for Chrome extensions?

Manifest V3 is Chrome's current standard, replacing the deprecated V2 with stricter security policies, service workers instead of background pages, and updated messaging APIs. WXT builds extensions following MV3 conventions by default, ensuring your extension meets modern browser requirements and future compatibility.

Can I use React or Vue in a Chrome extension with WXT?

Yes. WXT supports React, Vue, Svelte, and Solid for UI integration in popup and content scripts. Choose your preferred framework during project initialization, and WXT scaffolds the entrypoint structure, type-safe storage, and messaging layer needed to connect your UI components to extension logic.

How do I handle message passing and storage in a Chrome extension?

WXT provides type-safe messaging and storage APIs built into its framework. Define messages and storage keys in your configuration, and WXT generates typed utilities for communicating between background, content, and popup scripts, reducing runtime errors and improving maintainability across your extension.

What file structure does WXT use for organizing extension code?

WXT uses an entrypoint-based file structure where background scripts, content scripts, and popups live in dedicated directories with automatic discovery. Your wxt.config.ts defines manifest settings, and the framework compiles these files into a production-ready extension with proper module resolution and bundling.

Do I need to manually write the manifest.json for a WXT extension?

No. WXT generates manifest.json from your wxt.config.ts configuration file. This approach keeps your Manifest V3 settings centralized, typed, and synchronized with your code structure, eliminating manual JSON editing and reducing configuration drift.