Simplify build process

Author: dborysov

package.json

@@ -17,7 +17,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vite build --mode injected",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "prettier:format": "prettier --write .",

public/manifest.json

@@ -19,7 +19,7 @@
   },
   "web_accessible_resources": [
     {
-      "resources": ["injected.js"],
+      "resources": ["injected.js", "assets/serialization.js"],
       "matches": ["<all_urls>"]
     }
   ],

src/content/content.ts

@@ -83,6 +83,7 @@ window.addEventListener("message", (event) => {
 function injectScript() {
   const script = document.createElement("script");
   script.src = chrome.runtime.getURL("injected.js");
+  script.type = "module";
   script.onload = () => {
     script.remove();
   };

vite.config.ts

@@ -1,51 +1,41 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tailwindcss from "@tailwindcss/vite";
-import { resolve } from "path";
 
-// https://vite.dev/config/
-export default defineConfig(({ mode }) =>
-  mode === "injected"
-    ? {
-        build: {
-          emptyOutDir: false,
-          lib: {
-            entry: resolve(__dirname, "src/injected/injected.ts"),
-            name: "injected",
-            fileName: () => "injected.js",
-            formats: ["iife"],
-          },
-          rollupOptions: {
-            output: {
-              extend: true,
-            },
-          },
-        },
-      }
-    : {
-        plugins: [react(), tailwindcss()],
-        build: {
-          rollupOptions: {
-            input: {
-              // DevTools panel (React app)
-              panel: "index.html",
-              // DevTools entry point
-              devtools: "devtools.html",
-              // Content script
-              content: "src/content/content.ts",
-              // Background service worker
-              background: "src/background/background.ts",
-            },
-            output: {
-              entryFileNames: (chunkInfo) => {
-                if (chunkInfo.name === "content") return "content.js";
-                if (chunkInfo.name === "background") return "background.js";
-                return "assets/[name]-[hash].js";
-              },
-              chunkFileNames: "assets/[name]-[hash].js",
-              assetFileNames: "assets/[name]-[hash].[ext]",
-            },
-          },
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  build: {
+    rollupOptions: {
+      input: {
+        // DevTools panel (React app)
+        panel: "index.html",
+        // DevTools entry point
+        devtools: "devtools.html",
+        // Content script
+        content: "src/content/content.ts",
+        // Background service worker
+        background: "src/background/background.ts",
+        injected: "src/injected/injected.ts",
+      },
+      output: {
+        entryFileNames: (chunkInfo) => {
+          switch (chunkInfo.name) {
+            case "content":
+              return "content.js";
+            case "background":
+              return "background.js";
+            case "injected":
+              return "injected.js";
+            default:
+              return "assets/[name]-[hash].js";
+          }
         },
+        chunkFileNames: ({ name }) =>
+          name === "serialization"
+            ? "assets/serialization.js"
+            : "assets/[name]-[hash].js",
+        assetFileNames: "assets/[name]-[hash].[ext]",
       },
-);
+    },
+  },
+});