@crxjs/vite-plugin 2.3.0 → 2.5.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { simple } from 'acorn-walk';
 import { createHash } from 'crypto';
-import debug$3 from 'debug';
-import { join, normalize, isAbsolute, basename, relative, resolve, dirname, parse } from 'pathe';
+import debug$5 from 'debug';
+import { join, normalize, dirname, basename, isAbsolute, relative, resolve, parse as parse$1 } from 'pathe';
 import { Subject, filter, ReplaySubject, switchMap, of, startWith, map, BehaviorSubject, mergeMap, firstValueFrom, takeUntil, first, toArray, retry, concatWith, Subscription, buffer } from 'rxjs';
 import fsx from 'fs-extra';
 import { performance } from 'perf_hooks';
@@ -9,13 +9,13 @@ 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 { load } from 'cheerio';
+import { glob, isDynamicPattern } from 'tinyglobby';
+import { parse } from 'node-html-parser';
 import jsesc from 'jsesc';
 
 const pluginName$1 = "crx:optionsProvider";
@@ -58,9 +58,9 @@ 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 = \"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";
+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$3("crx").extend(id);
+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);
 const isString = (x) => typeof x === "string";
 function isObject(value) {
@@ -140,7 +140,13 @@ 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_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()));
+  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_PROTO__`,
+    JSON.stringify(config.server.https ? "https" : "http")
+  ).replace(
+    `__SERVER_PORT__`,
+    JSON.stringify(config.server.port?.toString())
+  );
   function serializeDefine(define) {
     let res = `{`;
     for (const key in define) {
@@ -177,6 +183,17 @@ class RxMap extends Map {
 const outputFiles = new RxMap();
 
 _debug("file-writer").extend("utilities");
+function sanitizeUnderscorePrefix(fileName) {
+  const dir = dirname(fileName);
+  let base = basename(fileName);
+  while (base.startsWith("_")) {
+    base = base.slice(1);
+  }
+  if (!base) {
+    base = "file";
+  }
+  return dir === "." ? base : join(dir, base);
+}
 function prefix$1(prefix2, text) {
   return text.startsWith(prefix2) ? text : prefix2 + text;
 }
@@ -192,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("@")) {
@@ -200,6 +217,7 @@ function getFileName({ type, id }) {
   } else if (fileName.startsWith(".vite/deps/")) {
     fileName = `vendor/${fileName.slice(".vite/deps/".length)}`;
   }
+  fileName = sanitizeUnderscorePrefix(fileName);
   switch (type) {
     case "iife":
       return `${fileName}.iife.js`;
@@ -230,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") {
@@ -257,10 +275,25 @@ const manifestId = "/@crx/manifest";
 const preambleId = "/@crx/client-preamble";
 const stubId = "/@crx/stub";
 const workerClientId = "/@crx/client-worker";
+const contentCssPrefix = "/@crx/content-css/";
+function isContentCssId(id) {
+  return id.startsWith(contentCssPrefix);
+}
+function getContentCssId(index) {
+  return `${contentCssPrefix}${index}`;
+}
+function getContentCssIndex(id) {
+  if (!isContentCssId(id))
+    return null;
+  const indexStr = id.slice(contentCssPrefix.length);
+  const index = parseInt(indexStr, 10);
+  return isNaN(index) ? null : index;
+}
 
 const pluginBackground = () => {
   let config;
   let browser;
+  let liveReload = true;
   return [
     {
       name: "crx:background-client",
@@ -271,9 +304,9 @@ const pluginBackground = () => {
       },
       load(id) {
         if (id === workerClientId) {
-          const base = `http://localhost:${config.server.port}/`;
+          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
           );
         }
