@crxjs/vite-plugin 2.5.0 → 2.6.1

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { simple } from 'acorn-walk';
 import { createHash } from 'crypto';
 import debug$5 from 'debug';
 import { join, normalize, dirname, basename, isAbsolute, relative, resolve, parse as parse$1 } from 'pathe';
-import { Subject, filter, ReplaySubject, switchMap, of, startWith, map, BehaviorSubject, mergeMap, firstValueFrom, takeUntil, first, toArray, retry, concatWith, Subscription, buffer } from 'rxjs';
+import { Subject, filter, ReplaySubject, switchMap, of, startWith, tap, debounceTime, map, share, BehaviorSubject, mergeMap, firstValueFrom, takeUntil, first, toArray, retry, concatWith, Subscription, buffer } from 'rxjs';
 import fsx from 'fs-extra';
 import { performance } from 'perf_hooks';
 import { rollup } from 'rollup';
@@ -11,7 +11,7 @@ import { readFile as readFile$1 } from 'fs/promises';
 import MagicString from 'magic-string';
 import { build, mergeConfig, createLogger, version } from 'vite';
 import convertSourceMap from 'convert-source-map';
-import colors from 'picocolors';
+import pc from 'picocolors';
 import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
 import { glob, isDynamicPattern } from 'tinyglobby';
@@ -244,7 +244,13 @@ function getOutputPath(server, fileName) {
   const target = isAbsolute(outDir) ? join(outDir, fileName) : join(root, outDir, fileName);
   return target;
 }
-function getViteUrl({ type, id }) {
+function getViteUrl({ type, id }, { timestamp = false } = {}) {
+  if (timestamp && !id.startsWith("/@") && !id.includes("?v=")) {
+    const t = `t=${Date.now()}` + (id.includes("?") ? "&" : "");
+    const parts = id.split("?");
+    parts[1] = typeof parts[1] === "undefined" ? t : t + parts[1];
+    id = parts.join("?");
+  }
   if (type === "asset") {
     throw new Error(`File type "${type}" not implemented.`);
   } else if (type === "iife") {
@@ -378,6 +384,52 @@ const pluginBackground = () => {
   ];
 };
 
+const extensionOrigins = [/^chrome-extension:\/\//, /^moz-extension:\/\//];
+function isExtensionOrigin(origin) {
+  return origin ? extensionOrigins.some((pattern) => pattern.test(origin)) : false;
+}
+function addExtensionOrigins(origin) {
+  if (origin === true)
+    return true;
+  if (typeof origin === "function") {
+    return (requestOrigin, cb) => {
+      if (isExtensionOrigin(requestOrigin)) {
+        cb(null, true);
+        return;
+      }
+      origin(requestOrigin, cb);
+    };
+  }
+  if (Array.isArray(origin))
+    return [...origin, ...extensionOrigins];
+  if (origin)
+    return [origin, ...extensionOrigins];
+  return extensionOrigins;
+}
+function addExtensionCors(cors) {
+  if (cors === true)
+    return true;
+  if (cors && typeof cors === "object") {
+    return {
+      ...cors,
+      origin: addExtensionOrigins(cors.origin)
+    };
+  }
+  return { origin: extensionOrigins };
+}
+function pluginExtensionCors() {
+  return {
+    name: "crx:extension-cors",
+    apply: "serve",
+    config(config) {
+      config.server = {
+        ...config.server,
+        cors: addExtensionCors(config.server?.cors)
+      };
+    }
+  };
+}
+
 var contentHmrPort = "function isCrxHMRPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nclass HMRPort {\n  port;\n  callbacks = /* @__PURE__ */ new Map();\n  constructor() {\n    setInterval(() => {\n      try {\n        this.port?.postMessage({ data: \"ping\" });\n      } catch (error) {\n        if (error instanceof Error && error.message.includes(\"Extension context invalidated.\")) {\n          location.reload();\n        } else\n          throw error;\n      }\n    }, __CRX_HMR_TIMEOUT__);\n    setInterval(this.initPort, 5 * 60 * 1e3);\n    this.initPort();\n  }\n  initPort = () => {\n    this.port?.disconnect();\n    this.port = chrome.runtime.connect({ name: \"@crx/client\" });\n    this.port.onDisconnect.addListener(this.handleDisconnect.bind(this));\n    this.port.onMessage.addListener(this.handleMessage.bind(this));\n    this.port.postMessage({ type: \"connected\" });\n  };\n  handleDisconnect = () => {\n    if (this.callbacks.has(\"close\"))\n      for (const cb of this.callbacks.get(\"close\")) {\n        cb({ wasClean: true });\n      }\n  };\n  handleMessage = (message) => {\n    const forward = (data) => {\n      if (this.callbacks.has(\"message\"))\n        for (const cb of this.callbacks.get(\"message\")) {\n          cb({ data });\n        }\n    };\n    const payload = JSON.parse(message.data);\n    if (isCrxHMRPayload(payload)) {\n      if (payload.event === \"crx:runtime-reload\") {\n        if (__CRX_LIVE_RELOAD__) {\n          console.log(\"[crx] runtime reload\");\n          setTimeout(() => location.reload(), 500);\n        } else {\n          console.log(\"[crx] runtime reload suppressed (liveReload disabled)\");\n        }\n      } else {\n        forward(JSON.stringify(payload.data));\n      }\n    } else {\n      forward(message.data);\n    }\n  };\n  addEventListener = (event, callback) => {\n    const cbs = this.callbacks.get(event) ?? /* @__PURE__ */ new Set();\n    cbs.add(callback);\n    this.callbacks.set(event, cbs);\n  };\n  send = (data) => {\n    if (this.port)\n      this.port.postMessage({ data });\n    else\n      throw new Error(\"HMRPort is not initialized\");\n  };\n}\n\nexport { HMRPort };\n";
 
 var contentDevLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    if (__PREAMBLE__)\n      await import(\n        /* @vite-ignore */\n        chrome.runtime.getURL(__PREAMBLE__)\n      );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__CLIENT__)\n    );\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n    onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });\n  })().catch(console.error);\n\n})();\n";
