chrome-extension-multiple-entry-points

問題

Chrome 拡張機能には複数のエントリーポイント（バックグラウンド、コンテンツ、ポップアップ）が必要ですが、最新のバンドラーは、Chrome が分離された実行コンテキスト間で読み込めない共有チャンクを生成します。

解決策

エントリーポイントごとに個別の Vite 設定ファイルを使用します。各ビルドでは、共有チャンクのない自己完結型の IIFE ファイルが生成されます。

プロジェクト構成

my-extension/
├── src/
│   ├── background/background.ts
│   ├── content/content.ts
│   ├── popup/
│   │   ├── popup.ts
│   │   ├── popup.html
│   │   └── popup.css
│   └── manifest.json
├── vite.background.config.ts
├── vite.content.config.ts
├── vite.popup.config.ts
└── package.json

package.json のスクリプト

{
  "scripts": {
    "build": "shx rm -rf dist && shx mkdir -p dist && pnpm run build:all && pnpm run copy:assets",
    "build:all": "pnpm run build:background && pnpm run build:content && pnpm run build:popup",
    "build:background": "vite build --config vite.background.config.ts",
    "build:content": "vite build --config vite.content.config.ts",
    "build:popup": "vite build --config vite.popup.config.ts",
    "copy:assets": "shx cp src/manifest.json src/popup/popup.html src/popup/popup.css dist/",
    "dev": "pnpm run build && pnpm run build --watch"
  },
  "devDependencies": {
    "@types/chrome": "^0.0.323",
    "typescript": "^5.8.3",
    "vite": "^6.3.5",
    "shx": "^0.3.4"
  }
}

Vite 設定のパターン

各設定は同じパターンに従い、異なるのは入力ファイルと出力ファイル名だけです。

import { defineConfig } from "vite"
import { resolve } from "path"

export default defineConfig({
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: resolve(__dirname, "src/background/background.ts"),
      output: {
        entryFileNames: "background.js",
        dir: "dist",
        format: "iife",
        inlineDynamicImports: true,
      },
    },
    target: "es2020",
  },
  define: {
    'process.env': {},
    'global': 'globalThis'
  },
})

主なルール

• format: "iife" を使用します。ES モジュールは使用しません
• inlineDynamicImports: true を設定します。共有チャンクは生成されません
• emptyOutDir: false を使用します。各ビルドは dist/ を上書きせず、そこに追加します
• クロスプラットフォーム対応のコピー／削除コマンドには shx を使用します
• バンドル間で依存関係が重複することを許容します。これは意図した動作です