@crxjs/vite-plugin 2.4.0 → 2.5.0

package/client.d.ts

@@ -43,6 +43,21 @@ declare module '*?script&iife' {
   export default fileName
 }
 
+declare module '*?iife' {
+  /**
+   * Alias for `*?script&iife`.
+   *
+   * Script format is IIFE. Use for content scripts with opaque origins.
+   *
+   * Exports the file name of the output script file.
+   *
+   * If imported inside a content script, RPCE will include the file name in
+   * `web_accessible_resources`.
+   */
+  const fileName: string
+  export default fileName
+}
+
 declare module '*?script&module' {
   /**
    * Script format is ESM. No loader and no HMR. Does not support frameworks

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ConfigEnv, Plugin, PluginOption } from 'vite';
 import { IsStringLiteral } from 'type-fest';
-import { Options } from 'fast-glob';
+import { GlobOptions } from 'tinyglobby';
 import { PluginContext, OutputBundle } from 'rollup';
 
 interface DeclarativeNetRequestResource {
@@ -209,7 +209,7 @@ interface ManifestV3 {
             strict_min_version?: string | undefined;
             strict_max_version?: string | undefined;
             update_url?: string | undefined;
-            data_collection_permissions: {
+            data_collection_permissions?: {
                 /**
                  * available value: "personallyIdentifyingInfo" | "healthInfo" | "financialAndPaymentInfo" | "authenticationInfo" | "personalCommunications" | "locationInfo" | "browsingActivity" | "websiteContent" | "websiteActivity" | "searchTerms" | "bookmarksInfo" | "none".
                  * see also: https://extensionworkshop.com/documentation/develop/firefox-builtin-data-consent/
@@ -385,13 +385,46 @@ interface CrxOptions {
         preambleCode?: string | false;
         hmrTimeout?: number;
         injectCss?: boolean;
+        /**
+         * List of content script files (relative to project root) that should be
+         * built as standalone IIFE bundles (self-contained, no loader, all imports
+         * inlined). This allows using normal filenames (without the `.iife.*`
+         * convention) for IIFE content scripts, e.g. for `world: 'MAIN'` or to
+         * avoid loader overhead.
+         *
+         * The files must still be listed in `manifest.content_scripts` (or used
+         * via `?script` / `?iife`).
+         *
+         * Example:
+         *   crx({
+         *     manifest,
+         *     contentScripts: {
+         *       standaloneFiles: ['src/injected.ts', 'src/another.js']
+         *     }
+         *   })
+         */
+        standaloneFiles?: string[];
     };
-    fastGlobOptions?: Options;
+    globOptions?: GlobOptions;
     /**
      * The browser that this extension is targeting, can be "firefox" or "chrome".
      * Default is "chrome".
      */
     browser?: Browser;
+    /**
+     * Enable automatic extension reload and HMR during development. When false:
+     *
+     * - The extension will not call `chrome.runtime.reload()` on background changes
+     *   or dev server reconnection.
+     * - Content scripts will not receive HMR updates or reload their host pages.
+     * - Files are still rebuilt and written to the output directory on change.
+     *
+     * Use this when content scripts have side effects on injection and you want
+     * to manually reload the extension in the browser.
+     *
+     * Default is `true`.
+     */
+    liveReload?: boolean;
 }
 type Browser = 'firefox' | 'chrome';
 

package/dist/index.mjs

@@ -9,12 +9,12 @@ 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 { build, mergeConfig, createLogger, version } from 'vite';
 import convertSourceMap from 'convert-source-map';
-import pc from 'picocolors';
-import { createLogger, version } from 'vite';
+import colors from 'picocolors';
 import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
-import fg from 'fast-glob';
+import { glob, isDynamicPattern } from 'tinyglobby';
 import { parse } from 'node-html-parser';
 import jsesc from 'jsesc';
 
@@ -58,7 +58,7 @@ function isCrxPlugin(p) {
   return !!p && typeof p === "object" && !(p instanceof Promise) && !Array.isArray(p) && p.name.startsWith("crx:");
 }
 
