WXTとは？Chrome・Firefox向けWeb拡張を開発するTypeScriptフレームワーク

ページ内ナビ

概要

WXTは、Web Extension開発向けのframeworkです。Manifest V2/V3、複数browser、TypeScript、file-based entrypoint、HMR、automatic manifest generationに対応し、React・Vue・Svelteなど任意のfrontend frameworkと組み合わせてextensionを開発できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

entrypointからmanifestとbundleを生成する

background、content script、popupなどをentrypointとして配置し、wxt.config.tsやentrypoint metadataからmanifestを組み立てます。build時にはtarget browser向けのmanifestとbundleを.outputへ生成します。

出典：[2][3][4]

MV2/MV3と複数browserを同じprojectから扱う

READMEは複数browserとManifest V2/V3の両方を対象にし、manifest設定の一部はtargetに応じて変換できます。developmentではHMRとfast reloadを利用できます。

出典：[2][4]

向いている用途

Web拡張をTypeScript中心で継続開発したい場合に向く

Chrome・Firefox等へ同じcodebaseから配布し、popup、content script、background処理を分離しつつ、React・Vue・Svelte等を選択したいextension開発に向きます。

出典：[2][3]

導入前の確認

v0.21.4はNode.js 22以上を前提にする

WXT v0.21.4のpackage metadataはNode.js 22以上、Bunを使う場合は1.2.0以上を要求します。既存projectへ導入する場合はCI・local runtimeのversionを先に揃えます。

出典：[5]

browserごとのpermission差はapplication側で分岐する

manifestのMV2/MV3変換は支援されますが、browserごとに利用可能なpermissionは異なります。公式guideもtarget browserに必要なpermissionだけを渡すよう、設定関数での分岐を案内しています。

出典：[4]

参考にした公式資料

[1]wxt-dev/wxt repository(2026-09-30)
[2]WXT README(2026-09-30)
[3]WXT installation guide(2026-09-30)
[4]WXT manifest configuration guide(2026-09-30)
[5]WXT v0.21.4 package metadata(2026-09-30)
[6]WXT v0.21.4 release(2026-09-30)
[7]WXT MIT license(2026-09-30)

編集部からの補足

browser extension特有のentrypointやmanifest差分をproject構造へ落とし込めるため、複数browserを継続的に保守するprojectで特に効果があります。一方、permissionはbrowser差が残るため、自動変換だけに任せずtarget別確認が必要です。

3ステップで試す

1
WXT projectを作成
公式init commandを実行し、templateやpackage managerをpromptで選択します。
npx wxt@latest init
2
development modeを起動
生成されたproject directoryへ移動してdev scriptを実行すると、extensionを読み込んだbrowserが起動します。
npm run dev
3
production buildを生成
target browser向けのmanifestとbundleを.output配下へ生成し、permissionやentrypointを確認します。
npm run build

公式READMEで確認

成長

成長の推移 · 直近30日

10,555 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 5
Open PR: 57

開発アクティビティを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

build-tool
dev-server
hmr
wxt
chrome-extensions

Stars: 10,555
Forks: 569
Watchers: 25
Open Issues: 166
Contributors: 282
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/29