arch-webext-vue

arch-webext-vue スキルは、Vite を基盤とする Vue 3、TypeScript、UnoCSS、webext-bridge を備えた WebExtension スターターである Vitesse WebExt を対象としています。ポップアップ／オプション／サイドパネルには Vite のマルチエントリーを使用し、バックグラウンドとコンテンツスクリプトには個別の設定を使用します。また、マニフェストの動的生成、共通のセットアップ、ストレージのパターンも備えています。このスタックでブラウザー拡張機能を作成または保守する際に、これらのスキルを活用してください。

このスキルは vitesse-webext（antfu-collective/vitesse-webext）を基にしており、2026-01-30 に生成されました。

コアリファレンス

トピック	説明	リファレンス
概要	機能、スタック、使用する場面	core-overview
プロジェクト構成	フォルダー、エントリーポイント、スクリプト	core-project-structure
マニフェスト	動的マニフェスト、MV3、Firefox と Chrome の違い	core-manifest
CI	GitHub Actions — lint、typecheck、build、test、任意の E2E	core-ci

機能

トピック	説明	リファレンス
Vite ビルド	複数の設定、共有設定、バックグラウンド／コンテンツスクリプト、開発用スタブ	features-vite-build
バックグラウンド	エントリーポイント、webext-bridge、サイドパネル、コンテンツスクリプトの HMR	features-background
コンテンツスクリプト	エントリーポイント、シャドウ DOM 内の Vue、スタイル	features-content-script
ビュー	ポップアップ、オプション、サイドパネル — エントリーパターン、setupApp	features-views
ストレージ	useWebExtensionStorage、共有ロジック	features-storage
コンテキスト間通信	コンテキスト間の webext-bridge メッセージング	features-cross-context
開発ワークフロー	pnpm dev と dev-firefox の違い、拡張機能の読み込み、スタブ HTML	features-dev-workflow
パッケージ化とリリース	pack:zip、crx、xpi、clear、start:chromium/firefox	features-pack-release
テスト	Vitest の単体テスト、Playwright E2E、フィクスチャ、extensionId	features-testing
型と環境	DEV、NAME、global/shim/modules.d.ts、env.ts	features-types-and-env
コンポーネントとアイコン	コンポーネントとアイコンの自動インポート、Iconify	features-components-icons

ベストプラクティス

トピック	説明	リファレンス
セットアップパターン	setupApp、common-setup、共有コンポーネント／スタイル	best-practices-setup-patterns
型安全なメッセージング	webext-bridge 用の shim.d.ts における ProtocolMap	best-practices-type-safe-messaging