@@ -398,9 +450,10 @@ contentScripts.change$.pipe(filter(RxMap.isChangeType.set)).subscribe(({ map, va
     "resolvedId",
     "scriptId"
   ];
-  for (const keyName of keyNames) {
-    const key = value[keyName];
-    if (typeof key === "undefined" || map.has(key)) {
+  const keys = keyNames.map((keyName) => value[keyName]);
+  keys.push(value.id.replace(/^\//, ""));
+  for (const key of keys) {
+    if (typeof key === "undefined" || map.get(key) === value) {
       continue;
     } else {
       map.set(key, value);
@@ -462,11 +515,59 @@ fileWriterEvent$.pipe(
   filter((e) => e.type === "build_start"),
   switchMap((e) => of(e))
 );
-const allFilesReady$ = buildEnd$.pipe(
-  switchMap(() => outputFiles.change$.pipe(startWith({ type: "start" }))),
-  map(() => [...outputFiles.values()]),
-  switchMap((files) => Promise.allSettled(files.map(({ file }) => file)))
+const allFilesReadyDebounceMs = 100;
+let currentAllFilesReadyGeneration = 0;
+let completedAllFilesReadyGeneration = 0;
+let lastAllFilesReadyResults;
+const allFilesReadyState$ = buildEnd$.pipe(
+  switchMap(
+    () => outputFiles.change$.pipe(
+      startWith({ type: "start" }),
+      tap(() => {
+        currentAllFilesReadyGeneration += 1;
+      }),
+      debounceTime(allFilesReadyDebounceMs)
+    )
+  ),
+  map(() => ({
+    generation: currentAllFilesReadyGeneration,
+    files: [...outputFiles.values()]
+  })),
+  switchMap(async ({ generation, files }) => {
+    const seen = /* @__PURE__ */ new Set();
+    const results = await Promise.allSettled(
+      files.map((file) => waitForOutputFile(file, seen))
+    );
+    return { generation, results };
+  }),
+  tap(({ generation, results }) => {
+    completedAllFilesReadyGeneration = generation;
+    lastAllFilesReadyResults = results;
+  }),
+  share()
+);
+const allFilesReady$ = allFilesReadyState$.pipe(
+  map(({ results }) => results)
 );
+async function waitForOutputFile(file, seen = /* @__PURE__ */ new Set()) {
+  if (seen.has(file))
+    return;
+  seen.add(file);
+  const { deps } = await file.file;
+  await Promise.all(deps.map((dep) => waitForOutputFile(dep, seen)));
+}
+async function waitForAllFilesReadyResults() {
+  const targetGeneration = currentAllFilesReadyGeneration;
+  if (lastAllFilesReadyResults && completedAllFilesReadyGeneration >= targetGeneration) {
+    return lastAllFilesReadyResults;
+  }
+  const { results } = await firstValueFrom(
+    allFilesReadyState$.pipe(
+      filter(({ generation }) => generation >= targetGeneration)
+    )
+  );
+  return results;
+}
 const timestamp$ = new BehaviorSubject(Date.now());
 allFilesReady$.subscribe(() => {
   timestamp$.next(Date.now());
@@ -509,7 +610,14 @@ function prepScript(fileName, script) {
     // get script contents from dev server
     mergeMap(async ({ server }) => {
       const target = getOutputPath(server, fileName);
-      const viteUrl = getViteUrl(script);
+      const originalViteUrl = getViteUrl(script);
+      const isVueSfcQuery = script.id.includes("?vue");
+      const viteUrl = getViteUrl(script, { timestamp: isVueSfcQuery });
+      if (isVueSfcQuery) {
+        const module = await server.moduleGraph.getModuleByUrl(originalViteUrl);
+        if (module)
+          server.moduleGraph.invalidateModule(module);
+      }
       const transformResult = await server.transformRequest(viteUrl);
       if (!transformResult)
         throw new TypeError(`Unable to load "${script.id}" from server.`);
@@ -662,11 +770,16 @@ function prepIifeScript(fileName, script) {
   );
 }
 async function allFilesReady() {
-  await firstValueFrom(allFilesReady$);
+  await waitForAllFilesReadyResults();
 }
 
 const { outputFile } = fsx;
 const debug$4 = _debug("file-writer");
+function queueWrite(script, previous) {
+  if (!previous)
+    return write(script);
+  return previous.file.catch(() => void 0).then(() => write(script));
+}
 async function start({
   server
 }) {
@@ -708,18 +821,24 @@ function add(script) {
     file = formatFileData({
       ...script,
       fileName,
-      file: write(script)
+      file: queueWrite(script)
     });
     outputFiles.set(file.fileName, file);
     debug$4("add: stored new file %s", file.fileName);
   } else {
     const isVirtualModule = script.id.startsWith("/@id/") || script.id.startsWith("/__");
-    if (isVirtualModule) {
+    const isTimestampedModule = script.type === "module" && /[?&]t=\d+/.test(script.id);
+    if (isVirtualModule || isTimestampedModule) {
       debug$4(
-        "add: virtual module already exists, triggering re-write for %s",
+        "add: module already exists, triggering re-write for %s",
         fileName
       );
-      file.file = write(script);
+      file = formatFileData({
+        ...file,
+        ...script,
+        fileName,
+        file: queueWrite(script, file)
+      });
       outputFiles.set(fileName, file);
     }
   }
@@ -736,7 +855,7 @@ function update(_id) {
     const scriptFile = outputFiles.get(fileName);
     if (scriptFile) {
       debug$4("update: found file, calling write()");
-      scriptFile.file = write({ id, type });
+      scriptFile.file = queueWrite({ id, type }, scriptFile);
       updatedFiles.push(scriptFile);
       outputFiles.set(fileName, scriptFile);
     }
@@ -794,7 +913,7 @@ const pluginContentScripts = () => {
     });
     if (worldMainIds.size) {
       const name = `[${pluginName}]`;
-      const message = colors.yellow(
+      const message = pc.yellow(
         [
           `${name} Some content-scripts don't support HMR because the world is MAIN:`,
           ...[...worldMainIds].map((id) => `  ${id}`)
@@ -823,7 +942,7 @@ const pluginContentScripts = () => {
           try {
             const react = await import('@vitejs/plugin-react');
             preambleCode = react.default.preambleCode;
-          } catch (error) {
+          } catch {
             preambleCode = false;
           }
         }
@@ -898,41 +1017,50 @@ const pluginContentScripts = () => {
         };
       },
       generateBundle(_options, bundle) {
-        for (const [key, script] of contentScripts)
-          if (key === script.refId) {
-            if (script.type === "module") {
-              const fileName = this.getFileName(script.refId);
-              script.fileName = fileName;
-            } else if (script.type === "loader") {
-              const fileName = this.getFileName(script.refId);
-              script.fileName = fileName;
-              const bundleFileInfo = bundle[fileName];
-              const shouldUseLoader = !(bundleFileInfo.type === "chunk" && bundleFileInfo.imports.length === 0 && bundleFileInfo.dynamicImports.length === 0 && bundleFileInfo.exports.length === 0);
-              if (shouldUseLoader) {
-                const refId = this.emitFile({
-                  type: "asset",
-                  name: getFileName({
-                    type: "loader",
-                    id: basename(script.id)
-                  }),
-                  source: worldMainIds.has(script.id) ? createProMainLoader({
-                    fileName: `./${fileName.split("/").at(-1)}`
-                  }) : createProLoader({ fileName })
-                });
-                script.loaderName = this.getFileName(refId);
-              } else {
-                bundleFileInfo.code = `(function(){${bundleFileInfo.code}})()
-`;
-              }
-            } else if (script.type === "iife") {
-              continue;
-            }
-            contentScripts.set(script.refId, formatFileData(script));
-          }
+        finalizeBuildContentScripts(this, bundle, worldMainIds);
       }
     }
   ];
 };
+function finalizeBuildContentScripts(context, bundle, worldMainIds = /* @__PURE__ */ new Set()) {
+  const processed = /* @__PURE__ */ new Set();
+  for (const [key, script] of contentScripts) {
+    if (key !== script.refId || processed.has(script))
+      continue;
+    processed.add(script);
+    if (script.type === "module") {
+      script.fileName = script.fileName ?? context.getFileName(script.refId);
+    } else if (script.type === "loader") {
+      const fileName = script.fileName ?? context.getFileName(script.refId);
+      script.fileName = fileName;
+      const bundleFileInfo = bundle[fileName];
+      if (bundleFileInfo?.type !== "chunk")
+        continue;
+      const shouldUseLoader = !(bundleFileInfo.imports.length === 0 && bundleFileInfo.dynamicImports.length === 0 && bundleFileInfo.exports.length === 0);
+      if (shouldUseLoader) {
+        if (typeof script.loaderName === "undefined") {
+          const refId = context.emitFile({
+            type: "asset",
+            name: getFileName({
+              type: "loader",
+              id: basename(script.id)
+            }),
+            source: worldMainIds.has(script.id) ? createProMainLoader({
+              fileName: `./${fileName.split("/").at(-1)}`
+            }) : createProLoader({ fileName })
+          });
+          script.loaderName = context.getFileName(refId);
+        }
+      } else if (typeof script.loaderName === "undefined" && !bundleFileInfo.code.startsWith("(function(){")) {
+        bundleFileInfo.code = `(function(){${bundleFileInfo.code}})()
+`;
+      }
+    } else if (script.type === "iife") {
+      continue;
+    }
+    contentScripts.set(script.refId, formatFileData(script));
+  }
+}
 
 const pluginContentScriptsCss = () => {
   let injectCss;
@@ -1027,45 +1155,22 @@ const pluginContentScriptsIife = () => {
       name: pluginName,
       apply: "build",
       enforce: "post",
-      async generateBundle(options, bundle) {
+      async generateBundle() {
         const opts = await getOptions({ plugins: config.plugins });
         const _manifest = opts.manifest;
         const manifest = typeof _manifest === "function" ? await _manifest({ command: "build", mode: config.mode }) : await Promise.resolve(_manifest);
         const standaloneFiles = (opts.contentScripts?.standaloneFiles || []).map(
-          (f) => f.replace(/^\//, "")
+          normalizeContentScriptPath
+        );
+        const iifeEntries = collectIifeEntries(
+          manifest,
+          standaloneFiles,
+          config.root
         );
-        const isStandaloneFile = (file) => {
-          const normalized = file.replace(/^\//, "");
-          return standaloneFiles.includes(normalized);
-        };
-        const iifeEntries = [];
-        if (manifest.content_scripts) {
-          for (const { js = [], matches = [] } of manifest.content_scripts) {
-            for (const file of js) {
-              if (isIifeContentScript(file) || isStandaloneFile(file)) {
-                const id = join(config.root, file);
-                iifeEntries.push({ file, id, matches });
-              }
-            }
-          }
-        }
-        for (const [, script] of contentScripts.entries()) {
-          if (script.type === "iife" && script.isDynamicScript) {
-            const id = join(config.root, script.id);
-            if (!iifeEntries.some((e) => e.id === id)) {
-              iifeEntries.push({
-                file: script.id,
-                id,
-                matches: script.matches ?? [],
-                isDynamic: true
-              });
-            }
-          }
-        }
         if (iifeEntries.length === 0)
           return;
         console.log(
-          colors.cyan(`
+          pc.cyan(`
 [${pluginName}] Building ${iifeEntries.length} content script(s) as IIFE...`)
         );
         for (const entry of iifeEntries) {
@@ -1073,52 +1178,106 @@ const pluginContentScriptsIife = () => {
           try {
             const iifeConfig = createIifeConfig(config, entry.id, outputFileName);
             const result = await build(iifeConfig);
-            if ("on" in result) {
-              console.error(colors.red(`  Unexpected watcher result for ${entry.file}`));
-              continue;
-            }
-            const outputs = Array.isArray(result) ? result.flatMap((r) => "output" in r ? r.output : []) : result.output;
-            for (const chunk of outputs) {
-              if (chunk.type === "chunk" && chunk.isEntry) {
-                bundle[outputFileName] = {
-                  ...chunk,
-                  fileName: outputFileName
-                };
-                const existingScript = contentScripts.get(entry.file);
-                if (existingScript) {
-                  existingScript.fileName = outputFileName;
-                  contentScripts.set(entry.file, formatFileData(existingScript));
-                } else {
-                  contentScripts.set(
-                    entry.file,
-                    formatFileData({
-                      type: "iife",
-                      id: entry.file,
-                      refId: entry.file,
-                      matches: entry.matches,
-                      fileName: outputFileName
-                    })
-                  );
-                }
-                console.log(
-                  colors.green(`  \u2713 ${basename(entry.file)} \u2192 ${outputFileName}`)
-                );
-              }
-            }
+            const outputs = getBuildOutputs(result, entry.file);
+            emitIifeOutputs(this, outputs, entry.file, outputFileName);
+            registerIifeContentScript(entry, outputFileName);
+            console.log(
+              pc.green(`  \u2713 ${basename(entry.file)} \u2192 ${outputFileName}`)
+            );
           } catch (error) {
             console.error(
-              colors.red(`  \u2717 Failed to build ${entry.file}:`),
+              pc.red(`  \u2717 Failed to build ${entry.file}:`),
               error
             );
             throw error;
           }
         }
-        console.log(colors.cyan(`[${pluginName}] IIFE build complete
+        console.log(pc.cyan(`[${pluginName}] IIFE build complete
 `));
       }
     }
   ];
 };
+function normalizeContentScriptPath(file) {
+  return file.replace(/^\//, "");
+}
+function isStandaloneFile(file, standaloneFiles) {
+  return standaloneFiles.includes(normalizeContentScriptPath(file));
+}
+function collectIifeEntries(manifest, standaloneFiles, root) {
+  const entries = [];
+  const entryIds = /* @__PURE__ */ new Set();
+  const addEntry = (entry) => {
+    if (entryIds.has(entry.id))
+      return;
+    entryIds.add(entry.id);
+    entries.push(entry);
+  };
+  for (const { js = [], matches = [] } of manifest.content_scripts ?? []) {
+    for (const file of js) {
+      if (isIifeContentScript(file) || isStandaloneFile(file, standaloneFiles)) {
+        addEntry({ file, id: join(root, file), matches });
+      }
+    }
+  }
+  for (const [, script] of contentScripts.entries()) {
+    if (script.type !== "iife" || !script.isDynamicScript)
+      continue;
+    addEntry({
+      file: script.id,
+      id: join(root, script.id),
+      matches: script.matches ?? []
+    });
+  }
+  return entries;
+}
+function getBuildOutputs(result, entryFile) {
+  if ("on" in result) {
+    throw new Error(`Unexpected watcher result for "${entryFile}"`);
+  }
+  return Array.isArray(result) ? result.flatMap((r) => r.output) : result.output;
+}
+function emitIifeOutputs(context, outputs, entryFile, outputFileName) {
+  const entryChunk = outputs.find(
+    (output) => output.type === "chunk" && output.isEntry
+  );
+  if (!entryChunk) {
+    throw new Error(`Unable to generate IIFE bundle for "${entryFile}"`);
+  }
+  context.emitFile({
+    type: "asset",
+    fileName: outputFileName,
+    source: entryChunk.code
+  });
+  for (const output of outputs) {
+    if (output.type === "asset") {
+      if (output.fileName !== outputFileName && output.fileName !== "manifest.json" && !output.fileName.startsWith(".vite/")) {
+        context.emitFile({
+          type: "asset",
+          fileName: output.fileName,
+          source: output.source
+        });
+      }
+    } else if (!output.isEntry) {
+      context.emitFile({
+        type: "asset",
+        fileName: output.fileName,
+        source: output.code
+      });
+    }
+  }
+}
+function registerIifeContentScript(entry, outputFileName) {
+  const existingScript = contentScripts.get(entry.file);
+  const script = existingScript ? { ...existingScript, fileName: outputFileName } : {
+    type: "iife",
+    id: entry.file,
+    refId: entry.file,
+    matches: entry.matches,
+    fileName: outputFileName
+  };
+  contentScripts.set(entry.file, formatFileData(script));
+}
 function getIifeOutputPath(file) {
   const normalizedFile = file.replace(/^\//, "");
   const dir = dirname(normalizedFile);
@@ -1188,6 +1347,36 @@ const pluginDynamicContentScripts = () => {
           );
         }).catch(() => void 0);
       },
+      buildStart() {
+        if (config.command === "build") {
+          const dynamicScripts = [];
+          for (const [key, script] of contentScripts) {
+            if (script.isDynamicScript && key === script.scriptId) {
+              dynamicScripts.push(script);
+            }
+          }
+          contentScripts.clear();
+          for (const script of dynamicScripts) {
+            const absoluteId = script.id.startsWith("/") ? `${config.root}${script.id}` : `${config.root}/${script.id}`;
+            const refId = this.emitFile({
+              type: "chunk",
+              id: absoluteId,
+              name: basename(script.id)
+            });
+            contentScripts.set(
+              script.id,
+              formatFileData({
+                type: script.type,
+                id: script.id,
+                isDynamicScript: true,
+                refId,
+                scriptId: script.scriptId,
+                matches: script.matches
+              })
+            );
+          }
+        }
+      },
       configureServer(server) {
         return () => {
           server.middlewares.use(async (req, res, next) => {
@@ -1249,7 +1438,10 @@ const pluginDynamicContentScripts = () => {
                 refId = this.emitFile({
                   type: "chunk",
                   id,
-                  name: basename(id)
+                  name: basename(id),
+                  // Preserve content script entry exports so the build finalizer
+                  // can decide whether the script needs a loader wrapper.
+                  preserveSignature: "exports-only"
                 });
               } else {
                 refId = scriptId;
@@ -1283,9 +1475,29 @@ const pluginDynamicContentScripts = () => {
         const index = id.indexOf("?scriptId=");
         if (index > -1) {
           const scriptId = id.slice(index + "?scriptId=".length);
-          const script = contentScripts.get(scriptId);
+          let script = contentScripts.get(scriptId);
+          if (!script && config.command === "build") {
+            const fileId = id.slice(0, index);
+            const refId = this.emitFile({
+              type: "chunk",
+              id: fileId,
+              name: basename(fileId)
+            });
+            script = formatFileData({
+              type: "loader",
+              id: relative(config.root, fileId),
+              isDynamicScript: true,
+              refId,
+              scriptId,
+              matches: []
+            });
+            contentScripts.set(script.id, script);
+          }
+          if (!script) {
+            throw new Error(`Content script not found for scriptId: "${scriptId}"`);
+          }
           if (config.command === "build") {
-            return `export default import.meta.CRX_DYNAMIC_SCRIPT_${script.refId};`;
+            return `export default import.meta.CRX_DYNAMIC_SCRIPT_${script.scriptId};`;
           } else if (typeof script.fileName === "string") {
             return `export default ${JSON.stringify(script.fileName)};`;
           } else {
@@ -1493,6 +1705,89 @@ const isCustomPayload = (p) => {
   return p.type === "custom";
 };
 const hmrPayload$ = new Subject();
+function withTimestamp(id, timestamp) {
+  if (id.includes("?t=") || id.includes("&t="))
+    return id;
+  const t = `t=${timestamp}` + (id.includes("?") ? "&" : "");
+  const parts = id.split("?");
+  parts[1] = typeof parts[1] === "undefined" ? t : t + parts[1];
+  return parts.join("?");
+}
+function getUpdatePayloadFileIds(p, { timestamp = false } = {}) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const u of p.updates) {
+    for (const id of [u.path, u.acceptedPath]) {
+      const isVirtualModule = id.startsWith("/@id/") || id.startsWith("/__");
+      const isQueryModule = id.includes("?");
+      if (isVirtualModule || isQueryModule)
+        ids.add(timestamp ? withTimestamp(id, u.timestamp) : id);
+    }
+  }
+  return [...ids];
+}
+function mapVitePayloadForCrx(p) {
+  switch (p.type) {
+    case "full-reload": {
+      const fullReload = {
+        type: "full-reload",
+        path: p.path && getViteUrl({ id: p.path, type: "module" })
+      };
+      return fullReload;
+    }
+    case "prune": {
+      const prune = {
+        type: "prune",
+        paths: p.paths.map((id) => getViteUrl({ id, type: "module" }))
+      };
+      return prune;
+    }
+    case "update": {
+      debug$3("update payload with %d updates", p.updates.length);
+      for (const u of p.updates) {
+        debug$3(
+          "update item: path=%s acceptedPath=%s type=%s",
+          u.path,
+          u.acceptedPath,
+          u.type
+        );
+      }
+      const update_ = {
+        type: "update",
+        updates: p.updates.map(({ acceptedPath: ap, path: p2, ...rest }) => ({
+          ...rest,
+          acceptedPath: prefix$1("/", getFileName({ id: ap, type: "module" })),
+          path: prefix$1("/", getFileName({ id: p2, type: "module" }))
+        }))
+      };
+      return update_;
+    }
+    default:
+      return p;
+  }
+}
+async function prepareVitePayloadForCrx(p) {
+  if (p.type === "update") {
+    const pendingFiles = getUpdatePayloadFileIds(p, {
+      timestamp: true
+    }).flatMap((id) => {
+      debug$3("updating payload module: %s", id);
+      return update(id).map((file) => file.file);
+    });
+    await Promise.all(pendingFiles);
+    await allFilesReady();
+  }
+  return mapVitePayloadForCrx(p);
+}
+function shouldForwardCrxPayload(p) {
+  switch (p.type) {
+    case "prune":
+      return p.paths.length > 0;
+    case "update":
+      return p.updates.length > 0;
+    default:
+      return true;
+  }
+}
 const crxHMRPayload$ = hmrPayload$.pipe(
   filter((p) => !isCustomPayload(p)),
   buffer(allFilesReady$),
@@ -1509,63 +1804,8 @@ const crxHMRPayload$ = hmrPayload$.pipe(
       payloads.push(fullReload);
     return payloads;
   }),
-  map((p) => {
-    switch (p.type) {
-      case "full-reload": {
-        const fullReload = {
-          type: "full-reload",
-          path: p.path && getViteUrl({ id: p.path, type: "module" })
-        };
-        return fullReload;
-      }
-      case "prune": {
-        const prune = {
-          type: "prune",
-          paths: p.paths.map((id) => getViteUrl({ id, type: "module" }))
-        };
-        return prune;
-      }
-      case "update": {
-        debug$3("update payload with %d updates", p.updates.length);
-        for (const u of p.updates) {
-          debug$3(
-            "update item: path=%s acceptedPath=%s type=%s",
-            u.path,
-            u.acceptedPath,
-            u.type
-          );
-          const isVirtualModule = u.path.startsWith("/@id/") || u.path.startsWith("/__");
-          if (isVirtualModule) {
-            debug$3("updating virtual module: %s", u.path);
-            update(u.path);
-          }
-        }
-        const update_ = {
-          type: "update",
-          updates: p.updates.map(({ acceptedPath: ap, path: p2, ...rest }) => ({
-            ...rest,
-            acceptedPath: prefix$1("/", getFileName({ id: ap, type: "module" })),
-            path: prefix$1("/", getFileName({ id: p2, type: "module" }))
-          }))
-        };
-        return update_;
-      }
-      default:
-        return p;
-    }
-  }),
-  filter((p) => {
-    switch (p.type) {
-      case "full-reload":
-        return typeof p.path === "undefined";
-      case "prune":
-        return p.paths.length > 0;
-      case "update":
-        return p.updates.length > 0;
-      default:
-        return true;
-    }
-  }),
+  mergeMap(prepareVitePayloadForCrx),
+  filter(shouldForwardCrxPayload),
   map((data) => {
     debug$3(`hmr payload`, data);
     return {
@@ -1597,6 +1837,23 @@ const crxRuntimeReload = {
   type: "custom",
   event: "crx:runtime-reload"
 };
+function getChangedFilePath(root, file) {
+  if (!file)
+    return null;
+  const normalizedRoot = normalize(root);
+  const normalizedFile = normalize(file);
+  const relativeFile = relative(normalizedRoot, normalizedFile);
+  if (!relativeFile || relativeFile.startsWith("..") || isAbsolute(relativeFile)) {
+    return null;
+  }
+  return prefix$1("/", relativeFile);
+}
+function stripTimestamp(id) {
+  return id.replace(/([?&])t=\d+&/, "$1").replace(/[?&]t=\d+$/, "").replace(/\?$/, "");
+}
+function escapeRegExp(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 const pluginHMR = () => {
   let inputManifestFiles;
   let decoratedSend;
@@ -1663,13 +1920,14 @@ const pluginHMR = () => {
       // background changes require a full extension reload
       handleHotUpdate({ file, modules, server }) {
         const { root } = server.config;
-        const changedFilePath = file ? file.startsWith(root) ? prefix$1("/", file.slice(root.length)) : null : null;
+        const changedFilePath = getChangedFilePath(root, file);
         const relFiles = /* @__PURE__ */ new Set();
         const fsFiles = /* @__PURE__ */ new Set();
         const virtualModules = /* @__PURE__ */ new Set();
         for (const m of modules) {
-          if (m.id?.startsWith(root)) {
-            relFiles.add(m.id.slice(server.config.root.length));
+          const relFile = getChangedFilePath(root, m.id);
+          if (relFile) {
+            relFiles.add(relFile);
           } else if (m.url?.startsWith("/@fs")) {
             fsFiles.add(m.url);
           } else if (m.id?.startsWith("\0") || m.url?.startsWith("/@id/__x00__")) {
@@ -1741,13 +1999,14 @@ const pluginHMR = () => {
       },
       renderCrxDevScript(code, { id: _id, type }) {
         if (type === "module" && _id !== "/@vite/client" && code.includes("createHotContext")) {
-          const id = _id.replace(/t=\d+&/, "");
-          const escaped = id.replace(/([?&.])/g, "\\$1");
+          const id = stripTimestamp(_id);
+          const escaped = escapeRegExp(id);
           const regexp = new RegExp(
-            `(?<=createHotContext\\(")${escaped}(?="\\))`
+            `(createHotContext\\(")${escaped}("\\))`,
+            "g"
           );
           const fileUrl = prefix$1("/", getFileName({ id, type }));
-          const replaced = code.replace(regexp, fileUrl);
+          const replaced = code.replace(regexp, `$1${fileUrl}$2`);
           return replaced;
         } else {
           return code;
@@ -1758,11 +2017,11 @@ const pluginHMR = () => {
 };
 
 function printStr(dir) {
-  return `  ${colors.magentaBright("B R O W S E R")}
-  ${colors.greenBright("E X T E N S I O N")}
-  ${colors.blueBright("T O O L S")}
+  return `  ${pc.magentaBright("B R O W S E R")}
+  ${pc.greenBright("E X T E N S I O N")}
+  ${pc.blueBright("T O O L S")}
   
-  ${colors.green("\u279C")}  ${colors.bold("CRXJS")}: ${colors.green(`Load ${colors.cyan(dir)} as unpacked extension`)}`;
+  ${pc.green("\u279C")}  ${pc.bold("CRXJS")}: ${pc.green(`Load ${pc.cyan(dir)} as unpacked extension`)}`;
 }
 const pluginPrint = () => {
   let outDir = "dist";
@@ -1923,14 +2182,50 @@ const pluginHtmlInlineScripts = () => {
   };
 };
 
-var loadingPageScript = "const VITE_URL = \"%PROTO%://localhost:%PORT%\";\ndocument.body.innerHTML = /* html */\n`\n<style>\n  :root {\n    color-scheme: light;\n    --ink: #111827;\n    --muted: #5f6b7a;\n    --muted-subtle: rgba(95, 107, 122, 0.7);\n    --muted-hint: rgba(95, 107, 122, 0.6);\n    --card: #ffffff;\n    --badge-bg: rgba(17, 24, 39, 0.04);\n    --accent: #ff6b2c;\n    --accent-2: #2563eb;\n    --link-underline: rgba(37, 99, 235, 0.45);\n    --glow-1: rgba(37, 99, 235, 0.12);\n    --glow-2: rgba(255, 107, 44, 0.1);\n    --button-grad-1: #ff7a43;\n    --button-grad-2: #ff9a73;\n    --button-shadow: rgba(255, 107, 44, 0.18);\n    --button-shadow-hover: rgba(255, 107, 44, 0.22);\n    --pulse: rgba(255, 107, 44, 0.6);\n    --pulse-ring: rgba(255, 107, 44, 0.5);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root {\n      color-scheme: dark;\n      --ink: #e5e7eb;\n      --muted: #a3aab5;\n      --muted-subtle: rgba(163, 170, 181, 0.78);\n      --muted-hint: rgba(163, 170, 181, 0.6);\n      --card: #0f172a;\n      --badge-bg: rgba(148, 163, 184, 0.16);\n      --accent: #ff8a5a;\n      --accent-2: #7aa2ff;\n      --link-underline: rgba(122, 162, 255, 0.45);\n      --glow-1: rgba(96, 165, 250, 0.14);\n      --glow-2: rgba(251, 146, 60, 0.16);\n      --button-grad-1: #f07b4d;\n      --button-grad-2: #f39a76;\n      --button-shadow: rgba(240, 123, 77, 0.16);\n      --button-shadow-hover: rgba(240, 123, 77, 0.2);\n      --pulse: rgba(255, 138, 90, 0.65);\n      --pulse-ring: rgba(255, 138, 90, 0.5);\n    }\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: \"IBM Plex Sans\", \"Inter\", -apple-system, system-ui, sans-serif;\n    color: var(--ink);\n    background: transparent;\n    width: 420px;\n    height: 250px;\n    margin: 0;\n    padding: 0 !important;\n  }\n\n  #app {\n    background: var(--card);\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    min-height: 100%;\n    padding: 24px 24px 20px;\n    gap: 14px;\n    justify-content: center;\n  }\n\n  #app::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      radial-gradient(240px 140px at 100% 0%, var(--glow-1), transparent 70%),\n      radial-gradient(220px 140px at 0% 100%, var(--glow-2), transparent 70%);\n    pointer-events: none;\n  }\n\n  .header {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n    padding-right: 96px;\n  }\n\n  .header-text {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 10px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--muted);\n    background: var(--badge-bg);\n    border-radius: 999px;\n    padding: 6px 10px;\n    white-space: nowrap;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  .pulse {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--accent);\n    box-shadow: 0 0 0 0 var(--pulse);\n    animation: pulse 1.6s ease-in-out infinite;\n  }\n\n  h1 {\n    font-size: clamp(18px, 4vw, 22px);\n    letter-spacing: -0.02em;\n    line-height: 1.25;\n  }\n\n  p {\n    margin: 0;\n    color: var(--muted);\n    font-size: 13px;\n    line-height: 1.6;\n  }\n\n  .subtle {\n    color: var(--muted-subtle);\n    font-size: 12px;\n  }\n\n  a {\n    color: var(--accent-2);\n    text-decoration: none;\n    border-bottom: 1px dashed var(--link-underline);\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .footer {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n  }\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n  }\n\n  button {\n    appearance: none;\n    border: none;\n    border-radius: 999px;\n    background: linear-gradient(135deg, var(--button-grad-1), var(--button-grad-2));\n    color: white;\n    padding: 8px 14px;\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    box-shadow: 0 8px 16px var(--button-shadow);\n    transition: transform 160ms ease, box-shadow 160ms ease;\n  }\n\n  button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 10px 20px var(--button-shadow-hover);\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--accent-2);\n    outline-offset: 2px;\n  }\n\n  .hint {\n    font-size: 11px;\n    color: var(--muted-hint);\n    text-align: center;\n  }\n\n  @keyframes pulse {\n    0% { box-shadow: 0 0 0 0 var(--pulse-ring); }\n    70% { box-shadow: 0 0 0 10px rgba(255, 107, 44, 0); }\n    100% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0); }\n  }\n</style>\n\n<div id=\"app\">\n  <div class=\"header\">\n    <span class=\"badge\"><span class=\"pulse\"></span>dev server</span>\n    <div class=\"header-text\">\n      <h1>CRXJS DEV MODE</h1>\n      <p class=\"subtle\">Connecting to the Vite dev server\\u2026</p>\n    </div>\n  </div>\n\n  <div class=\"content\">\n    <p>\n      Cannot connect to <a href=\"${VITE_URL}\">${VITE_URL}</a>.\n      Make sure Vite is running, then reload the extension.\n    </p>\n    <p>This page will close automatically after the extension reloads.</p>\n  </div>\n\n  <div class=\"footer\">\n    <div class=\"actions\">\n      <button>Reload Extension</button>\n    </div>\n    <div class=\"hint\">Tip: if the URL is wrong, restart Vite so it picks the right port.</div>\n  </div>\n</div>\n`;\ndocument.body.querySelector(\"button\")?.addEventListener(\"click\", () => {\n  chrome.runtime.reload();\n});\nlet tries = 0;\nlet ready = false;\ndo {\n  try {\n    await fetch(VITE_URL);\n    ready = true;\n  } catch {\n    const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3);\n    console.log(`[CRXJS] Vite Dev Server is not available on ${VITE_URL}`);\n    console.log(`[CRXJS] Retrying in ${timeout}ms...`);\n    await new Promise((resolve) => setTimeout(resolve, timeout));\n  }\n} while (!ready);\nlocation.reload();\n";
+var loadingPageScript = "const VITE_URL = \"%PROTO%://localhost:%PORT%\";\nconst READY_PATH = \"%READY_PATH%\";\nconst VITE_PAGE_URL = new URL(location.pathname + location.search, VITE_URL).href;\nconst RELOAD_DELAY = 100;\nfunction getReadyUrl() {\n  const url = new URL(READY_PATH, VITE_URL);\n  url.searchParams.set(\"path\", location.pathname + location.search);\n  url.searchParams.set(\"t\", Date.now().toString());\n  return url.href;\n}\ndocument.body.innerHTML = /* html */\n`\n<style>\n  :root {\n    color-scheme: light;\n    --ink: #111827;\n    --muted: #5f6b7a;\n    --muted-subtle: rgba(95, 107, 122, 0.7);\n    --muted-hint: rgba(95, 107, 122, 0.6);\n    --card: #ffffff;\n    --badge-bg: rgba(17, 24, 39, 0.04);\n    --accent: #ff6b2c;\n    --accent-2: #2563eb;\n    --link-underline: rgba(37, 99, 235, 0.45);\n    --glow-1: rgba(37, 99, 235, 0.12);\n    --glow-2: rgba(255, 107, 44, 0.1);\n    --button-grad-1: #ff7a43;\n    --button-grad-2: #ff9a73;\n    --button-shadow: rgba(255, 107, 44, 0.18);\n    --button-shadow-hover: rgba(255, 107, 44, 0.22);\n    --pulse: rgba(255, 107, 44, 0.6);\n    --pulse-ring: rgba(255, 107, 44, 0.5);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root {\n      color-scheme: dark;\n      --ink: #e5e7eb;\n      --muted: #a3aab5;\n      --muted-subtle: rgba(163, 170, 181, 0.78);\n      --muted-hint: rgba(163, 170, 181, 0.6);\n      --card: #0f172a;\n      --badge-bg: rgba(148, 163, 184, 0.16);\n      --accent: #ff8a5a;\n      --accent-2: #7aa2ff;\n      --link-underline: rgba(122, 162, 255, 0.45);\n      --glow-1: rgba(96, 165, 250, 0.14);\n      --glow-2: rgba(251, 146, 60, 0.16);\n      --button-grad-1: #f07b4d;\n      --button-grad-2: #f39a76;\n      --button-shadow: rgba(240, 123, 77, 0.16);\n      --button-shadow-hover: rgba(240, 123, 77, 0.2);\n      --pulse: rgba(255, 138, 90, 0.65);\n      --pulse-ring: rgba(255, 138, 90, 0.5);\n    }\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: \"IBM Plex Sans\", \"Inter\", -apple-system, system-ui, sans-serif;\n    color: var(--ink);\n    background: transparent;\n    width: 420px;\n    height: 250px;\n    margin: 0;\n    padding: 0 !important;\n  }\n\n  #app {\n    background: var(--card);\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    min-height: 100%;\n    padding: 24px 24px 20px;\n    gap: 14px;\n    justify-content: center;\n  }\n\n  #app::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      radial-gradient(240px 140px at 100% 0%, var(--glow-1), transparent 70%),\n      radial-gradient(220px 140px at 0% 100%, var(--glow-2), transparent 70%);\n    pointer-events: none;\n  }\n\n  .header {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n    padding-right: 96px;\n  }\n\n  .header-text {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 10px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--muted);\n    background: var(--badge-bg);\n    border-radius: 999px;\n    padding: 6px 10px;\n    white-space: nowrap;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  .pulse {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--accent);\n    box-shadow: 0 0 0 0 var(--pulse);\n    animation: pulse 1.6s ease-in-out infinite;\n  }\n\n  h1 {\n    font-size: clamp(18px, 4vw, 22px);\n    letter-spacing: -0.02em;\n    line-height: 1.25;\n  }\n\n  p {\n    margin: 0;\n    color: var(--muted);\n    font-size: 13px;\n    line-height: 1.6;\n  }\n\n  .subtle {\n    color: var(--muted-subtle);\n    font-size: 12px;\n  }\n\n  a {\n    color: var(--accent-2);\n    text-decoration: none;\n    border-bottom: 1px dashed var(--link-underline);\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .footer {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n  }\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n  }\n\n  button {\n    appearance: none;\n    border: none;\n    border-radius: 999px;\n    background: linear-gradient(135deg, var(--button-grad-1), var(--button-grad-2));\n    color: white;\n    padding: 8px 14px;\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    box-shadow: 0 8px 16px var(--button-shadow);\n    transition: transform 160ms ease, box-shadow 160ms ease;\n  }\n\n  button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 10px 20px var(--button-shadow-hover);\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--accent-2);\n    outline-offset: 2px;\n  }\n\n  .hint {\n    font-size: 11px;\n    color: var(--muted-hint);\n    text-align: center;\n  }\n\n  @keyframes pulse {\n    0% { box-shadow: 0 0 0 0 var(--pulse-ring); }\n    70% { box-shadow: 0 0 0 10px rgba(255, 107, 44, 0); }\n    100% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0); }\n  }\n</style>\n\n<div id=\"app\">\n  <div class=\"header\">\n    <span class=\"badge\"><span class=\"pulse\"></span>dev server</span>\n    <div class=\"header-text\">\n      <h1>CRXJS DEV MODE</h1>\n      <p class=\"subtle\">Connecting to the Vite dev server\\u2026</p>\n    </div>\n  </div>\n\n  <div class=\"content\">\n    <p>\n      Cannot connect to <a href=\"${VITE_PAGE_URL}\">${VITE_PAGE_URL}</a>.\n      Make sure Vite is running, then reload the extension.\n    </p>\n    <p>This page will close automatically after the extension reloads.</p>\n  </div>\n\n  <div class=\"footer\">\n    <div class=\"actions\">\n      <button>Reload Extension</button>\n    </div>\n    <div class=\"hint\">Tip: if the URL is wrong, restart Vite so it picks the right port.</div>\n  </div>\n</div>\n`;\ndocument.body.querySelector(\"button\")?.addEventListener(\"click\", () => {\n  chrome.runtime.reload();\n});\nlet tries = 0;\nlet ready = false;\ndo {\n  try {\n    const response = await fetch(getReadyUrl());\n    if (!response.ok)\n      throw new Error(`HTTP ${response.status}`);\n    ready = true;\n  } catch {\n    const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3);\n    console.log(`[CRXJS] Vite Dev Server is not available on ${VITE_PAGE_URL}`);\n    console.log(`[CRXJS] Retrying in ${timeout}ms...`);\n    await new Promise((resolve) => setTimeout(resolve, timeout));\n  }\n} while (!ready);\nconsole.log(`[CRXJS] Vite Dev Server is ready on ${VITE_PAGE_URL}`);\nconsole.log(`[CRXJS] Reloading in ${RELOAD_DELAY}ms...`);\nawait new Promise((resolve) => setTimeout(resolve, RELOAD_DELAY));\nlocation.reload();\n";
 
 var loadingPageHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>CRXJS DEV MODE</title>\n    <script src=\"%SCRIPT%\" type=\"module\"></script>\n  </head>\n  <body>\n    <p>An unknown error occurred. Failed to load the script.</p>\n  </body>\n</html>\n";
 
 const { readFile } = promises;
+const loadingPageReadyPath = "/@crx/dev-ready";
+function normalizeHtmlPath(pathname) {
+  let decoded;
+  try {
+    decoded = decodeURIComponent(pathname);
+  } catch {
+    return null;
+  }
+  const normalized = normalize(decoded.replace(/^\/+/, "") || "index.html");
+  if (normalized.startsWith("..") || isAbsolute(normalized))
+    return null;
+  return normalized;
+}
+function getLoadingPageReadyHtmlPath(requestUrl) {
+  if (!requestUrl)
+    return null;
+  let url;
+  try {
+    url = new URL(requestUrl, "http://crxjs.local");
+  } catch {
+    return null;
+  }
+  if (url.pathname !== loadingPageReadyPath)
+    return void 0;
+  const path = url.searchParams.get("path");
+  if (!path)
+    return null;
+  let pageUrl;
+  try {
+    pageUrl = new URL(path, "http://crxjs.local");
+  } catch {
+    return null;
+  }
+  return normalizeHtmlPath(pageUrl.pathname);
+}
 const pluginManifest = () => {
   let manifest;
   let plugins = [];
+  let devHtmlFiles = /* @__PURE__ */ new Set();
   let refId;
   let config;
   return [
@@ -1950,6 +2245,7 @@ const pluginManifest = () => {
             background: sw,
             html
           } = await manifestFiles(manifest, { cwd: config2.root });
+          devHtmlFiles = new Set(html.map(normalizeHtmlPath).filter(isString));
           const { entries = [] } = config2.optimizeDeps ?? {};
           let { input = [] } = config2.build?.rollupOptions ?? {};
           if (typeof input === "string")
@@ -1983,6 +2279,25 @@ const pluginManifest = () => {
           plugins = resolvedConfig.plugins;
         }
       },
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          const htmlPath = getLoadingPageReadyHtmlPath(req.url);
+          if (typeof htmlPath === "undefined") {
+            next();
+            return;
+          }
+          res.setHeader("Access-Control-Allow-Origin", "*");
+          res.setHeader("Access-Control-Allow-Methods", "GET");
+          if (!htmlPath) {
+            res.statusCode = 400;
+            res.end();
+            return;
+          }
+          const exists = devHtmlFiles.has(htmlPath) && (existsSync(join(server.config.root, htmlPath)) || existsSync(join(server.config.publicDir, htmlPath)));
+          res.statusCode = exists ? 204 : 404;
+          res.end();
+        });
+      },
       buildStart(options) {
         if (options.plugins)
           plugins = options.plugins;
@@ -2136,7 +2451,10 @@ const pluginManifest = () => {
                 const refId2 = this.emitFile({
                   type: "chunk",
                   id: id2,
-                  name: basename(file)
+                  name: basename(file),
+                  // Preserve content script entry exports so the build finalizer
+                  // can decide whether the script needs a loader wrapper.
+                  preserveSignature: "exports-only"
                 });
                 contentScripts.set(
                   file,
@@ -2206,6 +2524,7 @@ const pluginManifest = () => {
             }
           }
         } else {
+          finalizeBuildContentScripts(this, bundle);
           if (manifest2.background && "service_worker" in manifest2.background) {
             const ref = manifest2.background.service_worker;
             const name = this.getFileName(ref);
@@ -2220,7 +2539,7 @@ const pluginManifest = () => {
             ({ js = [], ...rest }) => {
               return {
                 js: js.map((id) => {
-                  const script = contentScripts.get(id);
+                  const script = contentScripts.get(id) ?? contentScripts.get(prefix$1("/", id));
                   const fileName = script?.loaderName ?? script?.fileName;
                   if (typeof fileName === "undefined")
                     throw new Error(
@@ -2242,11 +2561,11 @@ const pluginManifest = () => {
             const name = `[${plugin.name}]`;
             let message = error;
             if (error instanceof Error) {
-              message = colors.red(
+              message = pc.red(
                 `${name} ${error.stack ? error.stack : error.message}`
               );
             } else if (typeof error === "string") {
-              message = colors.red(`${name} ${error}`);
+              message = pc.red(`${name} ${error}`);
             }
             console.log(message);
             throw new Error(`Error in ${plugin.name}.renderCrxManifest`);
@@ -2260,6 +2579,11 @@ const pluginManifest = () => {
           "webAccessibleResources"
         ];
         const files = await manifestFiles(manifest2, { cwd: config.root });
+        if (config.command === "serve") {
+          devHtmlFiles = new Set(
+            files.html.map(normalizeHtmlPath).filter(isString)
+          );
+        }
         await Promise.all(
           assetTypes.map((k) => files[k]).flat().map(async (f) => {
             if (typeof bundle[f] === "undefined") {
@@ -2291,7 +2615,7 @@ Public dir: "${config.publicDir}"`
           const refId2 = this.emitFile({
             type: "asset",
             name: "loading-page.js",
-            source: loadingPageScript.replace("%PROTO%", config.server.https ? "https" : "http").replace("%PORT%", `${config.server.port ?? 0}`)
+            source: loadingPageScript.replace("%PROTO%", config.server.https ? "https" : "http").replace("%PORT%", `${config.server.port ?? 0}`).replace("%READY_PATH%", loadingPageReadyPath)
           });
           const loadingPageScriptName = this.getFileName(refId2);
           files.html.map(
@@ -2585,6 +2909,7 @@ const crx = (options) => {
   contentScripts.clear();
   return [
     pluginOptionsProvider(options),
+    pluginExtensionCors(),
     pluginContentScriptsIife(),
     // Must come early so isIifeModeEnabled is set before manifest plugin
     pluginBackground(),