@crxjs/vite-plugin 2.0.0-beta.3 → 2.0.0-beta.30

package/dist/index.mjs

@@ -1,20 +1,19 @@
 import { simple } from 'acorn-walk';
 import { createHash } from 'crypto';
-import debug$2 from 'debug';
-import v8 from 'v8';
+import debug$3 from 'debug';
 import { posix } from 'path';
-import { Subject, filter, ReplaySubject, switchMap, of, startWith, map, mergeMap, firstValueFrom, takeUntil, first, toArray, retry, concatWith, Subscription, buffer } from 'rxjs';
+import { Subject, filter, ReplaySubject, switchMap, of, startWith, map, 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';
 import * as lexer from 'es-module-lexer';
 import { readFile as readFile$1 } from 'fs/promises';
 import MagicString from 'magic-string';
-import { createLogger } from 'vite';
+import convertSourceMap from 'convert-source-map';
+import { createLogger, version } from 'vite';
 import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
 import fg from 'fast-glob';
-import getPort, { portNumbers } from 'get-port';
 import { load } from 'cheerio';
 import jsesc from 'jsesc';
 import colors from 'picocolors';
@@ -25,17 +24,22 @@ const pluginOptionsProvider = (options) => {
     name: pluginName$1,
     api: {
       crx: {
+        // during testing this can be null, we don't provide options through the test config
         options
       }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }
   };
 };