@@ -286,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;
@@ -294,24 +328,25 @@ const pluginBackground = () => {
         const worker = browser === "firefox" ? manifest.background?.scripts[0] : manifest.background?.service_worker;
         let loader;
         if (config.command === "serve") {
+          const proto = config.server.https ? "https" : "http";
           const port = config.server.port?.toString();
           if (typeof port === "undefined")
             throw new Error("server port is undefined in watch mode");
           if (browser === "firefox") {
-            loader = `import('http://localhost:${port}/@vite/env');
+            loader = `import('${proto}://localhost:${port}/@vite/env');
 `;
-            loader += `import('http://localhost:${port}${workerClientId}');
+            loader += `import('${proto}://localhost:${port}${workerClientId}');
 `;
             if (worker)
-              loader += `import('http://localhost:${port}/${worker}');
+              loader += `import('${proto}://localhost:${port}/${worker}');
 `;
           } else {
-            loader = `import 'http://localhost:${port}/@vite/env';
+            loader = `import '${proto}://localhost:${port}/@vite/env';
 `;
-            loader += `import 'http://localhost:${port}${workerClientId}';
+            loader += `import '${proto}://localhost:${port}${workerClientId}';
 `;
             if (worker)
-              loader += `import 'http://localhost:${port}/${worker}';
+              loader += `import '${proto}://localhost:${port}/${worker}';
 `;
           }
         } else if (worker) {
@@ -343,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";
 
@@ -394,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"),
@@ -453,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 }) => {
@@ -510,12 +562,111 @@ ${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$);
 }
 
 const { outputFile } = fsx;
