wxt

WXT - ブラウザー拡張機能フレームワーク

使用する場合

以下に該当する場合に、このスキルを適用してください：

• プロジェクトのルートに wxt.config.ts がある
• コードで defineBackground、defineContentScript、defineUnlistedScript を使用している
• package.json に依存関係として wxt が含まれている
• エントリーポイントディレクトリに拡張機能のエントリーファイルがある
• コードで #imports または wxt/* からインポートしている

クイックリファレンス

トピック	リファレンス
設定、マニフェスト、環境変数、TypeScript	references/config.md
エントリーポイント（バックグラウンド、HTML ページ、非公開スクリプト）	references/entrypoints.md
コンテンツスクリプト（UI、メインワールド、SPA）	references/content-scripts.md
ストレージ API、defineItem、マイグレーション、ウォッチャー	references/storage.md
メッセージング（コンテキスト間通信）	references/messaging.md
WxtVitest と fakeBrowser を使用したテスト	references/testing.md
WXT モジュール（使用方法と作成方法）	references/modules.md
複数ブラウザー向けのビルドとランタイム検出	references/multi-browser.md
Vue、React、Svelte、Solid のセットアップ	references/frontend-frameworks.md
一般的なパターンとアンチパターン	references/patterns.md

最も一般的なパターン

// entrypoints/background.ts
export default defineBackground({
  main() {
    // ALL runtime code must be inside main() - cannot be async
    browser.runtime.onInstalled.addListener(() => {
      console.log('Extension installed');
    });
  },
});

重要：main() を async にすることはできません。main() の外にあるコードは、Node.js でビルド時に実行されます。