-const getOptions = ({ plugins }) => {
+const getOptions = async ({
+  plugins
+}) => {
   if (typeof plugins === "undefined") {
     throw new Error("config.plugins is undefined");
   }
+  const awaitedPlugins = await Promise.all(plugins);
   let options;
-  for (const p of plugins.flat()) {
+  for (const p of awaitedPlugins.flat()) {
     if (isCrxPlugin(p)) {
       if (p.name === pluginName$1) {
         const plugin = p;
@@ -54,12 +58,9 @@ function isCrxPlugin(p) {
   return !!p && typeof p === "object" && !(p instanceof Promise) && !Array.isArray(p) && p.name.startsWith("crx:");
 }
 
-var workerHmrClient = "const ownOrigin = new URL(chrome.runtime.getURL(\"/\")).origin;\nself.addEventListener(\"fetch\", (fetchEvent) => {\n  const url = new URL(fetchEvent.request.url);\n  if (url.origin === ownOrigin) {\n    fetchEvent.respondWith(sendToServer(url));\n  }\n});\nasync function sendToServer(url) {\n  url.protocol = \"http:\";\n  url.host = \"localhost\";\n  url.port = __SERVER_PORT__;\n  url.searchParams.set(\"t\", Date.now().toString());\n  const response = await fetch(url.href.replace(/=$|=(?=&)/g, \"\"));\n  return new Response(response.body, {\n    headers: {\n      \"Content-Type\": response.headers.get(\"Content-Type\") ?? \"text/javascript\"\n    }\n  });\n}\nconst ports = /* @__PURE__ */ new Set();\nchrome.runtime.onConnect.addListener((port) => {\n  if (port.name === \"@crx/client\") {\n    ports.add(port);\n    port.onDisconnect.addListener((port2) => ports.delete(port2));\n    port.onMessage.addListener((message) => {\n    });\n    port.postMessage({ data: JSON.stringify({ type: \"connected\" }) });\n  }\n});\nfunction notifyContentScripts(payload) {\n  const data = JSON.stringify(payload);\n  for (const port of ports)\n    port.postMessage({ data });\n}\nconsole.log(\"[vite] connecting...\");\nconst socketProtocol = __HMR_PROTOCOL__ || (location.protocol === \"https:\" ? \"wss\" : \"ws\");\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;\nconst socket = new WebSocket(`${socketProtocol}://${socketHost}`, \"vite-hmr\");\nconst base = __BASE__ || \"/\";\nsocket.addEventListener(\"message\", async ({ data }) => {\n  handleSocketMessage(JSON.parse(data));\n});\nfunction isCrxHmrPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nfunction handleSocketMessage(payload) {\n  if (isCrxHmrPayload(payload)) {\n    handleCrxHmrPayload(payload);\n  } else if (payload.type === \"connected\") {\n    console.log(`[vite] connected.`);\n    const interval = setInterval(() => socket.send(\"ping\"), __HMR_TIMEOUT__);\n    socket.addEventListener(\"close\", () => clearInterval(interval));\n  }\n}\nfunction handleCrxHmrPayload(payload) {\n  notifyContentScripts(payload);\n  switch (payload.event) {\n    case \"crx:runtime-reload\":\n      console.log(\"[crx] runtime reload\");\n      chrome.runtime.reload();\n      break;\n  }\n}\nasync function waitForSuccessfulPing(ms = 1e3) {\n  while (true) {\n    try {\n      await fetch(`${base}__vite_ping`);\n      break;\n    } catch (e) {\n      await new Promise((resolve) => setTimeout(resolve, ms));\n    }\n  }\n}\nsocket.addEventListener(\"close\", async ({ wasClean }) => {\n  if (wasClean)\n    return;\n  console.log(`[vite] server connection lost. polling for restart...`);\n  await waitForSuccessfulPing();\n  handleCrxHmrPayload({\n    type: \"custom\",\n    event: \"crx:runtime-reload\"\n  });\n});\n";
+var workerHmrClient = "const ownOrigin = `chrome-extension://${chrome.runtime.id}`;\nself.addEventListener(\"fetch\", (fetchEvent) => {\n  const url = new URL(fetchEvent.request.url);\n  if (url.origin === ownOrigin) {\n    fetchEvent.respondWith(sendToServer(url));\n  }\n});\nasync function sendToServer(url) {\n  url.protocol = \"http:\";\n  url.host = \"localhost\";\n  url.port = __SERVER_PORT__;\n  url.searchParams.set(\"t\", Date.now().toString());\n  const response = await fetch(url.href.replace(/=$|=(?=&)/g, \"\"));\n  return new Response(response.body, {\n    headers: {\n      \"Content-Type\": response.headers.get(\"Content-Type\") ?? \"text/javascript\",\n      \"Cache-Control\": response.headers.get(\"Cache-Control\") ?? \"\"\n    }\n  });\n}\nconst ports = /* @__PURE__ */ new Set();\nchrome.runtime.onConnect.addListener((port) => {\n  if (port.name === \"@crx/client\") {\n    ports.add(port);\n    port.onDisconnect.addListener((port2) => ports.delete(port2));\n    port.onMessage.addListener((message) => {\n    });\n    port.postMessage({ data: JSON.stringify({ type: \"connected\" }) });\n  }\n});\nfunction notifyContentScripts(payload) {\n  const data = JSON.stringify(payload);\n  for (const port of ports)\n    port.postMessage({ data });\n}\nconsole.log(\"[vite] connecting...\");\nconst socketProtocol = __HMR_PROTOCOL__ || (location.protocol === \"https:\" ? \"wss\" : \"ws\");\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;\nconst socket = new WebSocket(`${socketProtocol}://${socketHost}`, \"vite-hmr\");\nconst base = __BASE__ || \"/\";\nsocket.addEventListener(\"message\", async ({ data }) => {\n  handleSocketMessage(JSON.parse(data));\n});\nfunction isCrxHmrPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nfunction handleSocketMessage(payload) {\n  if (isCrxHmrPayload(payload)) {\n    handleCrxHmrPayload(payload);\n  } else if (payload.type === \"connected\") {\n    console.log(`[vite] connected.`);\n    const interval = setInterval(() => socket.send(\"ping\"), __HMR_TIMEOUT__);\n    socket.addEventListener(\"close\", () => clearInterval(interval));\n  }\n}\nfunction handleCrxHmrPayload(payload) {\n  notifyContentScripts(payload);\n  switch (payload.event) {\n    case \"crx:runtime-reload\":\n      console.log(\"[crx] runtime reload\");\n      chrome.runtime.reload();\n      break;\n  }\n}\nasync function waitForSuccessfulPing(ms = 1e3) {\n  while (true) {\n    try {\n      await fetch(`${base}__vite_ping`);\n      break;\n    } catch (e) {\n      await new Promise((resolve) => setTimeout(resolve, ms));\n    }\n  }\n}\nsocket.addEventListener(\"close\", async ({ wasClean }) => {\n  if (wasClean)\n    return;\n  console.log(`[vite] server connection lost. polling for restart...`);\n  await waitForSuccessfulPing();\n  handleCrxHmrPayload({\n    type: \"custom\",\n    event: \"crx:runtime-reload\"\n  });\n});\n";
 
-const _debug = (id) => debug$2("crx").extend(id);
-const structuredClone = (obj) => {
-  return v8.deserialize(v8.serialize(obj));
-};
+const _debug = (id) => debug$3("crx").extend(id);
 const hash = (data, length = 5) => createHash("sha1").update(data).digest("base64").replace(/[^A-Za-z0-9]/g, "").slice(0, length);
 const isString = (x) => typeof x === "string";
 function isObject(value) {
@@ -202,7 +203,7 @@ function formatFileData(script) {
   return script;
 }
 function getFileName({ type, id }) {
-  let fileName = id.replace(/t=\d+&/, "").replace(/^\//, "").replace(/\?/g, "__").replace(/&/g, "_").replace(/=/g, "--");
+  let fileName = id.replace(/t=\d+&/, "").replace(/\?t=\d+$/, "").replace(/^\//, "").replace(/\?/g, "__").replace(/&/g, "_").replace(/=/g, "--");
   if (fileName.includes("node_modules/")) {
     fileName = `vendor/${fileName.split("node_modules/").pop().replace(/\//g, "-")}`;
   } else if (fileName.startsWith("@")) {
@@ -270,6 +271,7 @@ const workerClientId = "/@crx/client-worker";
 
 const pluginBackground = () => {
   let config;
+  let browser;
   return [
     {
       name: "crx:background-client",
@@ -290,24 +292,39 @@ const pluginBackground = () => {
     },
     {
       name: "crx:background-loader-file",
+      // this should happen after other plugins; the loader file is an implementation detail
       enforce: "post",
+      async config(config2) {
+        const opts = await getOptions(config2);
+        browser = opts.browser || "chrome";
+      },
       configResolved(_config) {
         config = _config;
       },
       renderCrxManifest(manifest) {
-        const worker = manifest.background?.service_worker;
+        const worker = browser === "firefox" ? manifest.background?.scripts[0] : manifest.background?.service_worker;
         let loader;
         if (config.command === "serve") {
           const port = config.server.port?.toString();
           if (typeof port === "undefined")
             throw new Error("server port is undefined in watch mode");
-          loader = `import 'http:/localhost:${port}/@vite/env';
+          if (browser === "firefox") {
+            loader = `import('http://localhost:${port}/@vite/env');
+`;
+            loader += `import('http://localhost:${port}${workerClientId}');
+`;
+            if (worker)
+              loader += `import('http://localhost:${port}/${worker}');
+`;
+          } else {
+            loader = `import 'http://localhost:${port}/@vite/env';
 `;
-          loader += `import 'http://localhost:${port}${workerClientId}';
+            loader += `import 'http://localhost:${port}${workerClientId}';
 `;
-          if (worker)
-            loader += `import 'http://localhost:${port}/${worker}';
+            if (worker)
+              loader += `import 'http://localhost:${port}/${worker}';
 `;
+          }
         } else if (worker) {
           loader = `import './${worker}';
 `;
@@ -316,13 +333,21 @@ const pluginBackground = () => {
         }
         const refId = this.emitFile({
           type: "asset",
+          // fileName b/c service worker must be at root of crx
           fileName: getFileName({ type: "loader", id: "service-worker" }),
           source: loader
         });
-        manifest.background = {
-          service_worker: this.getFileName(refId),
-          type: "module"
-        };
+        if (browser !== "firefox") {
+          manifest.background = {
+            service_worker: this.getFileName(refId),
+            type: "module"
+          };
+        } else {
+          manifest.background = {
+            scripts: [this.getFileName(refId)],
+            type: "module"
+          };
+        }
         return manifest;
       }
     }
@@ -331,9 +356,9 @@ const pluginBackground = () => {
 
 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        console.log(\"[crx] runtime reload\");\n        setTimeout(() => location.reload(), 500);\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  (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    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\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";
 
-var contentProLoader = "(function () {\n  'use strict';\n\n  (async () => {\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\n";
+var contentProLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\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";
 
 const contentScripts = new RxMap();
 contentScripts.change$.pipe(filter(RxMap.isChangeType.set)).subscribe(({ map, value }) => {
@@ -391,6 +416,10 @@ const allFilesReady$ = buildEnd$.pipe(
   map(() => [...outputFiles.values()]),
   switchMap((files) => Promise.allSettled(files.map(({ file }) => file)))
 );
+const timestamp$ = new BehaviorSubject(Date.now());
+allFilesReady$.subscribe(() => {
+  timestamp$.next(Date.now());
+});
 const isRejected = (x) => x?.status === "rejected";
 const fileWriterError$ = allFilesReady$.pipe(
   mergeMap((results) => results.filter(isRejected)),
@@ -424,16 +453,36 @@ function prepAsset(fileName, { id, source }) {
 }
 function prepScript(fileName, script) {
   return ($) => $.pipe(
+    // get script contents from dev server
     mergeMap(async ({ server }) => {
       const target = getOutputPath(server, fileName);
       const viteUrl = getViteUrl(script);
       const transformResult = await server.transformRequest(viteUrl);
       if (!transformResult)
         throw new TypeError(`Unable to load "${script.id}" from server.`);
-      const { code, deps = [], dynamicDeps = [] } = transformResult;
-      return { target, code, deps: [...deps, ...dynamicDeps].flat(), server };
+      const { deps = [], dynamicDeps = [], map: map2 } = transformResult;
+      let { code } = transformResult;
+      try {
+        if (map2 && server.config.build.sourcemap === "inline") {
+          code = code.replace(/\n*\/\/# sourceMappingURL=[^\n]+/g, "");
+          const sourceMap = convertSourceMap.fromObject(map2).toComment();
+          code += `
+${sourceMap}
+`;
+        }
+      } catch (error) {
+        console.warn("Failed to inline source map", error);
+      }
+      return {
+        target,
+        code,
+        deps: [...deps, ...dynamicDeps].flat(),
+        server
+      };
     }),
+    // retry in case of dependency rebundle
     retry({ count: 10, delay: 100 }),
+    // patch content scripts
     mergeMap(async ({ target, server, ...rest }) => {
       const plugins = server.config.plugins;
       let { code, deps } = rest;
@@ -453,7 +502,8 @@ function prepScript(fileName, script) {
         if (i.n) {
           depSet.add(i.n);
           const fileName2 = getFileName({ type: "module", id: i.n });
-          magic.overwrite(i.s, i.e, `/${fileName2}`);
+          const fullImport = code.substring(i.s, i.e);
+          magic.overwrite(i.s, i.e, fullImport.replace(i.n, `/${fileName2}`));
         }
       return { target, source: magic.toString(), deps: [...depSet] };
     })
@@ -524,8 +574,11 @@ function update(_id) {
 async function write(fileId) {
   const start2 = performance.now();
   const deps = await firstValueFrom(
+    // wait for start event
     start$.pipe(
+      // prepare either asset or script contents
       prepFileData(fileId),
+      // output file and add dependencies to file writer
       mergeMap(async ({ target, source, deps: deps2 }) => {
         const files = deps2.map((id) => {
           const r = [add({ id, type: "module" })];
@@ -541,6 +594,7 @@ async function write(fileId) {
           await outputFile(target, source, { encoding: "utf8" });
         return files;
       }),
+      // abort write operation on close event
       takeUntil(close$),
       concatWith(of([]))
     )
@@ -558,15 +612,15 @@ const pluginContentScripts = () => {
     {
       name: "crx:content-scripts",
       apply: "serve",
-      config(config) {
-        const { contentScripts: contentScripts2 = {} } = getOptions(config);
+      async config(config) {
+        const { contentScripts: contentScripts2 = {} } = await getOptions(config);
         hmrTimeout = contentScripts2.hmrTimeout ?? 5e3;
         preambleCode = preambleCode ?? contentScripts2.preambleCode;
       },
       async configureServer(_server) {
         server = _server;
         if (typeof preambleCode === "undefined" && server.config.plugins.some(
-          ({ name = "none" }) => name.toLowerCase().includes("react")
+          ({ name = "none" }) => name.toLowerCase().includes("react") && !name.toLowerCase().includes("preact")
         )) {
           try {
             const react = await import('@vitejs/plugin-react');
@@ -631,6 +685,19 @@ const pluginContentScripts = () => {
       name: "crx:content-scripts",
       apply: "build",
       enforce: "pre",
+      config(config) {
+        return {
+          ...config,
+          build: {
+            ...config.build,
+            rollupOptions: {
+              ...config.build?.rollupOptions,
+              // keep exports for content script module api
+              preserveEntrySignatures: config.build?.rollupOptions?.preserveEntrySignatures ?? "exports-only"
+            }
+          }
+        };
+      },
       generateBundle() {
         for (const [key, script] of contentScripts)
           if (key === script.refId) {
@@ -661,8 +728,8 @@ const pluginContentScriptsCss = () => {
   return {
     name: "crx:content-scripts-css",
     enforce: "post",
-    config(config) {
-      const { contentScripts: contentScripts2 = {} } = getOptions(config);
+    async config(config) {
+      const { contentScripts: contentScripts2 = {} } = await getOptions(config);
       injectCss = contentScripts2.injectCss ?? true;
     },
     renderCrxManifest(manifest) {
@@ -691,7 +758,7 @@ const pluginDeclaredContentScripts = () => {
   return [];
 };
 
-const _dynamicScriptRegEx = /\b(import.meta).CRX_DYNAMIC_SCRIPT_(.+?);$/gm;
+const _dynamicScriptRegEx = /\b(import.meta).CRX_DYNAMIC_SCRIPT_(.+?)[,;]/gm;
 const dynamicScriptRegEx = () => {
   _dynamicScriptRegEx.lastIndex = 0;
   return _dynamicScriptRegEx;
@@ -705,6 +772,34 @@ const pluginDynamicContentScripts = () => {
       configResolved(_config) {
         config = _config;
       },
+      configureServer(server) {
+        return () => {
+          server.middlewares.use(async (req, res, next) => {
+            try {
+              await allFilesReady();
+              next();
+            } catch (error) {
+              let err;
+              if (error instanceof Error) {
+                err = error;
+              } else if (typeof error === "string") {
+                err = new Error(error);
+              } else {
+                err = new Error(
+                  `Unexpected error "${error}" in middleware for "${req.url}"`
+                );
+              }
+              server.ws.send({
+                type: "error",
+                err: {
+                  message: err.message,
+                  stack: err.stack ?? "no stack available"
+                }
+              });
+            }
+          });
+        };
+      },
       async resolveId(_source, importer) {
         if (importer && _source.includes("?script")) {
           const url = new URL(_source, "stub://stub");
@@ -773,7 +868,6 @@ const pluginDynamicContentScripts = () => {
           if (config.command === "build") {
             return `export default import.meta.CRX_DYNAMIC_SCRIPT_${script.refId};`;
           } else if (typeof script.fileName === "string") {
-            await fileReady(script);
             return `export default ${JSON.stringify(script.fileName)};`;
           } else {
             throw new Error(
@@ -786,6 +880,12 @@ const pluginDynamicContentScripts = () => {
     {
       name: "crx:dynamic-content-scripts-build",
       apply: "build",
+      /**
+       * Replace dynamic script placeholders during build.
+       *
+       * Can't use `renderChunk` b/c pre plugin crx:content-scripts uses
+       * `generateBundle` to emit loaders. Must come after "enforce: pre".
+       */
       generateBundle(options, bundle) {
         for (const chunk of Object.values(bundle))
           if (chunk.type === "chunk") {
@@ -804,7 +904,7 @@ const pluginDynamicContentScripts = () => {
                     );
                   return `${JSON.stringify(
                     `/${script.loaderName ?? script.fileName}`
-                  )};`;
+                  )}${match.split(scriptKey)[1]}`;
                 }
               );
               chunk.code = replaced;
@@ -815,29 +915,42 @@ const pluginDynamicContentScripts = () => {
   ];
 };
 
+const { remove } = fsx;
 const logger = createLogger("error", { prefix: "crxjs" });
 const pluginFileWriter = () => {
   fileWriterError$.subscribe((error) => {
     logger.error(error.err.message, { error: error.err });
   });
-  return {
-    name: "crx:file-writer",
-    apply: "serve",
-    configureServer(server) {
-      server.httpServer?.on("listening", async () => {
-        try {
-          await start({ server });
-        } catch (error) {
-          console.error(error);
-          server.close();
+  return [
+    {
+      name: "crx:file-writer-empty-out-dir",
+      apply: "serve",
+      enforce: "pre",
+      async configResolved(config) {
+        if (config.build.emptyOutDir) {
+          await remove(config.build.outDir);
         }
-      });
-      server.httpServer?.on("close", () => close());
+      }
     },
-    closeBundle() {
-      outputFiles.clear();
+    {
+      name: "crx:file-writer",
+      apply: "serve",
+      configureServer(server) {
+        server.httpServer?.on("listening", async () => {
+          try {
+            await start({ server });
+          } catch (error) {
+            console.error(error);
+            server.close();
+          }
+        });
+        server.httpServer?.on("close", () => close());
+      },
+      closeBundle() {
+        outputFiles.clear();
+      }
     }
-  };
+  ];
 };
 
 const _require = typeof require === "undefined" ? createRequire(import.meta.url) : require;
@@ -882,7 +995,9 @@ async function manifestFiles(manifest, options = {}) {
   ) ?? [];
   const contentScripts = manifest.content_scripts?.flatMap(({ js }) => js) ?? [];
   const contentStyles = manifest.content_scripts?.flatMap(({ css }) => css);
-  const serviceWorker = manifest.background?.service_worker;
+  const serviceWorker = manifest.background && "service_worker" in manifest.background ? manifest.background.service_worker : void 0;
+  const backgroundScripts = manifest.background && "scripts" in manifest.background ? manifest.background.scripts : void 0;
+  const background = serviceWorker ? [serviceWorker].filter(isString) : backgroundScripts ? backgroundScripts.filter(isString) : [];
   const htmlPages = htmlFiles(manifest);
   const icons = [
     Object.values(
@@ -903,7 +1018,7 @@ async function manifestFiles(manifest, options = {}) {
         return r;
       })
     );
-    webAccessibleResources = resources.flat().filter(isString);
+    webAccessibleResources = [...new Set(resources.flat())].filter(isString);
   }
   return {
     contentScripts: [...new Set(contentScripts)].filter(isString),
@@ -912,7 +1027,7 @@ async function manifestFiles(manifest, options = {}) {
     icons: [...new Set(icons)].filter(isString),
     locales: [...new Set(locales)].filter(isString),
     rulesets: [...new Set(rulesets)].filter(isString),
-    background: [serviceWorker].filter(isString),
+    background,
     webAccessibleResources
   };
 }
@@ -927,7 +1042,8 @@ function htmlFiles(manifest) {
     manifest.devtools_page,
     manifest.options_page,
     manifest.options_ui?.page,
-    manifest.sandbox?.pages
+    manifest.sandbox?.pages,
+    manifest.side_panel?.default_path
   ].flat().filter(isString).map((s) => s.split("#")[0]).sort();
   return [...new Set(files)];
 }
@@ -952,11 +1068,13 @@ const pluginFileWriterPublic = () => {
   };
 };
 
-_debug("file-writer").extend("hmr");
-const isCrxHMRPayload = (p) => p.type === "custom" && p.event.startsWith("crx:");
+const debug$2 = _debug("file-writer").extend("hmr");
+const isCustomPayload = (p) => {
+  return p.type === "custom";
+};
 const hmrPayload$ = new Subject();
 const crxHMRPayload$ = hmrPayload$.pipe(
-  filter((p) => !isCrxHMRPayload(p)),
+  filter((p) => !isCustomPayload(p)),
   buffer(allFilesReady$),
   mergeMap((pps) => {
     let fullReload;
@@ -1015,6 +1133,7 @@ const crxHMRPayload$ = hmrPayload$.pipe(
     }
   }),
   map((data) => {
+    debug$2(`hmr payload`, data);
     return {
       type: "custom",
       event: "crx:content-script-payload",
@@ -1054,6 +1173,7 @@ const pluginHMR = () => {
       name: "crx:hmr",
       apply: "serve",
       enforce: "pre",
+      // server hmr host should be localhost
       async config({ server = {}, ...config2 }) {
         if (server.hmr === false)
           return;
@@ -1061,9 +1181,9 @@ const pluginHMR = () => {
           server.hmr = {};
         server.hmr = server.hmr ?? {};
         server.hmr.host = "localhost";
-        server.hmr.port = server.hmr.port ?? await getPort({ port: portNumbers(5200, 5300) });
         return { server, ...config2 };
       },
+      // server should ignore outdir
       configResolved(_config) {
         config = _config;
         const { watch = {} } = config.server;
@@ -1101,19 +1221,24 @@ const pluginHMR = () => {
       closeBundle() {
         subs.unsubscribe();
       },
+      // background changes require a full extension reload
       handleHotUpdate({ modules, server }) {
         const { root } = server.config;
         const relFiles = /* @__PURE__ */ new Set();
-        for (const m of modules)
+        const fsFiles = /* @__PURE__ */ new Set();
+        for (const m of modules) {
           if (m.id?.startsWith(root)) {
             relFiles.add(m.id.slice(server.config.root.length));
+          } else if (m.url?.startsWith("/@fs")) {
+            fsFiles.add(m.url);
           }
+        }
+        fsFiles.forEach((file) => update(file));
         if (inputManifestFiles.background.length) {
           const background = prefix$1("/", inputManifestFiles.background[0]);
           if (relFiles.has(background) || modules.some(isImporter(join(server.config.root, background)))) {
             debug$1("sending runtime reload");
             server.ws.send(crxRuntimeReload);
-            return [];
           }
         }
         for (const [key, script] of contentScripts)
@@ -1128,6 +1253,7 @@ const pluginHMR = () => {
       name: "crx:hmr",
       apply: "serve",
       enforce: "post",
+      // get final output manifest for handleHotUpdate 👆
       async transformCrxManifest(manifest) {
         inputManifestFiles = await manifestFiles(manifest, { cwd: config.root });
         return null;
@@ -1218,6 +1344,7 @@ const pluginHtmlInlineScripts = () => {
   };
   const postPlugin = {
     name: "crx:html-auditor-post",
+    // this hook isn't audited b/c we add it after we set up the auditors
     transformIndexHtml(html, ctx) {
       const key = toKey(ctx);
       const p = pages.get(key);
@@ -1283,9 +1410,9 @@ const pluginHtmlInlineScripts = () => {
   };
 };
 
-var precontrollerJs = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\n";
+var loadingPageScript = "const VITE_URL = \"http://localhost:%PORT%\";\ndocument.body.innerHTML = `\n<div\n      id=\"app\"\n      style=\"\n        border: 1px solid #ddd;\n        padding: 20px;\n        border-radius: 5px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n      \"\n    >\n      <h1 style=\"color: #333\">Vite Dev Mode</h1>\n      <p style=\"color: #666\">\n        Cannot connect to the Vite Dev Server on <a href=\"${VITE_URL}\">${VITE_URL}</a>\n      </p>\n      <p style=\"color: #666\">\n        Double-check that Vite is working and reload the extension.\n      </p>\n      <p style=\"color: #666\">\n        This page will close when the extension reloads.\n      </p>\n      <button\n        style=\"\n          padding: 10px 20px;\n          border: none;\n          background-color: #007bff;\n          color: #fff;\n          border-radius: 5px;\n          cursor: pointer;\n        \"\n      >\n        Reload Extension\n      </button>\n    </div>`;\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 precontrollerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%SCRIPT%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
+var loadingPageHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Vite Dev Mode</title>\n    <script src=\"%SCRIPT%\" type=\"module\"></script>\n  </head>\n  <body\n    style=\"font-family: Arial, sans-serif; padding: 20px; text-align: center\"\n  >\n    <h1>Vite Dev Mode</h1>\n  </body>\n</html>\n";
 
 const { readFile } = promises;
 const pluginManifest = () => {
@@ -1344,7 +1471,7 @@ const pluginManifest = () => {
       name: "crx:manifest-loader",
       enforce: "pre",
       buildStart(options) {
-        if (typeof options.input !== "undefined") {
+        if (typeof options.input !== "undefined" && !("ssr" in this)) {
           refId = this.emitFile({
             type: "chunk",
             id: manifestId,
@@ -1464,7 +1591,7 @@ const pluginManifest = () => {
                   })
                 );
               }
-          if (manifest2.background?.service_worker) {
+          if (manifest2.background && "service_worker" in manifest2.background) {
             const file = manifest2.background.service_worker;
             const id2 = join(config.root, file);
             const refId2 = this.emitFile({
@@ -1474,6 +1601,16 @@ const pluginManifest = () => {
             });
             manifest2.background.service_worker = refId2;
           }
+          if (manifest2.background && "scripts" in manifest2.background) {
+            const file = manifest2.background.scripts[0];
+            const id2 = join(config.root, file);
+            const refId2 = this.emitFile({
+              type: "chunk",
+              id: id2,
+              name: basename(file)
+            });
+            manifest2.background.scripts = [refId2];
+          }
           for (const file of htmlFiles(manifest2)) {
             const id2 = join(config.root, file);
             this.emitFile({
@@ -1484,7 +1621,7 @@ const pluginManifest = () => {
           }
         }
         const encoded = encodeManifest(manifest2);
-        return encoded;
+        return { code: encoded, map: null };
       },
       async generateBundle(options, bundle) {
         const manifestName = this.getFileName(refId);
@@ -1498,11 +1635,16 @@ const pluginManifest = () => {
               );
             }
         } else {
-          if (manifest2.background?.service_worker) {
+          if (manifest2.background && "service_worker" in manifest2.background) {
             const ref = manifest2.background.service_worker;
             const name = this.getFileName(ref);
             manifest2.background.service_worker = name;
           }
+          if (manifest2.background && "scripts" in manifest2.background) {
+            const ref = manifest2.background.scripts[0];
+            const name = this.getFileName(ref);
+            manifest2.background.scripts = [name];
+          }
           manifest2.content_scripts = manifest2.content_scripts?.map(
             ({ js = [], ...rest }) => {
               return {
@@ -1562,6 +1704,7 @@ Public dir: "${config.publicDir}"`
               this.emitFile({
                 type: "asset",
                 fileName: f,
+                // TODO: cache source buffer
                 source: await readFile(filename)
               });
             }
@@ -1570,17 +1713,20 @@ Public dir: "${config.publicDir}"`
         if (config.command === "serve" && files.html.length) {
           const refId2 = this.emitFile({
             type: "asset",
-            name: "precontroller.js",
-            source: precontrollerJs
+            name: "loading-page.js",
+            source: loadingPageScript.replace(
+              "%PORT%",
+              `${config.server.port ?? 0}`
+            )
           });
-          const precontrollerJsName = this.getFileName(refId2);
+          const loadingPageScriptName = this.getFileName(refId2);
           files.html.map(
             (f) => this.emitFile({
               type: "asset",
               fileName: f,
-              source: precontrollerHtml.replace(
+              source: loadingPageHtml.replace(
                 "%SCRIPT%",
-                `/${precontrollerJsName}`
+                `/${loadingPageScriptName}`
               )
             })
           );
@@ -1590,10 +1736,10 @@ Public dir: "${config.publicDir}"`
           this.emitFile({
             type: "asset",
             fileName: "manifest.json",
-            source: JSON.stringify(manifest2, null, 2)
+            source: JSON.stringify(manifest2, null, 2) + "\n"
           });
         } else {
-          manifestJson.source = JSON.stringify(manifest2, null, 2);
+          manifestJson.source = JSON.stringify(manifest2, null, 2) + "\n";
         }
         delete bundle[manifestName];
       }
@@ -1609,7 +1755,11 @@ function compileFileResources(fileName, {
   assets: /* @__PURE__ */ new Set(),
   css: /* @__PURE__ */ new Set(),
   imports: /* @__PURE__ */ new Set()
-}) {
+}, processedFiles = /* @__PURE__ */ new Set()) {
+  if (processedFiles.has(fileName)) {
+    return resources;
+  }
+  processedFiles.add(fileName);
   const chunk = chunks.get(fileName);
   if (chunk) {
     const { modules, facadeModuleId, imports, dynamicImports } = chunk;
@@ -1618,7 +1768,7 @@ function compileFileResources(fileName, {
     for (const x of dynamicImports)
       resources.imports.add(x);
     for (const x of [...imports, ...dynamicImports])
-      compileFileResources(x, { chunks, files, config }, resources);
+      compileFileResources(x, { chunks, files, config }, resources, processedFiles);
     for (const m of Object.keys(modules))
       if (m !== facadeModuleId) {
         const key = prefix$1("/", relative(config.root, m.split("?")[0]));
@@ -1631,7 +1781,8 @@ function compileFileResources(fileName, {
             compileFileResources(
               script.fileName,
               { chunks, files, config },
-              resources
+              resources,
+              processedFiles
             );
           }
       }
@@ -1650,7 +1801,7 @@ function compileFileResources(fileName, {
 const defineManifest = (manifest) => manifest;
 const defineDynamicResource = ({
   matches = ["http://*/*", "https://*/*"],
-  use_dynamic_url = true
+  use_dynamic_url = false
 }) => ({
   matches,
   resources: [DYNAMIC_RESOURCE],
@@ -1662,22 +1813,34 @@ _debug("web-acc-res");
 const pluginWebAccessibleResources = () => {
   let config;
   let injectCss;
+  let browser;
   return [
     {
       name: "crx:web-accessible-resources",
       apply: "serve",
       enforce: "post",
+      async config(config2) {
+        const opts = await getOptions(config2);
+        browser = opts.browser || "chrome";
+      },
       renderCrxManifest(manifest) {
         manifest.web_accessible_resources = manifest.web_accessible_resources ?? [];
         manifest.web_accessible_resources = manifest.web_accessible_resources.map(({ resources, ...rest }) => ({
           resources: resources.filter((r) => r !== DYNAMIC_RESOURCE),
           ...rest
         })).filter(({ resources }) => resources.length);
-        manifest.web_accessible_resources.push({
-          use_dynamic_url: true,
+        const war = {
+          // all web origins can access
           matches: ["<all_urls>"],
-          resources: ["**/*", "*"]
-        });
+          // all resources are web accessible
+          resources: ["**/*", "*"],
+          // change the extension origin on every reload
+          use_dynamic_url: false
+        };
+        if (browser === "firefox") {
+          delete war.use_dynamic_url;
+        }
+        manifest.web_accessible_resources.push(war);
         return manifest;
       }
     },
@@ -1686,7 +1849,9 @@ const pluginWebAccessibleResources = () => {
       apply: "build",
       enforce: "post",
       async config({ build, ...config2 }, { command }) {
-        const { contentScripts: contentScripts2 = {} } = await getOptions(config2);
+        const opts = await getOptions(config2);
+        const contentScripts2 = opts.contentScripts || {};
+        browser = opts.browser || "chrome";
         injectCss = contentScripts2.injectCss ?? true;
         return { ...config2, build: { ...build, manifest: command === "build" } };
       },
@@ -1715,9 +1880,11 @@ const pluginWebAccessibleResources = () => {
           dynamicScriptMatches.add("https://*/*");
         }
         if (contentScripts.size > 0) {
+          const viteMajorVersion = parseInt(version.split(".")[0]);
+          const manifestPath = viteMajorVersion > 4 ? ".vite/manifest.json" : "manifest.json";
           const viteManifest = parseJsonAsset(
             bundle,
-            "manifest.json"
+            manifestPath
           );
           const viteFiles = /* @__PURE__ */ new Map();
           for (const [, file] of Object.entries(viteManifest))
@@ -1745,12 +1912,12 @@ const pluginWebAccessibleResources = () => {
                     { chunks: bundleChunks, files: viteFiles, config }
                   );
                   contentScripts.get(key).css = [...css];
-                  if (type === "loader")
+                  if (type === "loader" || isDynamicScript)
                     imports.add(fileName);
                   const resource = {
                     matches: isDynamicScript ? [...dynamicScriptMatches] : matches,
                     resources: [...assets, ...imports],
-                    use_dynamic_url: isDynamicScript ? dynamicScriptDynamicUrl : true
+                    use_dynamic_url: isDynamicScript ? dynamicScriptDynamicUrl : false
                   };
                   if (isDynamicScript || !injectCss) {
                     resource.resources.push(...css);
@@ -1794,6 +1961,11 @@ const pluginWebAccessibleResources = () => {
               use_dynamic_url
             });
           }
+        if (browser === "firefox") {
+          for (const war of combinedResources) {
+            delete war.use_dynamic_url;
+          }
+        }
         if (combinedResources.length === 0)
           delete manifest.web_accessible_resources;
         else
@@ -1805,6 +1977,7 @@ const pluginWebAccessibleResources = () => {
 };
 
 const crx = (options) => {
+  contentScripts.clear();
   return [
     pluginOptionsProvider(options),
     pluginBackground(),