-_debug("file-writer");
+const debug$4 = _debug("file-writer");
 async function start({
   server
 }) {
@@ -546,6 +697,12 @@ async function close() {
 }
 function add(script) {
   const fileName = getFileName(script);
+  debug$4(
+    "add: script.id=%s script.type=%s fileName=%s",
+    script.id,
+    script.type,
+    fileName
+  );
   let file = outputFiles.get(fileName);
   if (typeof file === "undefined") {
     file = formatFileData({
@@ -554,6 +711,17 @@ function add(script) {
       file: write(script)
     });
     outputFiles.set(file.fileName, file);
+    debug$4("add: stored new file %s", file.fileName);
+  } else {
+    const isVirtualModule = script.id.startsWith("/@id/") || script.id.startsWith("/__");
+    if (isVirtualModule) {
+      debug$4(
+        "add: virtual module already exists, triggering re-write for %s",
+        fileName
+      );
+      file.file = write(script);
+      outputFiles.set(fileName, file);
+    }
   }
   return file;
 }
@@ -561,15 +729,19 @@ function update(_id) {
   const id = prefix$1("/", _id);
   const types = ["iife", "module"];
   const updatedFiles = [];
+  debug$4("update called: _id=%s id=%s", _id, id);
   for (const type of types) {
     const fileName = getFileName({ id, type });
+    debug$4("update: looking for fileName=%s", fileName);
     const scriptFile = outputFiles.get(fileName);
     if (scriptFile) {
+      debug$4("update: found file, calling write()");
       scriptFile.file = write({ id, type });
       updatedFiles.push(scriptFile);
       outputFiles.set(fileName, scriptFile);
     }
   }
+  debug$4("update: returning %d files", updatedFiles.length);
   return updatedFiles;
 }
 async function write(fileId) {
@@ -609,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) => {
@@ -621,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}`)
@@ -636,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;
@@ -674,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;
@@ -694,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;
         }
       },
@@ -742,7 +915,9 @@ const pluginContentScripts = () => {
                     type: "loader",
                     id: basename(script.id)
                   }),
-                  source: worldMainIds.has(script.id) ? createProMainLoader({ fileName: `./${fileName.split("/").at(-1)}` }) : createProLoader({ fileName })
+                  source: worldMainIds.has(script.id) ? createProMainLoader({
+                    fileName: `./${fileName.split("/").at(-1)}`
+                  }) : createProLoader({ fileName })
                 });
                 script.loaderName = this.getFileName(refId);
               } else {
@@ -750,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));
           }
@@ -790,9 +965,208 @@ const pluginContentScriptsCss = () => {
   };
 };
 
+const contentCssEntries = /* @__PURE__ */ new Map();
+function getContentCssEntries() {
+  return Array.from(contentCssEntries.values());
+}
+function clearContentCssEntries() {
+  contentCssEntries.clear();
+}
+function registerContentCssEntry(index, cssFiles) {
+  const virtualId = getContentCssId(index);
+  const entry = { index, cssFiles, virtualId };
+  contentCssEntries.set(index, entry);
+  return entry;
+}
 const pluginDeclaredContentScripts = () => {
-  return [];
+  return {
+    name: "crx:content-scripts-declared-css",
+    apply: "serve",
+    resolveId(source) {
+      if (isContentCssId(source)) {
+        return source;
+      }
+    },
+    load(id) {
+      if (!isContentCssId(id))
+        return;
+      const index = getContentCssIndex(id);
+      if (index === null)
+        return;
+      const entry = contentCssEntries.get(index);
+      if (!entry) {
+        console.warn(
+          `[crx:content-scripts-declared-css] No CSS entry found for index ${index}`
+        );
+        return "";
+      }
+      const cssImports = entry.cssFiles.map((cssPath) => {
+        const importPath = cssPath.startsWith("/") ? cssPath : `/${cssPath}`;
+        return `import "${importPath}";`;
+      }).join("\n");
+      return cssImports + "\n";
+    }
+  };
+};
+
+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 = () => {
@@ -801,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 () => {
@@ -837,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
@@ -849,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";
@@ -870,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,
@@ -922,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") {
@@ -938,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;
@@ -1025,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
   ) ?? [];
@@ -1049,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;
       })
     );
@@ -1068,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) {
@@ -1104,7 +1488,7 @@ const pluginFileWriterPublic = () => {
   };
 };
 
-const debug$2 = _debug("file-writer").extend("hmr");
+const debug$3 = _debug("file-writer").extend("hmr");
 const isCustomPayload = (p) => {
   return p.type === "custom";
 };
@@ -1142,7 +1526,21 @@ const crxHMRPayload$ = hmrPayload$.pipe(
         return prune;
       }
       case "update": {
-        const update = {
+        debug$3("update payload with %d updates", p.updates.length);
+        for (const u of p.updates) {
+          debug$3(
+            "update item: path=%s acceptedPath=%s type=%s",
+            u.path,
+            u.acceptedPath,
+            u.type
+          );
+          const isVirtualModule = u.path.startsWith("/@id/") || u.path.startsWith("/__");
+          if (isVirtualModule) {
+            debug$3("updating virtual module: %s", u.path);
+            update(u.path);
+          }
+        }
+        const update_ = {
           type: "update",
           updates: p.updates.map(({ acceptedPath: ap, path: p2, ...rest }) => ({
             ...rest,
@@ -1150,7 +1548,7 @@ const crxHMRPayload$ = hmrPayload$.pipe(
             path: prefix$1("/", getFileName({ id: p2, type: "module" }))
           }))
         };
-        return update;
+        return update_;
       }
       default:
         return p;
@@ -1169,7 +1567,7 @@ const crxHMRPayload$ = hmrPayload$.pipe(
     }
   }),
   map((data) => {
-    debug$2(`hmr payload`, data);
+    debug$3(`hmr payload`, data);
     return {
       type: "custom",
       event: "crx:content-script-payload",
@@ -1194,7 +1592,7 @@ function isImporter(file) {
   return pred;
 }
 
-const debug$1 = _debug("hmr");
+const debug$2 = _debug("hmr");
 const crxRuntimeReload = {
   type: "custom",
   event: "crx:runtime-reload"
@@ -1204,6 +1602,7 @@ const pluginHMR = () => {
   let decoratedSend;
   let config;
   let subs;
+  let liveReload = true;
   return [
     {
       name: "crx:hmr",
@@ -1211,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)
@@ -1249,7 +1650,9 @@ const pluginHMR = () => {
           subs.add(fileWriterError$.subscribe(send));
           subs.add(
             crxHMRPayload$.subscribe((payload) => {
-              send(payload);
+              if (liveReload) {
+                send(payload);
+              }
             })
           );
         }
@@ -1258,29 +1661,71 @@ 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();
         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);
+          } else if (m.id?.startsWith("\0") || m.url?.startsWith("/@id/__x00__")) {
+            const virtualId = m.url ?? m.id;
+            if (virtualId) {
+              virtualModules.add(virtualId);
+              debug$2("virtual module detected:", virtualId);
+            }
           }
         }
-        fsFiles.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$1("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)
           if (key === script.id) {
-            if (relFiles.has(script.id) || modules.some(isImporter(join(server.config.root, script.id)))) {
-              relFiles.forEach((relFile) => update(relFile));
+            if (isContentCssId(script.id)) {
+              const cssEntries = getContentCssEntries();
+              const entry = cssEntries.find((e) => e.virtualId === script.id);
+              if (entry) {
+                const changedCssFiles = [...relFiles].filter(
+                  (relFile) => entry.cssFiles.some(
+                    (cssFile) => relFile === prefix$1("/", cssFile) || relFile.endsWith(cssFile)
+                  )
+                );
+                if (changedCssFiles.length > 0) {
+                  changedCssFiles.forEach((relFile) => update(relFile));
+                  update(script.id);
+                  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((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);
+                }
+              });
             }
           }
       }
@@ -1313,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";
@@ -1339,12 +1784,20 @@ const pluginPrint = () => {
 
 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";
 
+function extractScriptsAndRemove(html) {
+  const root = parse(html);
+  const scripts = root.querySelectorAll("script");
+  const scriptSrcs = scripts.map((el) => el.getAttribute("src"));
+  scripts.forEach((el) => el.remove());
+  return { scriptSrcs, html: root.toString() };
+}
+
 const pluginName = "crx:html-inline-scripts";
-const debug = _debug(pluginName);
+const debug$1 = _debug(pluginName);
 const prefix = "@crx/inline-script";
 const isInlineTag = (t) => t.tag === "script" && !t.attrs?.src;
 const toKey = (ctx) => {
-  const { dir, name } = parse(ctx.path);
+  const { dir, name } = parse$1(ctx.path);
   return join(prefix, dir, name);
 };
 const pluginHtmlInlineScripts = () => {
@@ -1410,19 +1863,18 @@ const pluginHtmlInlineScripts = () => {
       const key = toKey(ctx);
       const p = pages.get(key);
       if (p?.scripts.some(isInlineTag)) {
-        const $ = load(html);
+        const { scriptSrcs, html: cleanedHtml } = extractScriptsAndRemove(html);
         p.scripts.push(
-          ...$("script").toArray().map((el) => ({
+          ...scriptSrcs.map((src) => ({
             tag: "script",
-            attrs: { src: $(el).attr("src"), type: "module" }
+            attrs: { src, type: "module" }
           }))
         );
-        $("script").remove();
         const loader2 = {
           tag: "script",
           attrs: { src: `${key}?t=${Date.now()}`, type: "module" }
         };
-        return { html: $.html(), tags: [loader2] };
+        return { html: cleanedHtml, tags: [loader2] };
       }
       return p?.scripts ?? void 0;
     }
@@ -1464,21 +1916,21 @@ const pluginHtmlInlineScripts = () => {
           })}"`;
           return [inline, loader.replace("SCRIPTS", json)].join("\n");
         } else {
-          debug("page missing %s", id);
+          debug$1("page missing %s", id);
         }
       }
     }
   };
 };
 
