wxt

Guide WXT browser extension development across build-time and runtime boundaries.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/mpsuesser/workspace --skill wxt-mpsuesser
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wxt
Source: https://github.com/mpsuesser/workspace/tree/main/dotconfig/pi/agent/skills/__techs__/wxt
Command: npx skills add https://github.com/mpsuesser/workspace --skill wxt-mpsuesser

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you develop browser/web extensions with WXT without breaking WXT’s build-time/runtime boundaries, configuration rules, or browser-specific manifest requirements.

Core Features & Use Cases

  • Guide the full extension workflow: project setup, deciding where code goes, and organizing entrypoints correctly.
  • Prevent common WXT pitfalls: build-time Node imports vs runtime main, avoiding direct extension/Dom API use at top level, and never editing generated .wxt/ or .output/ artifacts by hand.
  • Accelerate real tasks across extension types: background, popup/options, content scripts (including Shadow Root UI and CSS injection), storage, runtime APIs, messaging patterns, testing, and zip/submit publishing.

Quick Start

Ask the WXT skill to help you implement your current change by first identifying which entrypoint/config area you’re modifying and then pointing you to the exact vendored reference pages and upstream API details needed for that change.

Frequently Asked Questions about wxt

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

FAQPage Schema
How do I avoid build-time import errors when developing browser extensions with WXT?

To avoid build-time import errors in WXT browser extensions, keep Node imports at build-time and restrict DOM or extension API calls to runtime execution contexts inside entrypoint helpers.

How do I inject CSS and Shadow DOM UI into content scripts using WXT?

WXT content scripts support Shadow Root UI and CSS injection through entrypoint helpers, isolating extension styles and preventing conflicts with the host page DOM during rendering.

Why does my WXT extension break after changing the configuration?

WXT extensions break after configuration changes when you manually edit generated `.wxt/` or `.output/` artifacts or skip running the required WXT prepare and build steps to regenerate the manifest.

What is the correct way to generate manifests for web extensions in WXT?

Manifest generation in WXT is handled automatically by reading configuration and entrypoint definitions, ensuring browser-specific requirements are met without manually writing or editing the manifest file.

Can I use WXT to test and publish browser extensions across different browsers?

WXT supports extension testing and publishing workflows across browsers by providing CLI commands to build, zip, and submit extensions while validating runtime APIs, storage, and messaging patterns for compatibility.

What are the limitations of editing generated WXT artifacts directly?

Editing generated WXT artifacts directly causes build failures and runtime errors because the WXT build process overwrites `.wxt/` and `.output/` directories, bypassing strict manifest and configuration rules.