-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 = __SERVER_PROTO__ + \":\";\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(\n    \"Content-Type\",\n    responseHeaders.get(\"Content-Type\") ?? \"text/javascript\"\n  );\n  responseHeaders.set(\n    \"Cache-Control\",\n    responseHeaders.get(\"Cache-Control\") ?? \"\"\n  );\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(\n  `${socketProtocol}://${socketHost}?token=${socketToken}`,\n  \"vite-hmr\"\n);\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 = __SERVER_PROTO__ + \":\";\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(\n    \"Content-Type\",\n    responseHeaders.get(\"Content-Type\") ?? \"text/javascript\"\n  );\n  responseHeaders.set(\n    \"Cache-Control\",\n    responseHeaders.get(\"Cache-Control\") ?? \"\"\n  );\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(\n  `${socketProtocol}://${socketHost}?token=${socketToken}`,\n  \"vite-hmr\"\n);\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  if (!__LIVE_RELOAD__) {\n    if (payload.event === \"crx:runtime-reload\") {\n      console.log(\"[crx] runtime reload suppressed (liveReload disabled)\");\n    }\n    return;\n  }\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  if (__LIVE_RELOAD__) {\n    handleCrxHmrPayload({\n      type: \"custom\",\n      event: \"crx:runtime-reload\"\n    });\n  } else {\n    console.log(\n      \"[crx] server reconnected, skipping reload (liveReload disabled)\"\n    );\n  }\n});\n";
 
 const _debug = (id) => debug$5("crx").extend(id);
 const hash = (data, length = 5) => createHash("sha1").update(data).digest("base64").replace(/[^A-Za-z0-9]/g, "").slice(0, length);
@@ -209,7 +209,7 @@ function formatFileData(script) {
   return script;
 }
 function getFileName({ type, id }) {
-  let fileName = id.replace(/t=\d+&/, "").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, "--").replace(/:/g, "-");
   if (fileName.includes("node_modules/")) {
     fileName = `vendor/${fileName.split("node_modules/").pop().replace(/\//g, "-")}`;
   } else if (fileName.startsWith("@")) {
@@ -248,7 +248,7 @@ function getViteUrl({ type, id }) {
   if (type === "asset") {
     throw new Error(`File type "${type}" not implemented.`);
   } else if (type === "iife") {
-    throw new Error(`File type "${type}" not implemented.`);
+    throw new Error(`File type "iife" is handled via dedicated IIFE bundler, not Vite transform.`);
   } else if (type === "loader") {
     throw new Error("Vite does not transform loader files.");
   } else if (type === "module") {
@@ -293,6 +293,7 @@ function getContentCssIndex(id) {
 const pluginBackground = () => {
   let config;
   let browser;
+  let liveReload = true;
   return [
     {
       name: "crx:background-client",
@@ -305,7 +306,7 @@ const pluginBackground = () => {
         if (id === workerClientId) {
           const base = `${config.server.https ? "https" : "http"}://localhost:${config.server.port}/`;
           return defineClientValues(
-            workerHmrClient.replace("__BASE__", JSON.stringify(base)),
+            workerHmrClient.replace("__BASE__", JSON.stringify(base)).replace("__LIVE_RELOAD__", JSON.stringify(liveReload)),
             config
           );
         }
@@ -318,6 +319,7 @@ const pluginBackground = () => {
       async config(config2) {
         const opts = await getOptions(config2);
         browser = opts.browser || "chrome";
+        liveReload = opts.liveReload !== false;
       },
       configResolved(_config) {
         config = _config;
@@ -376,7 +378,7 @@ 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 contentHmrPort = "function isCrxHMRPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nclass HMRPort {\n  port;\n  callbacks = /* @__PURE__ */ new Map();\n  constructor() {\n    setInterval(() => {\n      try {\n        this.port?.postMessage({ data: \"ping\" });\n      } catch (error) {\n        if (error instanceof Error && error.message.includes(\"Extension context invalidated.\")) {\n          location.reload();\n        } else\n          throw error;\n      }\n    }, __CRX_HMR_TIMEOUT__);\n    setInterval(this.initPort, 5 * 60 * 1e3);\n    this.initPort();\n  }\n  initPort = () => {\n    this.port?.disconnect();\n    this.port = chrome.runtime.connect({ name: \"@crx/client\" });\n    this.port.onDisconnect.addListener(this.handleDisconnect.bind(this));\n    this.port.onMessage.addListener(this.handleMessage.bind(this));\n    this.port.postMessage({ type: \"connected\" });\n  };\n  handleDisconnect = () => {\n    if (this.callbacks.has(\"close\"))\n      for (const cb of this.callbacks.get(\"close\")) {\n        cb({ wasClean: true });\n      }\n  };\n  handleMessage = (message) => {\n    const forward = (data) => {\n      if (this.callbacks.has(\"message\"))\n        for (const cb of this.callbacks.get(\"message\")) {\n          cb({ data });\n        }\n    };\n    const payload = JSON.parse(message.data);\n    if (isCrxHMRPayload(payload)) {\n      if (payload.event === \"crx:runtime-reload\") {\n        if (__CRX_LIVE_RELOAD__) {\n          console.log(\"[crx] runtime reload\");\n          setTimeout(() => location.reload(), 500);\n        } else {\n          console.log(\"[crx] runtime reload suppressed (liveReload disabled)\");\n        }\n      } else {\n        forward(JSON.stringify(payload.data));\n      }\n    } else {\n      forward(message.data);\n    }\n  };\n  addEventListener = (event, callback) => {\n    const cbs = this.callbacks.get(event) ?? /* @__PURE__ */ new Set();\n    cbs.add(callback);\n    this.callbacks.set(event, cbs);\n  };\n  send = (data) => {\n    if (this.port)\n      this.port.postMessage({ data });\n    else\n      throw new Error(\"HMRPort is not initialized\");\n  };\n}\n\nexport { HMRPort };\n";
 
 var contentDevLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    if (__PREAMBLE__)\n      await import(\n        /* @vite-ignore */\n        chrome.runtime.getURL(__PREAMBLE__)\n      );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__CLIENT__)\n    );\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n    onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });\n  })().catch(console.error);\n\n})();\n";
 
@@ -427,6 +429,21 @@ function createProMainLoader({ fileName }) {
   return contentProMainLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName));
 }
 