-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 loadingPageScript = "const VITE_URL = \"%PROTO%://localhost:%PORT%\";\ndocument.body.innerHTML = /* html */\n`\n<style>\n  :root {\n    color-scheme: light;\n    --ink: #111827;\n    --muted: #5f6b7a;\n    --muted-subtle: rgba(95, 107, 122, 0.7);\n    --muted-hint: rgba(95, 107, 122, 0.6);\n    --card: #ffffff;\n    --badge-bg: rgba(17, 24, 39, 0.04);\n    --accent: #ff6b2c;\n    --accent-2: #2563eb;\n    --link-underline: rgba(37, 99, 235, 0.45);\n    --glow-1: rgba(37, 99, 235, 0.12);\n    --glow-2: rgba(255, 107, 44, 0.1);\n    --button-grad-1: #ff7a43;\n    --button-grad-2: #ff9a73;\n    --button-shadow: rgba(255, 107, 44, 0.18);\n    --button-shadow-hover: rgba(255, 107, 44, 0.22);\n    --pulse: rgba(255, 107, 44, 0.6);\n    --pulse-ring: rgba(255, 107, 44, 0.5);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root {\n      color-scheme: dark;\n      --ink: #e5e7eb;\n      --muted: #a3aab5;\n      --muted-subtle: rgba(163, 170, 181, 0.78);\n      --muted-hint: rgba(163, 170, 181, 0.6);\n      --card: #0f172a;\n      --badge-bg: rgba(148, 163, 184, 0.16);\n      --accent: #ff8a5a;\n      --accent-2: #7aa2ff;\n      --link-underline: rgba(122, 162, 255, 0.45);\n      --glow-1: rgba(96, 165, 250, 0.14);\n      --glow-2: rgba(251, 146, 60, 0.16);\n      --button-grad-1: #f07b4d;\n      --button-grad-2: #f39a76;\n      --button-shadow: rgba(240, 123, 77, 0.16);\n      --button-shadow-hover: rgba(240, 123, 77, 0.2);\n      --pulse: rgba(255, 138, 90, 0.65);\n      --pulse-ring: rgba(255, 138, 90, 0.5);\n    }\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: \"IBM Plex Sans\", \"Inter\", -apple-system, system-ui, sans-serif;\n    color: var(--ink);\n    background: transparent;\n    width: 420px;\n    height: 250px;\n    margin: 0;\n    padding: 0 !important;\n  }\n\n  #app {\n    background: var(--card);\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    min-height: 100%;\n    padding: 24px 24px 20px;\n    gap: 14px;\n    justify-content: center;\n  }\n\n  #app::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      radial-gradient(240px 140px at 100% 0%, var(--glow-1), transparent 70%),\n      radial-gradient(220px 140px at 0% 100%, var(--glow-2), transparent 70%);\n    pointer-events: none;\n  }\n\n  .header {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n    padding-right: 96px;\n  }\n\n  .header-text {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 10px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--muted);\n    background: var(--badge-bg);\n    border-radius: 999px;\n    padding: 6px 10px;\n    white-space: nowrap;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  .pulse {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--accent);\n    box-shadow: 0 0 0 0 var(--pulse);\n    animation: pulse 1.6s ease-in-out infinite;\n  }\n\n  h1 {\n    font-size: clamp(18px, 4vw, 22px);\n    letter-spacing: -0.02em;\n    line-height: 1.25;\n  }\n\n  p {\n    margin: 0;\n    color: var(--muted);\n    font-size: 13px;\n    line-height: 1.6;\n  }\n\n  .subtle {\n    color: var(--muted-subtle);\n    font-size: 12px;\n  }\n\n  a {\n    color: var(--accent-2);\n    text-decoration: none;\n    border-bottom: 1px dashed var(--link-underline);\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .footer {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n  }\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n  }\n\n  button {\n    appearance: none;\n    border: none;\n    border-radius: 999px;\n    background: linear-gradient(135deg, var(--button-grad-1), var(--button-grad-2));\n    color: white;\n    padding: 8px 14px;\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    box-shadow: 0 8px 16px var(--button-shadow);\n    transition: transform 160ms ease, box-shadow 160ms ease;\n  }\n\n  button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 10px 20px var(--button-shadow-hover);\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--accent-2);\n    outline-offset: 2px;\n  }\n\n  .hint {\n    font-size: 11px;\n    color: var(--muted-hint);\n    text-align: center;\n  }\n\n  @keyframes pulse {\n    0% { box-shadow: 0 0 0 0 var(--pulse-ring); }\n    70% { box-shadow: 0 0 0 10px rgba(255, 107, 44, 0); }\n    100% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0); }\n  }\n</style>\n\n<div id=\"app\">\n  <div class=\"header\">\n    <span class=\"badge\"><span class=\"pulse\"></span>dev server</span>\n    <div class=\"header-text\">\n      <h1>CRXJS DEV MODE</h1>\n      <p class=\"subtle\">Connecting to the Vite dev server\\u2026</p>\n    </div>\n  </div>\n\n  <div class=\"content\">\n    <p>\n      Cannot connect to <a href=\"${VITE_URL}\">${VITE_URL}</a>.\n      Make sure Vite is running, then reload the extension.\n    </p>\n    <p>This page will close automatically after the extension reloads.</p>\n  </div>\n\n  <div class=\"footer\">\n    <div class=\"actions\">\n      <button>Reload Extension</button>\n    </div>\n    <div class=\"hint\">Tip: if the URL is wrong, restart Vite so it picks the right port.</div>\n  </div>\n</div>\n`;\ndocument.body.querySelector(\"button\")?.addEventListener(\"click\", () => {\n  chrome.runtime.reload();\n});\nlet tries = 0;\nlet ready = false;\ndo {\n  try {\n    await fetch(VITE_URL);\n    ready = true;\n  } catch {\n    const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3);\n    console.log(`[CRXJS] Vite Dev Server is not available on ${VITE_URL}`);\n    console.log(`[CRXJS] Retrying in ${timeout}ms...`);\n    await new Promise((resolve) => setTimeout(resolve, timeout));\n  }\n} while (!ready);\nlocation.reload();\n";
 
