WXT

次世代 Web 拡張フレームワーク。It's like Nuxt, but for Web Extensions.

1 — 概要
何か

WXT はブラウザ拡張（Chrome / Firefox / Safari 等）を開発するための次世代フレームワーク。Nuxt のように「ファイルベースのエントリ」「HMR」「型安全」を備え、MV2 と MV3 の両方に対応する。Vue / React / Svelte / Solid などフロントエンドフレームワークに依存せず使え、モジュールシステムで拡張間のコード共有もできる。MIT ライセンスのオープンソース。

MV2/MV3両対応
HMR開発体験
TS型安全
全ブラウザ対応
2 — 特徴
主な機能
  • 全ブラウザ対応 — Chrome, Firefox, Safari など
  • MV2 / MV3 両対応 — Manifest V2 と V3 をサポート
  • Dev モード — HMR と高速リロード
  • ファイルベースエントリ — ディレクトリ・ファイル名で popup / background / content 等を定義
  • TypeScript — 最初から TS を前提
  • Auto-imports — コンポーネントや API の自動インポート
  • 自動公開 — ストア向けのパブリッシュ支援
  • フレームワーク非依存 — Vue, React, Svelte, Solid などで UI を書ける
  • WXT モジュール — 拡張間でコードを再利用するモジュールシステム
  • ブートストラップ — wxt init で新規プロジェクトをすぐ作成
  • バンドル分析 — ビルドサイズの可視化
  • リモート URL インポート — リモート URL をダウンロードしてバンドル可能
3 — クイックスタート
新規プロジェクト

次のいずれかでプロジェクトを初期化する。

# npm
npx wxt@latest init

# pnpm
pnpm dlx wxt@latest init

# bun
bunx wxt@latest init

詳細は公式の Installation Guide を参照。

4 — パッケージ構成
リポジトリ構成（repos/wxt）

WXT 本体はモノレポ。コアは packages/wxt、フロント統合は module-vue / module-react 等のパッケージ、テンプレートは templates/ に格納される。

主なパッケージ（packages/）

パッケージ説明
wxtコア CLI・ビルド・設定。esbuild ベース。
@wxt-dev/browserブラウザ別の API 抽象化。
@wxt-dev/storageストレージユーティリティ。
module-vueVue 用 WXT モジュール。
module-reactReact 用 WXT モジュール。
module-svelteSvelte 用 WXT モジュール。
module-solidSolid 用 WXT モジュール。
runner開発サーバ・拡張の起動。
analytics分析関連。
i18n国際化。

テンプレート（templates/）

vanilla, vue, react, svelte, solid の各テンプレートが用意され、wxt init で選択できる。

公式・関連