+const { outputFile: outputFile$1 } = fsx;
+const getIifeGlobalName = (fileName) => {
+  const base = fileName.split("/").pop() ?? fileName;
+  const sanitized = base.replace(/\W+/g, "_").replace(/^_+/, "");
+  return `crx_${sanitized || "content_script"}`;
+};
+const resolveScriptInput = (server, id) => {
+  if (id.startsWith("/@fs/"))
+    return id.slice("/@fs/".length);
+  if (id.startsWith("/"))
+    return join(server.config.root, id.slice(1));
+  return id;
+};
+const isOutputChunk = (item) => item.type === "chunk";
+const isOutputAsset = (item) => item.type === "asset";
 const serverEvent$ = new ReplaySubject(1);
 const close$ = serverEvent$.pipe(
   filter((e) => e.type === "close"),
@@ -486,6 +503,8 @@ function prepAsset(fileName, { id, source }) {
   );
 }
 function prepScript(fileName, script) {
+  if (script.type === "iife")
+    return prepIifeScript(fileName, script);
   return ($) => $.pipe(
     // get script contents from dev server
     mergeMap(async ({ server }) => {
@@ -543,6 +562,105 @@ ${sourceMap}
     })
   );
 }
+async function bundleIife(server, script, fileName) {
+  const input = resolveScriptInput(server, script.id);
+  const sourcemap = server.config.build.sourcemap === "inline" ? "inline" : false;
+  const result = await build({
+    root: server.config.root,
+    mode: server.config.mode,
+    configFile: false,
+    // Don't load user's config - use minimal IIFE-specific settings
+    logLevel: "silent",
+    resolve: {
+      // Copy resolve settings from the dev server for consistency
+      alias: server.config.resolve.alias,
+      extensions: server.config.resolve.extensions,
+      conditions: server.config.resolve.conditions
+    },
+    build: {
+      write: false,
+      // Don't write to disk, we'll handle that
+      manifest: false,
+      // Don't generate Vite manifest
+      rollupOptions: {
+        input,
+        output: {
+          format: "iife",
+          name: getIifeGlobalName(fileName),
+          entryFileNames: fileName,
+          inlineDynamicImports: true,
+          // Required for IIFE format
+          sourcemap
+        }
+      },
+      minify: false,
+      copyPublicDir: false
+    }
+  });
+  const outputs = Array.isArray(result) ? result : [result];
+  const firstOutput = outputs[0];
+  const output = "output" in firstOutput ? firstOutput.output : void 0;
+  if (!output) {
+    throw new Error(`Unable to generate IIFE bundle for "${script.id}"`);
+  }
+  const entryChunk = output.find(
+    (item) => isOutputChunk(item) && item.isEntry
+  );
+  if (!entryChunk) {
+    throw new Error(`Unable to generate IIFE bundle for "${script.id}"`);
+  }
+  const assets = output.filter(isOutputAsset).filter(
+    // Filter out manifest.json to avoid overwriting extension manifest
+    (asset) => asset.fileName !== "manifest.json" && !asset.fileName.startsWith(".vite/")
+  );
+  const extraChunks = output.filter(
+    (item) => isOutputChunk(item) && !item.isEntry
+  );
+  return {
+    code: entryChunk.code,
+    assets,
+    extraChunks
+  };
+}
+function prepIifeScript(fileName, script) {
+  return ($) => $.pipe(
+    mergeMap(async ({ server }) => {
+      const target = getOutputPath(server, fileName);
+      const { code, assets, extraChunks } = await bundleIife(
+        server,
+        script,
+        fileName
+      );
+      return { target, source: code, deps: [], server, assets, extraChunks };
+    }),
+    mergeMap(
+      async ({ target, source, deps, server, assets, extraChunks }) => {
+        const extras = [
+          ...assets.map((asset) => ({
+            fileName: asset.fileName,
+            source: asset.source
+          })),
+          ...extraChunks.map((chunk) => ({
+            fileName: chunk.fileName,
+            source: chunk.code
+          }))
+        ].filter((item) => item.fileName !== fileName);
+        await Promise.all(
+          extras.map(async (item) => {
+            const outputPath = getOutputPath(server, item.fileName);
+            if (typeof item.source === "undefined" || item.source === null)
+              return;
+            if (item.source instanceof Uint8Array)
+              await outputFile$1(outputPath, item.source);
+            else
+              await outputFile$1(outputPath, item.source, { encoding: "utf8" });
+          })
+        );
+        return { target, source, deps };
+      }
+    )
+  );
+}
 async function allFilesReady() {
   await firstValueFrom(allFilesReady$);
 }