-var 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";
+var loadingPageHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>CRXJS DEV MODE</title>\n    <script src=\"%SCRIPT%\" type=\"module\"></script>\n  </head>\n  <body>\n    <p>An unknown error occurred. Failed to load the script.</p>\n  </body>\n</html>\n";
 
 const { readFile } = promises;
 const pluginManifest = () => {
   let manifest;
-  let plugins;
+  let plugins = [];
   let refId;
   let config;
   return [
@@ -1523,6 +1975,14 @@ const pluginManifest = () => {
           };
         }
       },
+      // Use configResolved to get plugins for rolldown-vite (Vite 7) compatibility
+      // In rolldown-vite, buildStart doesn't receive options.plugins, so we grab
+      // them from the resolved config instead
+      configResolved(resolvedConfig) {
+        if (resolvedConfig.plugins) {
+          plugins = resolvedConfig.plugins;
+        }
+      },
       buildStart(options) {
         if (options.plugins)
           plugins = options.plugins;
@@ -1618,8 +2078,33 @@ const pluginManifest = () => {
           }
         }
         if (config.command === "serve") {
+          clearContentCssEntries();
           if (manifest2.content_scripts)
-            for (const { js = [], matches = [] } of manifest2.content_scripts)
+            for (let i = 0; i < manifest2.content_scripts.length; i++) {
+              const {
+                js = [],
+                css = [],
+                matches = []
+              } = manifest2.content_scripts[i];
+              if (css.length > 0) {
+                const cssEntry = registerContentCssEntry(i, css);
+                contentScripts.set(
+                  cssEntry.virtualId,
+                  formatFileData({
+                    type: "loader",
+                    id: cssEntry.virtualId,
+                    matches,
+                    refId: hashScriptId({
+                      type: "loader",
+                      id: cssEntry.virtualId
+                    }),
+                    fileName: getFileName({
+                      type: "loader",
+                      id: cssEntry.virtualId
+                    })
+                  })
+                );
+              }
               for (const id2 of js) {
                 contentScripts.set(
                   prefix$1("/", id2),
@@ -1632,10 +2117,21 @@ 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",
@@ -1689,12 +2185,26 @@ const pluginManifest = () => {
         const manifestJs = bundle[manifestName];
         let manifest2 = decodeManifest.call(this, manifestJs.code);
         if (config.command === "serve") {
-          if (manifest2.content_scripts)
-            for (const script of manifest2.content_scripts) {
-              script.js = script.js?.map(
+          if (manifest2.content_scripts) {
+            const cssEntries = getContentCssEntries();
+            const cssEntryMap = new Map(cssEntries.map((e) => [e.index, e]));
+            for (let i = 0; i < manifest2.content_scripts.length; i++) {
+              const script = manifest2.content_scripts[i];
+              const cssEntry = cssEntryMap.get(i);
+              const jsLoaders = (script.js || []).map(
                 (id) => getFileName({ id, type: "loader" })
               );
+              if (cssEntry) {
+                const cssLoader = getFileName({
+                  id: cssEntry.virtualId,
+                  type: "loader"
+                });
+                script.js = [cssLoader, ...jsLoaders];
+              } else {
+                script.js = jsLoaders;
+              }
             }
+          }
         } else {
           if (manifest2.background && "service_worker" in manifest2.background) {
             const ref = manifest2.background.service_worker;
@@ -1732,17 +2242,18 @@ 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`);
           }
         }
         const assetTypes = [
+          "contentStyles",
           "icons",
           "locales",
           "rulesets",
@@ -1780,10 +2291,7 @@ Public dir: "${config.publicDir}"`
           const refId2 = this.emitFile({
             type: "asset",
             name: "loading-page.js",
-            source: loadingPageScript.replace(
-              "%PORT%",
-              `${config.server.port ?? 0}`
-            )
+            source: loadingPageScript.replace("%PROTO%", config.server.https ? "https" : "http").replace("%PORT%", `${config.server.port ?? 0}`)
           });
           const loadingPageScriptName = this.getFileName(refId2);
           files.html.map(
@@ -1875,11 +2383,12 @@ const defineDynamicResource = ({
 });
 const DYNAMIC_RESOURCE = "<dynamic_resource>";
 
-_debug("web-acc-res");
+const debug = _debug("web-acc-res");
 const pluginWebAccessibleResources = () => {
   let config;
   let injectCss;
   let browser;
+  let userWantsViteManifest;
   return [
     {
       name: "crx:web-accessible-resources",
@@ -1919,6 +2428,7 @@ const pluginWebAccessibleResources = () => {
         const contentScripts2 = opts.contentScripts || {};
         browser = opts.browser || "chrome";
         injectCss = contentScripts2.injectCss ?? true;
+        userWantsViteManifest = build?.manifest;
         return { ...config2, build: { ...build, manifest: command === "build" } };
       },
       configResolved(_config) {
@@ -2053,6 +2563,18 @@ const pluginWebAccessibleResources = () => {
           delete manifest.web_accessible_resources;
         else
           manifest.web_accessible_resources = combinedResources;
+        if (!userWantsViteManifest) {
+          const viteMajorVersion = parseInt(version.split(".")[0]);
+          const manifestPath = viteMajorVersion > 4 ? ".vite/manifest.json" : "manifest.json";
+          if (bundle[manifestPath]) {
+            debug(
+              "Removing Vite manifest: %s (userWantsViteManifest=%s)",
+              manifestPath,
+              userWantsViteManifest
+            );
+            delete bundle[manifestPath];
+          }
+        }
         return manifest;
       }
     }
@@ -2063,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(),