vite.config.ts

import { defineConfig } from "vite";
import { resolve } from "path";
import {
  copyFileSync,
  existsSync,
  mkdirSync,
  readFileSync,
  writeFileSync,
  readdirSync,
  statSync,
} from "fs";

function htmlInlinePlugin() {
  return {
    name: "html-inline",
    generateBundle(options: any, bundle: any) {
      const htmlAsset = Object.keys(bundle).find((key) =>
        key.endsWith(".html"),
      );
      if (!htmlAsset) return;

      const htmlContent = readFileSync(
        resolve(__dirname, "src/popup/popup.html"),
        "utf-8",
      );

      const updatedHtml = htmlContent.replace(
        '<script type="module"></script>',
        '<script type="module" src="popup.js"></script>',
      );

      writeFileSync(resolve(__dirname, "dist/popup.html"), updatedHtml);

      delete bundle[htmlAsset];
    },
  };
}

export default defineConfig({
  build: {
    outDir: "dist",
    emptyOutDir: true,
    minify: "esbuild",
    rollupOptions: {
      input: {
        content: resolve(__dirname, "src/content/content.ts"),
        popup: resolve(__dirname, "src/popup/popup.ts"),
      },
      output: {
        entryFileNames: "[name].js",
        chunkFileNames: "[name].js",
        assetFileNames: "[name].[ext]",
      },
    },
    target: "es2020",
  },
  plugins: [
    htmlInlinePlugin(),
    {
      name: "copy-manifest-and-assets",
      writeBundle() {
        if (!existsSync("dist")) {
          mkdirSync("dist", { recursive: true });
        }

        copyFileSync("manifest.json", "dist/manifest.json");

        copyFileSync("src/content/content.css", "dist/content.css");

        let htmlContent = readFileSync(
          resolve(__dirname, "src/popup/popup.html"),
          "utf-8",
        );
        htmlContent = htmlContent.replace(
          '<script type="module"></script>',
          '<script type="module" src="popup.js"></script>',
        );
        writeFileSync(resolve(__dirname, "dist/popup.html"), htmlContent);

        if (existsSync("icons")) {
          if (!existsSync("dist/icons")) {
            mkdirSync("dist/icons", { recursive: true });
          }

          const iconFiles = readdirSync("icons");
          iconFiles.forEach((file) => {
            const sourcePath = `icons/${file}`;
            const destPath = `dist/icons/${file}`;

            if (statSync(sourcePath).isFile()) {
              copyFileSync(sourcePath, destPath);
            }
          });
        }
      },
    },
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  define: {
    "process.env.NODE_ENV": JSON.stringify(
      process.env.NODE_ENV || "production",
    ),
  },
});