@crxjs/vite-plugin 2.0.0-beta.9 → 2.0.1

package/README.md

@@ -1,30 +1,54 @@
-# ![CRXJS](./banner-github.png)
+![CRXJS](./banner-github.png)
 
-[![npm (scoped)](https://img.shields.io/npm/v/@crxjs/vite-plugin.svg)](https://www.npmjs.com/package/@crxjs/vite-plugin)
-[![GitHub last commit](https://img.shields.io/github/last-commit/crxjs/chrome-extension-tools.svg?logo=github)](https://github.com/crxjs/rollup-plugin-chrome-extension)
-![GitHub action badge](https://github.com/crxjs/chrome-extension-tools/actions/workflows/vite-plugin.yml/badge.svg)
+<h1 align="center">CRXJS</h1>
 
-## CRXJS Vite Plugin
+<p align="center">
+Modern Chrome extension development with built-in <code>HMR</code> and <code>zero-config</code> setup
+</p>
 
-> Build a Chrome Extension with [Vite](https://vitejs.dev)⚡
+<p align="center">
+<a href="https://www.npmjs.com/package/@crxjs/vite-plugin">
+<img src="https://img.shields.io/npm/v/@crxjs/vite-plugin?color=298cd6&amp;label=CRXJS&labelColor=f2bae4" alt="NPM version">
+</a>
+</p>
 
-CRXJS brings the Vite developer experience to Chrome Extensions:
+<h2 align="center">
+<a href="https://crxjs.dev/vite-plugin">📚 Documentation</a> |
+<a href="https://discord.gg/5yHKEa9v">💬 Discord </a>
+</h2>
 
-- True HMR for extension pages and content scripts
-- Simple config - everything is in the extension manifest
-- Static asset imports with automatic web-accessible resources
 
-## Getting Started
+## 📦 Create CRXJS Project
+```shell
+npm create crxjs@latest
+``` 
 
-See the CRXJS documentation to
-[get started in 90 seconds 🚀](https://crxjs.dev/vite-plugin)
+> [!IMPORTANT]
+> `@latest` MUST NOT be omitted, otherwise `npm` may resolve to a cached and outdated version of the package.
 
-## Supporting
+## ✨ Features
 
-If these plugins have helped you ship your product faster, please consider
-[sponsoring me](https://github.com/sponsors/jacksteamdev) on GitHub.
+- 🧩 **Full Vite Plugin Ecosystem** - Leverage any Vite-compatible plugins with zero extra setup  
+- ⚙️ **Zero Configuration** - Start developing immediately with intelligent defaults  
+- 3️⃣ **Manifest V3 Support** - Built for modern Chrome extensions with enhanced security  
+- 🔥 **True Hot Module Replacement** - Instant UI updates while preserving extension state 🎈**works with content scripts**
+- 📁 **Static Asset Import** - Directly reference images/fonts in your code
+- 🤖 **Auto Web-Accessible Resources** - Automatic generation of `web_accessible_resources` manifest entries  
+
+> [!NOTE]  
+> Looking for MV2 support? See [`rollup-plugin`](packages/rollup-plugin/README.md)  
+
+## 💝 Contributors
+
+This project exists thanks to all the people who contribute.
 
-## Contributing
+And thank you to all our backers! 🙏
 
-We encourage pull requests! This is a
-[pnpm monorepo](https://pnpm.io/workspaces), so use pnpm instead of Yarn or npm.
+<a href="https://github.com/crxjs/chrome-extension-tools/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=crxjs/chrome-extension-tools" />
+</a>
+
+## 🤝 Supporting
+
+If these plugins have helped you ship your product faster, please consider
+[sponsoring me](https://github.com/sponsors/jacksteamdev) on GitHub.

package/client.d.ts

@@ -57,3 +57,18 @@ declare module '*?script&module' {
   const fileName: string
   export default fileName
 }
+
+declare namespace ContentScriptAPI {
+  export interface ExecuteFnOptions {
+    perf: {
+      injectTime: number
+      loadTime: number
+    }
+  }
+  export interface ExecuteFn {
+    (options: ExecuteFnOptions): void
+  }
+  export interface ModuleExports {
+    onExecute?: ExecuteFn
+  }
+}

package/dist/index.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const defineManifest = (manifest) => manifest;
 const defineDynamicResource = ({
   matches = ["http://*/*", "https://*/*"],
-  use_dynamic_url = true
+  use_dynamic_url = false
 }) => ({
   matches,
   resources: [DYNAMIC_RESOURCE],

package/dist/index.d.ts

@@ -17,6 +17,14 @@ interface WebAccessibleResourceById {
     resources: string[];
     use_dynamic_url?: boolean;
 }
+interface ChromeManifestBackground {
+    service_worker: string;
+    type?: 'module' | (string & {});
+}
+interface FirefoxManifestBackground {
+    scripts: string[];
+    persistent?: false;
+}
 interface ManifestV3 {
     manifest_version: number;
     name: string;
@@ -25,11 +33,13 @@ interface ManifestV3 {
     description?: string | undefined;
     icons?: chrome.runtime.ManifestIcons | undefined;
     action?: chrome.runtime.ManifestAction | undefined;
-    author?: string | undefined;
-    background?: {
-        service_worker: string;
-        type?: 'module';
+    /**
+     * @see https://developer.chrome.com/docs/extensions/reference/manifest/author
+     */
+    author?: {
+        email: string;
     } | undefined;
+    background?: ChromeManifestBackground | FirefoxManifestBackground | undefined;
     chrome_settings_overrides?: {
         homepage?: string | undefined;
         search_provider?: chrome.runtime.SearchProvider | undefined;
@@ -118,12 +128,12 @@ interface ManifestV3 {
     } | undefined;
     incognito?: string | undefined;
     input_components?: {
-        name?: string | undefined;
-        type?: string | undefined;
+        name: string;
         id?: string | undefined;
-        description?: string | undefined;
-        language?: string | undefined;
-        layouts?: string[] | undefined;
+        language?: string | string[] | undefined;
+        layouts?: string | string[] | undefined;
+        input_view?: string | undefined;
+        options_page?: string | undefined;
     }[] | undefined;
     key?: string | undefined;
     minimum_chrome_version?: string | undefined;
@@ -166,6 +176,9 @@ interface ManifestV3 {
         pages: string[];
         content_security_policy?: string | undefined;
     } | undefined;
+    side_panel?: {
+        default_path?: string | undefined;
+    } | undefined;
     short_name?: string | undefined;
     spellcheck?: {
         dictionary_language?: string | undefined;
@@ -189,9 +202,98 @@ interface ManifestV3 {
     web_accessible_resources?: (WebAccessibleResourceById | WebAccessibleResourceByMatch)[] | undefined;
 }
 
-declare type ManifestV3Export = ManifestV3 | Promise<ManifestV3> | ManifestV3Fn;
-declare type ManifestV3Fn = (env: ConfigEnv) => ManifestV3 | Promise<ManifestV3>;
-declare const defineManifest: (manifest: ManifestV3Export) => ManifestV3Export;
+type ManifestV3Fn = (env: ConfigEnv) => ManifestV3 | Promise<ManifestV3>;
+type ManifestV3Export = ManifestV3 | Promise<ManifestV3> | ManifestV3Fn;
+type Code = '.' | '/' | '\\';
+type ManifestFilePath<T extends string> = T extends `${Code}${string}` ? never : T extends `${string}.${infer Ext}` ? Ext extends '' ? never : T : never;
+interface ManifestIcons<T extends string> {
+    [size: number]: ManifestFilePath<T>;
+}
+type FilePathFields<T extends string> = {
+    icons?: ManifestIcons<T>;
+    action?: {
+        /**
+         * - Relative to Vite project root (where vite.config.js is)
+         * - Format: "subdir/icon.png" (no leading ./ or /)
+         *
+         * @example "assets/icon.png"
+         */
+        default_icon?: ManifestIcons<T>;
+        default_title?: string;
+        /**
+         * - Relative to Vite project root (where vite.config.js is)
+         * - Format: "subdir/index.html" (no leading ./ or /)
+         *
+         * @example "src/popup.html"
+         */
+        default_popup?: ManifestFilePath<T>;
+    };
+    background?: {
+        /**
+         * - Relative to Vite project root (where vite.config.js is)
+         * - Format: "subdir/index.js" (no leading ./ or /)
+         *
+         * @example "src/background.js"
+         */
+        service_worker: ManifestFilePath<T>;
+        type?: 'module' | (string & {});
+    } | FirefoxManifestBackground;
+    content_scripts?: {
+        matches?: string[];
+        exclude_matches?: string[];
+        /**
+         * - Relative to Vite project root (where vite.config.js is)
+         * - Format: "subdir/content.css" (no leading ./ or /)
+         *
+         * @example "src/content.css"
+         */
+        css?: ManifestFilePath<T>[];
+        /**
+         * - Relative to Vite project root (where vite.config.js is)
+         * - Format: "subdir/content.js" (no leading ./ or /)
+         *
+         * @example "src/content.js"
+         */
+        js?: ManifestFilePath<T>[];
+        run_at?: string;
+        all_frames?: boolean;
+        match_about_blank?: boolean;
+        include_globs?: string[];
+        exclude_globs?: string[];
+    }[];
+    input_components?: {
+        name: string;
+        id?: string;
+        language?: string | string[];
+        layouts?: string | string[];
+        input_view?: string;
+        /**
+         * - Relative to Vite project root (where vite.config.js is)
+         * - Format: "subdir/options.html" (no leading ./ or /)
+         *
+         * @example "src/options.html"
+         */
+        options_page?: ManifestFilePath<T>;
+    }[];
+    /**
+     * - Relative to Vite project root (where vite.config.js is)
+     * - Format: "subdir/options.html" (no leading ./ or /)
+     *
+     * @example "src/options.html"
+     */
+    options_page?: ManifestFilePath<T>;
+    /**
+     * - Relative to Vite project root (where vite.config.js is)
+     * - Format: "subdir/devtools.html" (no leading ./ or /)
+     *
+     * @example "src/devtools.html"
+     */
+    devtools_page?: ManifestFilePath<T>;
+};
+type ManifestOptions<T extends string> = Omit<ManifestV3, keyof FilePathFields<string>> & FilePathFields<T>;
+type ManifestV3Options<T extends string = string> = ManifestOptions<T> | Promise<ManifestOptions<T>> | ManifestV3Define<T>;
+type ManifestV3Define<T extends string> = (env: ConfigEnv) => ManifestOptions<T> | Promise<ManifestOptions<T>>;
+declare const defineManifest: <T extends string>(manifest: ManifestV3Options<T>) => ManifestV3Export;
 /**
  * Content script resources like CSS and image files must be declared in the
  * manifest under `web_accessible_resources`. Manifest V3 uses a match pattern
@@ -219,19 +321,25 @@ declare const defineManifest: (manifest: ManifestV3Export) => ManifestV3Export;
  */
 declare const defineDynamicResource: ({ matches, use_dynamic_url, }: Omit<WebAccessibleResourceByMatch, 'resources'>) => WebAccessibleResourceByMatch;
 
-declare type CrxDevAssetId = {
+type CrxDevAssetId = {
     id: string;
     type: 'asset';
     source?: string | Uint8Array;
 };
-declare type CrxDevScriptId = {
+type CrxDevScriptId = {
     id: string;
     type: 'module' | 'iife';
 };
 interface CrxPlugin extends Plugin {
-    /** Runs during the transform hook for the manifest. Filenames use input filenames. */
+    /**
+     * Runs during the transform hook for the manifest. Filenames use input
+     * filenames.
+     */
     transformCrxManifest?: (this: PluginContext, manifest: ManifestV3) => Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined;
-    /** Runs during generateBundle, before manifest output. Filenames use output filenames. */
+    /**
+     * Runs during generateBundle, before manifest output. Filenames use output
+     * filenames.
+     */
     renderCrxManifest?: (this: PluginContext, manifest: ManifestV3, bundle: OutputBundle) => Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined;
     /**
      * Runs in the file writer on content scripts during development. `script.id`
@@ -246,12 +354,18 @@ interface CrxOptions {
         injectCss?: boolean;
     };
     fastGlobOptions?: Options;
+    /**
+     * The browser that this extension is targeting, can be "firefox" or "chrome".
+     * Default is "chrome".
+     */
+    browser?: Browser;
 }
+type Browser = 'firefox' | 'chrome';
 
 /** Resolves when all existing files in scriptFiles are written. */
 declare function allFilesReady(): Promise<void>;
 
-declare type FileWriterId = {
+type FileWriterId = {
     type: CrxDevAssetId['type'] | CrxDevScriptId['type'] | 'loader';
     id: string;
 };

package/dist/index.mjs

@@ -1,22 +1,22 @@
 import { simple } from 'acorn-walk';
 import { createHash } from 'crypto';
-import debug$2 from 'debug';
-import v8 from 'v8';
-import { posix } from 'path';
-import { Subject, filter, ReplaySubject, switchMap, of, startWith, map, mergeMap, firstValueFrom, takeUntil, first, toArray, retry, concatWith, Subscription, buffer } from 'rxjs';
+import debug$3 from 'debug';
+import { join, normalize, isAbsolute, basename, relative, resolve, dirname, parse } from 'pathe';
+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 pc from 'picocolors';
 import { load } from 'cheerio';
 import jsesc from 'jsesc';
-import colors from 'picocolors';
 
 const pluginName$1 = "crx:optionsProvider";
 const pluginOptionsProvider = (options) => {
@@ -24,8 +24,10 @@ 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
     }
   };
 };
@@ -56,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(fetchEvent.request));\n  }\n});\nasync function sendToServer(req) {\n  const url = new URL(req.url);\n  const requestHeaders = new Headers(req.headers);\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    headers: requestHeaders\n  });\n  const responseHeaders = new Headers(response.headers);\n  responseHeaders.set(\"Content-Type\", responseHeaders.get(\"Content-Type\") ?? \"text/javascript\");\n  responseHeaders.set(\"Cache-Control\", responseHeaders.get(\"Cache-Control\") ?? \"\");\n  return new Response(response.body, {\n    headers: responseHeaders\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) => {\n      if (chrome.runtime.lastError) {\n        console.error(chrome.runtime.lastError);\n      }\n      ports.delete(port2);\n    });\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 socketToken = __HMR_TOKEN__;\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;\nconst socket = new WebSocket(`${socketProtocol}://${socketHost}?token=${socketToken}`, \"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) {
@@ -113,22 +112,6 @@ const getMatchPatternOrigin = (pattern) => {
   return pathname ? `${root}/*` : root;
 };
 
-const {
-  basename,
-  dirname,
-  extname,
-  delimiter,
-  format,
-  isAbsolute,
-  join,
-  normalize,
-  parse,
-  relative,
-  resolve,
-  toNamespacedPath,
-  sep
-} = posix;
-
 function defineClientValues(code, config) {
   let options = config.server.hmr;
   options = options && typeof options !== "boolean" ? options : {};
@@ -152,7 +135,7 @@ function defineClientValues(code, config) {
   if (hmrBase !== "/") {
     hmrPort = normalize(`${hmrPort}${hmrBase}`);
   }
-  return code.replace(`__MODE__`, JSON.stringify(config.mode)).replace(`__BASE__`, JSON.stringify(config.base)).replace(`__DEFINES__`, serializeDefine(config.define || {})).replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol)).replace(`__HMR_HOSTNAME__`, JSON.stringify(host)).replace(`__HMR_PORT__`, JSON.stringify(hmrPort)).replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout)).replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay)).replace(`__SERVER_PORT__`, JSON.stringify(config.server.port?.toString()));
+  return code.replace(`__MODE__`, JSON.stringify(config.mode)).replace(`__BASE__`, JSON.stringify(config.base)).replace(`__DEFINES__`, serializeDefine(config.define || {})).replace(`__HMR_TOKEN__`, JSON.stringify(config.webSocketToken || "")).replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol)).replace(`__HMR_HOSTNAME__`, JSON.stringify(host)).replace(`__HMR_PORT__`, JSON.stringify(hmrPort)).replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout)).replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay)).replace(`__SERVER_PORT__`, JSON.stringify(config.server.port?.toString()));
   function serializeDefine(define) {
     let res = `{`;
     for (const key in define) {
@@ -204,7 +187,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("@")) {
@@ -272,6 +255,7 @@ const workerClientId = "/@crx/client-worker";
 
 const pluginBackground = () => {
   let config;
+  let browser;
   return [
     {
       name: "crx:background-client",
@@ -292,24 +276,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}';
 `;
@@ -318,13 +317,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;
       }
     }
@@ -333,9 +340,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 }) => {
@@ -393,6 +400,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)),
@@ -426,16 +437,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;
@@ -455,7 +486,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] };
     })
@@ -526,8 +558,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" })];
@@ -543,6 +578,7 @@ async function write(fileId) {
           await outputFile(target, source, { encoding: "utf8" });
         return files;
       }),
+      // abort write operation on close event
       takeUntil(close$),
       concatWith(of([]))
     )
@@ -633,7 +669,20 @@ const pluginContentScripts = () => {
       name: "crx:content-scripts",
       apply: "build",
       enforce: "pre",
-      generateBundle() {
+      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(_options, bundle) {
         for (const [key, script] of contentScripts)
           if (key === script.refId) {
             if (script.type === "module") {
@@ -642,12 +691,22 @@ const pluginContentScripts = () => {
             } else if (script.type === "loader") {
               const fileName = this.getFileName(script.refId);
               script.fileName = fileName;
-              const refId = this.emitFile({
-                type: "asset",
-                name: getFileName({ type: "loader", id: basename(script.id) }),
-                source: createProLoader({ fileName })
-              });
-              script.loaderName = this.getFileName(refId);
+              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: createProLoader({ fileName })
+                });
+                script.loaderName = this.getFileName(refId);
+              } else {
+                bundleFileInfo.code = `(function(){${bundleFileInfo.code}})()
+`;
+              }
             } else if (script.type === "iife") {
               throw new Error("IIFE content scripts are not implemented");
             }
@@ -707,6 +766,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");
@@ -775,7 +862,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(
@@ -788,6 +874,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") {
@@ -817,29 +909,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;
@@ -884,7 +989,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(
@@ -905,7 +1012,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),
@@ -914,12 +1021,12 @@ 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
   };
 }
 async function dirFiles(dir) {
-  const files = await fg(`${dir}/**/*`);
+  const files = await fg(join(dir, "**", "*"));
   return files;
 }
 function htmlFiles(manifest) {
@@ -929,7 +1036,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)];
 }
@@ -954,11 +1062,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;
@@ -1017,6 +1127,7 @@ const crxHMRPayload$ = hmrPayload$.pipe(
     }
   }),
   map((data) => {
+    debug$2(`hmr payload`, data);
     return {
       type: "custom",
       event: "crx:content-script-payload",
@@ -1056,6 +1167,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;
@@ -1065,6 +1177,7 @@ const pluginHMR = () => {
         server.hmr.host = "localhost";
         return { server, ...config2 };
       },
+      // server should ignore outdir
       configResolved(_config) {
         config = _config;
         const { watch = {} } = config.server;
@@ -1102,19 +1215,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)
@@ -1129,6 +1247,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;
@@ -1151,6 +1270,31 @@ const pluginHMR = () => {
   ];
 };
 
+function printStr(dir) {
+  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")}
+  
+  ${pc.green("\u279C")}  ${pc.bold("CRXJS")}: ${pc.green(`Load ${pc.cyan(dir)} as unpacked extension`)}`;
+}
+const pluginPrint = () => {
+  let outDir = "dist";
+  return [
+    {
+      name: "crx:print",
+      enforce: "pre",
+      configResolved(resolvedConfig) {
+        outDir = resolvedConfig.build.outDir;
+      },
+      configureServer(server) {
+        server.printUrls = () => {
+          console.log(printStr(outDir));
+        };
+      }
+    }
+  ];
+};
+
 var loader = "try {\n  for (const p of JSON.parse(SCRIPTS)) {\n    const url = new URL(p, \"https://stub\");\n    url.searchParams.set(\"t\", Date.now().toString());\n    const req = url.pathname + url.search;\n    await import(\n      /* @vite-ignore */\n      req\n    );\n  }\n} catch (error) {\n  console.error(error);\n}\n";
 
 const pluginName = "crx:html-inline-scripts";
@@ -1219,6 +1363,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);
@@ -1284,9 +1429,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 = () => {
@@ -1465,7 +1610,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({
@@ -1475,6 +1620,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({
@@ -1485,7 +1640,7 @@ const pluginManifest = () => {
           }
         }
         const encoded = encodeManifest(manifest2);
-        return encoded;
+        return { code: encoded, map: null };
       },
       async generateBundle(options, bundle) {
         const manifestName = this.getFileName(refId);
@@ -1499,11 +1654,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 {
@@ -1530,11 +1690,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`);
@@ -1563,6 +1723,7 @@ Public dir: "${config.publicDir}"`
               this.emitFile({
                 type: "asset",
                 fileName: f,
+                // TODO: cache source buffer
                 source: await readFile(filename)
               });
             }
@@ -1571,17 +1732,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}`
               )
             })
           );
@@ -1591,10 +1755,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];
       }
@@ -1610,7 +1774,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;
@@ -1619,7 +1787,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]));
@@ -1632,7 +1800,8 @@ function compileFileResources(fileName, {
             compileFileResources(
               script.fileName,
               { chunks, files, config },
-              resources
+              resources,
+              processedFiles
             );
           }
       }
@@ -1651,7 +1820,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],
@@ -1663,22 +1832,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;
       }
     },
@@ -1687,7 +1868,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" } };
       },
@@ -1716,9 +1899,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))
@@ -1746,12 +1931,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);
@@ -1795,6 +1980,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
@@ -1806,6 +1996,7 @@ const pluginWebAccessibleResources = () => {
 };
 
 const crx = (options) => {
+  contentScripts.clear();
   return [
     pluginOptionsProvider(options),
     pluginBackground(),
@@ -1819,7 +2010,8 @@ const crx = (options) => {
     pluginWebAccessibleResources(),
     pluginContentScriptsCss(),
     pluginHMR(),
-    pluginManifest()
+    pluginManifest(),
+    pluginPrint()
   ].flat();
 };
 const chromeExtension = crx;

package/index.cjs

@@ -0,0 +1,8 @@
+Object.assign(module.exports, require('./dist/index.cjs'))
+
+// async functions, can be redirect from ESM build
+const asyncFunctions = ['crx', 'chromeExtension', 'allFilesReady', 'filesReady']
+asyncFunctions.forEach((name) => {
+  module.exports[name] = (...args) =>
+    import('./dist/index.mjs').then((i) => i[name](...args))
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.1",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -35,60 +35,45 @@
       "types": "./client.d.ts"
     }
   },
-  "main": "dist/index.cjs",
+  "main": "index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
     "types",
     "manifest.schema.json",
-    "schema",
+    "index.cjs",
     "client.d.ts"
   ],
-  "scripts": {
-    "format": "prettier -w -c ../../.prettierrc.yaml",
-    "build": "run-s build:clean build:js",
-    "build:clean": "rimraf dist",
-    "build:js": "rollup -c rollup.config.ts --configPlugin esbuild",
-    "dev:js": "npm run build:js -- -w",
-    "dev:lint": "tsc --noEmit --watch",
-    "lint": "run-s lint:eslint lint:types",
-    "lint:eslint": "eslint \"{src,test}/**/*.ts\"",
-    "lint:types": "tsc --noEmit",
-    "test": "vitest --mode unit",
-    "test:e2e": "vitest --mode e2e",
-    "test:run": "run-s test:run:*",
-    "test:run:out": "vitest --run --mode out",
-    "test:run:e2e": "vitest --run --mode e2e",
-    "test:update": "run-s \"test:run:out --update\" \"test:run:e2e --update\""
-  },
   "dependencies": {
     "@rollup/pluginutils": "^4.1.2",
     "@webcomponents/custom-elements": "^1.5.0",
     "acorn-walk": "^8.2.0",
     "cheerio": "^1.0.0-rc.10",
-    "connect-injector": "^0.4.4",
+    "convert-source-map": "^1.7.0",
     "debug": "^4.3.3",
     "es-module-lexer": "^0.10.0",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.0.1",
     "jsesc": "^3.0.2",
-    "magic-string": "^0.26.0",
+    "magic-string": "^0.30.12",
+    "pathe": "^2.0.1",
     "picocolors": "^1.0.0",
     "react-refresh": "^0.13.0",
-    "rollup": "2.78.1",
+    "rollup": "2.79.2",
     "rxjs": "7.5.7"
   },
   "devDependencies": {
     "@extend-chrome/messages": "1.2.2",
     "@extend-chrome/storage": "1.5.0",
-    "@rollup/plugin-alias": "4.0.2",
+    "@rollup/plugin-alias": "4.0.4",
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-json": "^5.0.0",
     "@rollup/plugin-node-resolve": "13.2.0",
-    "@sveltejs/vite-plugin-svelte": "1.1.0",
+    "@sveltejs/vite-plugin-svelte": "1.4.0",
     "@types/acorn": "4.0.6",
-    "@types/chrome": "0.0.198",
+    "@types/chrome": "0.0.237",
+    "@types/convert-source-map": "^2.0.0",
     "@types/debug": "4.1.7",
     "@types/fs-extra": "9.0.13",
     "@types/jest-image-snapshot": "^5.1.0",
@@ -98,26 +83,43 @@
     "@types/react-dom": "17.0.18",
     "@typescript-eslint/eslint-plugin": "5.41.0",
     "@typescript-eslint/parser": "5.41.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@vitejs/plugin-react": "^2.2.0",
     "@vitejs/plugin-vue": "3.2.0",
     "chokidar": "^3.5.3",
-    "esbuild": "0.15.16",
+    "esbuild": "0.17.14",
     "esbuild-runner": "2.2.2",
-    "eslint": "8.26.0",
+    "eslint": "8.43.0",
     "eslint-plugin-react": "^7.29.4",
     "jest-image-snapshot": "^5.2.0",
     "npm-run-all": "^4.1.5",
-    "playwright-chromium": "1.27.1",
+    "playwright-chromium": "1.52.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
     "rollup-plugin-dts": "^4.2.0",
-    "rollup-plugin-esbuild": "4.10.1",
+    "rollup-plugin-esbuild": "4.10.3",
     "svelte": "^3.48.0",
     "typescript": "^4.6.4",
-    "vite": "^3.1.7",
-    "vite-plugin-inspect": "0.7.5",
-    "vitest": "0.24.3",
-    "vue": "3.2.41"
+    "vite": "^3.2.11",
+    "vite-plugin-inspect": "0.7.25",
+    "vitest": "0.28.5",
+    "vue": "3.2.47"
+  },
+  "scripts": {
+    "format": "prettier -w -c ../../.prettierrc.yaml",
+    "build": "run-s build:clean build:js",
+    "build:clean": "rimraf dist",
+    "build:js": "rollup -c rollup.config.ts --configPlugin esbuild",
+    "dev:js": "npm run build:js -- -w",
+    "dev:lint": "tsc --noEmit --watch",
+    "lint": "run-s lint:eslint lint:types",
+    "lint:eslint": "eslint \"{src,test}/**/*.ts\"",
+    "lint:types": "tsc --noEmit",
+    "test": "vitest --mode unit",
+    "test:e2e": "vitest --mode e2e",
+    "test:run": "run-s test:run:*",
+    "test:run:out": "vitest --run --mode out",
+    "test:run:e2e": "vitest --run --mode e2e",
+    "test:update": "run-s \"test:run:out --update\" \"test:run:e2e --update\""
   }
-}
+}