@@ -663,6 +781,7 @@ const pluginContentScripts = () => {
   let server;
   let preambleCode;
   let hmrTimeout;
+  let liveReload = true;
   let sub = new Subscription();
   const worldMainIds = /* @__PURE__ */ new Set();
   const findWorldMainIds = async (config, env) => {
@@ -675,7 +794,7 @@ const pluginContentScripts = () => {
     });
     if (worldMainIds.size) {
       const name = `[${pluginName}]`;
-      const message = pc.yellow(
+      const message = colors.yellow(
         [
           `${name} Some content-scripts don't support HMR because the world is MAIN:`,
           ...[...worldMainIds].map((id) => `  ${id}`)
@@ -690,9 +809,11 @@ const pluginContentScripts = () => {
       apply: "serve",
       async config(config, env) {
         await findWorldMainIds(config, env);
-        const { contentScripts: contentScripts2 = {} } = await getOptions(config);
+        const opts = await getOptions(config);
+        const { contentScripts: contentScripts2 = {} } = opts;
         hmrTimeout = contentScripts2.hmrTimeout ?? 5e3;
         preambleCode = preambleCode ?? contentScripts2.preambleCode;
+        liveReload = opts.liveReload !== false;
       },
       async configureServer(_server) {
         server = _server;
@@ -728,7 +849,8 @@ const pluginContentScripts = () => {
               });
               script.fileName = loader.fileName;
             } else if (type === "iife") {
-              throw new Error("IIFE content scripts are not implemented");
+              const file = add({ type: "iife", id });
+              script.fileName = file.fileName;
             } else {
               const file = add({ type: "module", id });
               script.fileName = file.fileName;
@@ -748,10 +870,7 @@ const pluginContentScripts = () => {
           return defined;
         }
         if (id === contentHmrPortId) {
-          const defined = contentHmrPort.replace(
-            "__CRX_HMR_TIMEOUT__",
-            JSON.stringify(hmrTimeout)
-          );
+          const defined = contentHmrPort.replace("__CRX_HMR_TIMEOUT__", JSON.stringify(hmrTimeout)).replace("__CRX_LIVE_RELOAD__", JSON.stringify(liveReload));
           return defined;
         }
       },
@@ -806,7 +925,7 @@ const pluginContentScripts = () => {
 `;
               }
             } else if (script.type === "iife") {
-              throw new Error("IIFE content scripts are not implemented");
+              continue;
             }
             contentScripts.set(script.refId, formatFileData(script));
           }
@@ -890,6 +1009,165 @@ const pluginDeclaredContentScripts = () => {
   };
 };
 
+function isIifeContentScript(file) {
+  return /\.iife\.(ts|tsx|js|jsx|mjs|cjs)$/.test(file);
+}
+const pluginContentScriptsIife = () => {
+  const pluginName = "crx:content-scripts-iife";
+  let config;
+  return [
+    {
+      name: `${pluginName}-config`,
+      enforce: "pre",
+      configResolved(resolvedConfig) {
+        config = resolvedConfig;
+      }
+    },
+    {
+      name: pluginName,
+      apply: "build",
+      enforce: "post",
+      async generateBundle(options, bundle) {
+        const opts = await getOptions({ plugins: config.plugins });
+        const _manifest = opts.manifest;
+        const manifest = typeof _manifest === "function" ? await _manifest({ command: "build", mode: config.mode }) : await Promise.resolve(_manifest);
+        const standaloneFiles = (opts.contentScripts?.standaloneFiles || []).map(
+          (f) => f.replace(/^\//, "")
+        );
+        const isStandaloneFile = (file) => {
+          const normalized = file.replace(/^\//, "");
+          return standaloneFiles.includes(normalized);
+        };
+        const iifeEntries = [];
+        if (manifest.content_scripts) {
+          for (const { js = [], matches = [] } of manifest.content_scripts) {
+            for (const file of js) {
+              if (isIifeContentScript(file) || isStandaloneFile(file)) {
+                const id = join(config.root, file);
+                iifeEntries.push({ file, id, matches });
+              }
+            }
+          }
+        }
+        for (const [, script] of contentScripts.entries()) {
+          if (script.type === "iife" && script.isDynamicScript) {
+            const id = join(config.root, script.id);
+            if (!iifeEntries.some((e) => e.id === id)) {
+              iifeEntries.push({
+                file: script.id,
+                id,
+                matches: script.matches ?? [],
+                isDynamic: true
+              });
+            }
+          }
+        }
+        if (iifeEntries.length === 0)
+          return;
+        console.log(
+          colors.cyan(`
+[${pluginName}] Building ${iifeEntries.length} content script(s) as IIFE...`)
+        );
+        for (const entry of iifeEntries) {
+          const outputFileName = getIifeOutputPath(entry.file);
+          try {
+            const iifeConfig = createIifeConfig(config, entry.id, outputFileName);
+            const result = await build(iifeConfig);
+            if ("on" in result) {
+              console.error(colors.red(`  Unexpected watcher result for ${entry.file}`));
+              continue;
+            }
+            const outputs = Array.isArray(result) ? result.flatMap((r) => "output" in r ? r.output : []) : result.output;
+            for (const chunk of outputs) {
+              if (chunk.type === "chunk" && chunk.isEntry) {
+                bundle[outputFileName] = {
+                  ...chunk,
+                  fileName: outputFileName
+                };
+                const existingScript = contentScripts.get(entry.file);
+                if (existingScript) {
+                  existingScript.fileName = outputFileName;
+                  contentScripts.set(entry.file, formatFileData(existingScript));
+                } else {
+                  contentScripts.set(
+                    entry.file,
+                    formatFileData({
+                      type: "iife",
+                      id: entry.file,
+                      refId: entry.file,
+                      matches: entry.matches,
+                      fileName: outputFileName
+                    })
+                  );
+                }
+                console.log(
+                  colors.green(`  \u2713 ${basename(entry.file)} \u2192 ${outputFileName}`)
+                );
+              }
+            }
+          } catch (error) {
+            console.error(
+              colors.red(`  \u2717 Failed to build ${entry.file}:`),
+              error
+            );
+            throw error;
+          }
+        }
+        console.log(colors.cyan(`[${pluginName}] IIFE build complete
+`));
+      }
+    }
+  ];
+};
+function getIifeOutputPath(file) {
+  const normalizedFile = file.replace(/^\//, "");
+  const dir = dirname(normalizedFile);
+  const name = basename(normalizedFile).replace(/\.(ts|tsx|js|jsx|mjs|cjs)$/, "");
+  return dir && dir !== "." ? `${dir}/${name}.js` : `${name}.js`;
+}
+function createIifeConfig(parentConfig, entryPath, outputFileName) {
+  const entryName = basename(outputFileName, ".js");
+  const baseConfig = {
+    // Inherit relevant settings from parent config
+    root: parentConfig.root,
+    mode: parentConfig.mode,
+    resolve: parentConfig.resolve,
+    define: parentConfig.define,
+    esbuild: parentConfig.esbuild
+  };
+  const iifeConfig = {
+    configFile: false,
+    logLevel: "warn",
+    plugins: [],
+    build: {
+      write: false,
+      // Don't write to disk, we'll add to bundle
+      emptyOutDir: false,
+      lib: {
+        entry: entryPath,
+        formats: ["iife"],
+        name: safeVarName(entryName),
+        fileName: () => outputFileName
+      },
+      rollupOptions: {
+        output: {
+          entryFileNames: outputFileName,
+          // Ensure all dependencies are inlined
+          inlineDynamicImports: true
+        }
+      },
+      // Match parent config settings
+      minify: parentConfig.build.minify,
+      sourcemap: parentConfig.build.sourcemap,
+      target: parentConfig.build.target
+    }
+  };
+  return mergeConfig(baseConfig, iifeConfig);
+}
+function safeVarName(name) {
+  return name.replace(/[^a-zA-Z0-9_$]/g, "_").replace(/^(\d)/, "_$1").replace(/^$/, "_");
+}
+
 const _dynamicScriptRegEx = /\b(import.meta).CRX_DYNAMIC_SCRIPT_(.+?)[,;]/gm;
 const dynamicScriptRegEx = () => {
   _dynamicScriptRegEx.lastIndex = 0;
@@ -897,12 +1175,18 @@ const dynamicScriptRegEx = () => {
 };
 const pluginDynamicContentScripts = () => {
   let config;
+  let standaloneFiles = [];
   return [
     {
       name: "crx:dynamic-content-scripts-loader",
       enforce: "pre",
       configResolved(_config) {
         config = _config;
+        getOptions({ plugins: _config.plugins }).then((opts) => {
+          standaloneFiles = (opts.contentScripts?.standaloneFiles || []).map(
+            (f) => f.replace(/^\//, "")
+          );
+        }).catch(() => void 0);
       },
       configureServer(server) {
         return () => {
@@ -933,9 +1217,9 @@ const pluginDynamicContentScripts = () => {
         };
       },
       async resolveId(_source, importer) {
-        if (importer && _source.includes("?script")) {
+        if (importer && (_source.includes("?script") || _source.includes("?iife"))) {
           const url = new URL(_source, "stub://stub");
-          if (url.searchParams.has("script")) {
+          if (url.searchParams.has("script") || url.searchParams.has("iife")) {
             const [source] = _source.split("?");
             const resolved = await this.resolve(source, importer, {
               skipSelf: true
@@ -945,8 +1229,11 @@ const pluginDynamicContentScripts = () => {
                 `Could not resolve dynamic script: "${_source}" from "${importer}"`
               );
             const { id } = resolved;
+            const relId = relative(config.root, id).replace(/^\//, "");
             let type = "loader";
-            if (url.searchParams.has("module")) {
+            if (isIifeContentScript(relId) || standaloneFiles.includes(relId)) {
+              type = "iife";
+            } else if (url.searchParams.has("module")) {
               type = "module";
             } else if (url.searchParams.has("iife")) {
               type = "iife";
@@ -966,13 +1253,13 @@ const pluginDynamicContentScripts = () => {
                 });
               } else {
                 refId = scriptId;
-                const relId = relative(config.root, id);
+                const relId2 = relative(config.root, id);
                 fileName = getFileName({
                   type: type === "iife" ? "iife" : "module",
-                  id: relId
+                  id: relId2
                 });
                 if (type === "loader")
-                  loaderName = getFileName({ type, id: relId });
+                  loaderName = getFileName({ type, id: relId2 });
               }
               script = formatFileData({
                 type,
@@ -1018,6 +1305,7 @@ const pluginDynamicContentScripts = () => {
        * Can't use `renderChunk` b/c pre plugin crx:content-scripts uses
        * `generateBundle` to emit loaders. Must come after "enforce: pre".
        */
+      enforce: "post",
       generateBundle(options, bundle) {
         for (const chunk of Object.values(bundle))
           if (chunk.type === "chunk") {
@@ -1034,9 +1322,9 @@ const pluginDynamicContentScripts = () => {
                     throw new Error(
                       `Content script fileName is undefined: "${script.id}"`
                     );
-                  return `${JSON.stringify(
-                    `/${script.loaderName ?? script.fileName}`
-                  )}${match.split(scriptKey)[1]}`;
+                  const fileName = script.loaderName ?? script.fileName;
+                  const path = fileName;
+                  return `${JSON.stringify(path)}${match.split(scriptKey)[1]}`;
                 }
               );
               chunk.code = replaced;
@@ -1121,7 +1409,7 @@ const pluginFileWriterPolyfill = () => {
 async function manifestFiles(manifest, options = {}) {
   let locales = [];
   if (manifest.default_locale)
-    locales = await fg("_locales/**/messages.json", options);
+    locales = await glob("_locales/**/messages.json", options);
   const rulesets = manifest.declarative_net_request?.rule_resources.flatMap(
     ({ path }) => path
   ) ?? [];
@@ -1145,8 +1433,8 @@ async function manifestFiles(manifest, options = {}) {
       manifest.web_accessible_resources.flatMap(({ resources: resources2 }) => resources2).map(async (r) => {
         if (["*", "**/*"].includes(r))
           return void 0;
-        if (fg.isDynamicPattern(r))
-          return fg(r, options);
+        if (isDynamicPattern(r))
+          return glob(r, options);
         return r;
       })
     );
@@ -1164,7 +1452,7 @@ async function manifestFiles(manifest, options = {}) {
   };
 }
 async function dirFiles(dir) {
-  const files = await fg(join(dir, "**", "*"));
+  const files = await glob(join(dir, "**", "*"));
   return files;
 }
 function htmlFiles(manifest) {
@@ -1314,6 +1602,7 @@ const pluginHMR = () => {
   let decoratedSend;
   let config;
   let subs;
+  let liveReload = true;
   return [
     {
       name: "crx:hmr",
@@ -1321,6 +1610,8 @@ const pluginHMR = () => {
       enforce: "pre",
       // server hmr host should be localhost
       async config({ server = {}, ...config2 }) {
+        const opts = await getOptions({ ...config2, server });
+        liveReload = opts.liveReload !== false;
         if (server.hmr === false)
           return;
         if (server.hmr === true)
@@ -1359,7 +1650,9 @@ const pluginHMR = () => {
           subs.add(fileWriterError$.subscribe(send));
           subs.add(
             crxHMRPayload$.subscribe((payload) => {
-              send(payload);
+              if (liveReload) {
+                send(payload);
+              }
             })
           );
         }
@@ -1368,8 +1661,9 @@ const pluginHMR = () => {
         subs.unsubscribe();
       },
       // background changes require a full extension reload
-      handleHotUpdate({ modules, server }) {
+      handleHotUpdate({ file, modules, server }) {
         const { root } = server.config;
+        const changedFilePath = file ? file.startsWith(root) ? prefix$1("/", file.slice(root.length)) : null : null;
         const relFiles = /* @__PURE__ */ new Set();
         const fsFiles = /* @__PURE__ */ new Set();
         const virtualModules = /* @__PURE__ */ new Set();
@@ -1386,13 +1680,17 @@ const pluginHMR = () => {
             }
           }
         }
-        fsFiles.forEach((file) => update(file));
-        virtualModules.forEach((file) => update(file));
+        fsFiles.forEach((file2) => update(file2));
+        virtualModules.forEach((file2) => update(file2));
         if (inputManifestFiles.background.length) {
           const background = prefix$1("/", inputManifestFiles.background[0]);
           if (relFiles.has(background) || modules.some(isImporter(join(server.config.root, background)))) {
-            debug$2("sending runtime reload");
-            server.ws.send(crxRuntimeReload);
+            if (liveReload) {
+              debug$2("sending runtime reload");
+              server.ws.send(crxRuntimeReload);
+            } else {
+              debug$2("skipping runtime reload (liveReload disabled)");
+            }
           }
         }
         for (const [key, script] of contentScripts)
@@ -1409,15 +1707,26 @@ const pluginHMR = () => {
                 if (changedCssFiles.length > 0) {
                   changedCssFiles.forEach((relFile) => update(relFile));
                   update(script.id);
-                  virtualModules.forEach((file) => update(file));
+                  virtualModules.forEach((file2) => update(file2));
                 }
               }
             } else {
               if (relFiles.has(script.id) || modules.some(isImporter(join(server.config.root, script.id)))) {
                 relFiles.forEach((relFile) => update(relFile));
-                virtualModules.forEach((file) => update(file));
+                virtualModules.forEach((file2) => update(file2));
               }
             }
+            const scriptPath = prefix$1("/", script.id);
+            if (script.type === "iife" && changedFilePath === scriptPath) {
+              debug$2("IIFE script changed, triggering rebuild: %s", script.id);
+              const updatedFiles = update(scriptPath);
+              Promise.all(updatedFiles.map((f) => f.file)).then(() => {
+                if (liveReload) {
+                  debug$2("IIFE rebuild complete, sending runtime reload");
+                  server.ws.send(crxRuntimeReload);
+                }
+              });
+            }
           }
       }
     },
@@ -1449,11 +1758,11 @@ 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")}
+  return `  ${colors.magentaBright("B R O W S E R")}
+  ${colors.greenBright("E X T E N S I O N")}
+  ${colors.blueBright("T O O L S")}
   
-  ${pc.green("\u279C")}  ${pc.bold("CRXJS")}: ${pc.green(`Load ${pc.cyan(dir)} as unpacked extension`)}`;
+  ${colors.green("\u279C")}  ${colors.bold("CRXJS")}: ${colors.green(`Load ${colors.cyan(dir)} as unpacked extension`)}`;
 }
 const pluginPrint = () => {
   let outDir = "dist";
@@ -1810,9 +2119,19 @@ const pluginManifest = () => {
               }
             }
         } else {
+          const opts = await getOptions({ plugins: config.plugins });
+          const standaloneFiles = (opts.contentScripts?.standaloneFiles || []).map(
+            (f) => f.replace(/^\//, "")
+          );
+          const isStandaloneFile = (file) => {
+            const normalized = file.replace(/^\//, "");
+            return standaloneFiles.includes(normalized);
+          };
           if (manifest2.content_scripts)
             for (const { js = [], matches = [] } of manifest2.content_scripts)
               for (const file of js) {
+                if (isIifeContentScript(file) || isStandaloneFile(file))
+                  continue;
                 const id2 = join(config.root, file);
                 const refId2 = this.emitFile({
                   type: "chunk",
@@ -1923,11 +2242,11 @@ const pluginManifest = () => {
             const name = `[${plugin.name}]`;
             let message = error;
             if (error instanceof Error) {
-              message = pc.red(
+              message = colors.red(
                 `${name} ${error.stack ? error.stack : error.message}`
               );
             } else if (typeof error === "string") {
-              message = pc.red(`${name} ${error}`);
+              message = colors.red(`${name} ${error}`);
             }
             console.log(message);
             throw new Error(`Error in ${plugin.name}.renderCrxManifest`);
@@ -2266,6 +2585,8 @@ const crx = (options) => {
   contentScripts.clear();
   return [
     pluginOptionsProvider(options),
+    pluginContentScriptsIife(),
+    // Must come early so isIifeModeEnabled is set before manifest plugin
     pluginBackground(),
     pluginContentScripts(),
     pluginDeclaredContentScripts(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -59,7 +59,7 @@
     "convert-source-map": "^1.7.0",
     "debug": "^4.3.3",
     "es-module-lexer": "^0.10.0",
-    "fast-glob": "^3.2.11",
+    "tinyglobby": "^0.2.15",
     "fs-extra": "^10.0.1",
     "jsesc": "^3.0.2",
     "magic-string": "^0.30.12",
@@ -67,7 +67,7 @@
     "pathe": "^2.0.1",
     "picocolors": "^1.1.1",
     "react-refresh": "^0.13.0",
-    "rollup": "2.79.2",
+    "rollup": "2.80.0",
     "rxjs": "7.5.7"
   },
   "devDependencies": {
@@ -92,7 +92,7 @@
     "@typescript-eslint/parser": "5.41.0",
     "@vitejs/plugin-react": "^2.2.0",
     "@vitejs/plugin-vue": "3.2.0",
-    "chokidar": "^3.5.3",
+    "chokidar": "^5.0.0",
     "esbuild": "0.17.14",
     "esbuild-runner": "2.2.2",
     "eslint": "8.43.0",