LibraryActive

WXT

WXT is a framework for building web extensions with type-safe APIs, config helpers, and build tooling.

Open source page ↗

Field note

What it does

WXT is a framework for building web extensions. This module provides JS APIs used by the CLI, helper functions for defining project config, and types for building extensions or configuring WXT.

Capabilities

Available capabilities

Frontend Framework ModulesAuto-importsDotenv file supportTypeScript TypesStrict project structuresrc/ Directory SupportEnvironment variables configurationRuntime environment variablesAuto Icon DiscoveryProject ScaffoldingEntrypoint BundlingBrowser Binary ConfigurationContent scriptsCLI Build CommandVite IntegrationVite Plugin SupportDirectory customizationAuto-importDevelopment ServerBackground scriptsRuntime ConfigBuilt-in environment variablesEnvironment Variable SupportESLint integrationVite BundlingManifest environment integrationFirefox Theme IconsDev Mode with Auto-reloadVite Config CustomizationPersistent ProfileTyped Configurationweb-ext IntegrationTypeScript SupportMV2/MV3 CompatibilityManifest Generationsrc Directory SupportPopup PagesBrowser StartupMulti-browser build matrix

Tags

Tags

CLIBrowser ExtensionManifest V3Developer toolsFrameworkViteCross-browserweb-extTypeScriptWeb ExtensionBuild tool

Ways to use it

Ways to use it

npm

typescript / unimport

sdk

typescript / wxt

sdk

typescript / https://vitejs.dev/guide/env-and-mode.html

npm

typescript / wxt

cli

typescript / https://wxt.dev/guide/essentials/entrypoints

npm

typescript / wxt

npm

typescript / @wxt-dev/auto-icons

npm

javascript / wxt

cli

javascript / Not filed

npm

javascript / web-ext

sdk

typescript / https://wxt.dev/guide/essentials/config/browser-startup

npm

TypeScript / @wxt-dev/module-react

npm

TypeScript / @wxt-dev/analytics

npm

TypeScript / @wxt-dev/auto-icons

Product features

Product features

Auto-imports

WXT modules add auto-imports to simplify configuration.

Background ​

Bookmarks ​

Build

Build extensions or start dev mode.

Config Files

Includes app.config.ts, package.json, tsconfig.json, web-ext.config.ts, and wxt.config.ts.

Config Helpers

Helper functions for defining project config.

Content Scripts ​

Cross-browser Support

First-class support for all major browsers.

Deeply Nested Entrypoints ​

Default Directories

WXT includes default directories like entrypoints, components, composables, hooks, and utils.

Defining Manifest Options ​

Developer Experience

Provides an awesome DX for building web extensions.

Devtools ​

Entrypoint filtering

Include or exclude entrypoints per browser using include/exclude options.

Entrypoint Types ​

Entrypoints ​

Env Files

Supports .env and .env.publish for environment variables.

Folder Structure ​

Generated Config

.wxt/ contains generated TypeScript config.

Hash Mode Routing

Guidance for configuring routers to use hash mode for web extensions.

History ​

Including Other Files ​

Manifest Config

Define manifest properties in wxt.config.ts.

Manifest as Function

Generate manifest dynamically based on browser, mode, command.

Manifest version targeting

Target MV2 or MV3 with CLI flags.

Modular packages

Provides optional packages for analytics, icons, i18n, storage, and more.

Multi-browser builds

Build for Chrome, Firefox, and other browsers with commands like 'wxt -b firefox'.

Multi-browser targeting

Build extensions for different browsers using the -b flag.

Multiple Apps Structure

Recommended folder structure for multiple apps in web extensions.

Output Directory

All build artifacts are placed in .output/ by default.

Per-browser options

Customize entrypoint options per browser.

Permissions Management

Manually add permissions to manifest.

Preconfigured Modules

WXT has preconfigured modules for React, Vue, Svelte, and Solid.

src/ Directory Config

Type-safe APIs

Types for building extensions or configuring WXT.

TypeScript support

All templates use TypeScript by default.

Unlisted Entrypoints ​

Version Management

Derives version and version_name from package.json.

Vite-powered

Leverages Vite for fast development and building.