vite.config.ts

import { defineConfig, Plugin } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { crx } from "@crxjs/vite-plugin";
import manifest from "./src/manifest";
import fs from "node:fs";
import path from "node:path";

/**
 * CRXJS beta bug: `service-worker-loader.js` is always written with
 * `http://localhost:5173/…` imports, even in production builds.
 * This plugin rewrites the file after bundling to import the actual
 * built background chunk.
 */

function fixServiceWorkerLoader(): Plugin {
  return {
    name: "fix-service-worker-loader",
    apply: "build",
    enforce: "post",
    closeBundle() {
      const outDir = path.resolve(__dirname, "dist");
      const loaderPath = path.join(outDir, "service-worker-loader.js");
      const assetsDir = path.join(outDir, "assets");
      if (!fs.existsSync(loaderPath) || !fs.existsSync(assetsDir)) return;

      // CRXJS names the background bundle after its entry: index.ts-<hash>.js
      const bgBundle = fs.readdirSync(assetsDir).find(f => /^index\.ts-.*\.js$/.test(f));
      if (!bgBundle) {
        console.warn("[fix-service-worker-loader] background bundle not found");
        return;
      }
      fs.writeFileSync(loaderPath, `import './assets/${bgBundle}';\n`);
      console.log(`[fix-service-worker-loader] rewrote loader → assets/${bgBundle}`);
    }
  };
}
export default defineConfig({
  publicDir: false,
  plugins: [react(), tailwindcss(), crx({
    manifest
  }), fixServiceWorkerLoader()],
  server: {
    /* Allow the Chrome extension's service worker (chrome-extension://<id>)
     * to fetch @vite/env, HMR scripts, and other dev-server resources.
     * Without this, service worker registration fails in dev mode with
     * "Status code: 3" and a CORS error. */
    cors: {
      origin: ["chrome-extension://*", /^chrome-extension:\/\//],
      methods: ["GET", "HEAD"]
    },
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  },
  build: {
    outDir: "dist",
  }
});