@crxjs/vite-plugin 2.3.0 → 2.4.0

package/dist/index.d.ts

@@ -203,7 +203,29 @@ interface ManifestV3 {
     update_url?: string | undefined;
     version_name?: string | undefined;
     web_accessible_resources?: (WebAccessibleResourceById | WebAccessibleResourceByMatch)[] | undefined;
+    browser_specific_settings?: {
+        gecko: {
+            id: string;
+            strict_min_version?: string | undefined;
+            strict_max_version?: string | undefined;
+            update_url?: string | undefined;
+            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/
+                */
+                required: GeckoPermissionsRequired[];
+                /**
+                 * available value: "personallyIdentifyingInfo" | "healthInfo" | "financialAndPaymentInfo" | "authenticationInfo" | "personalCommunications" | "locationInfo" | "browsingActivity" | "websiteContent" | "websiteActivity" | "searchTerms" | "bookmarksInfo" | "technicalAndInteraction".
+                 * see also: https://extensionworkshop.com/documentation/develop/firefox-builtin-data-consent/
+                */
+                optional?: GeckoPermissionsOptional[] | undefined;
+            };
+        };
+    } | undefined;
 }
+type GeckoPermissionsRequired = "personallyIdentifyingInfo" | "healthInfo" | "financialAndPaymentInfo" | "authenticationInfo" | "personalCommunications" | "locationInfo" | "browsingActivity" | "websiteContent" | "websiteActivity" | "searchTerms" | "bookmarksInfo" | "none";
+type GeckoPermissionsOptional = "personallyIdentifyingInfo" | "healthInfo" | "financialAndPaymentInfo" | "authenticationInfo" | "personalCommunications" | "locationInfo" | "browsingActivity" | "websiteContent" | "websiteActivity" | "searchTerms" | "bookmarksInfo" | "technicalAndInteraction";
 
 type ManifestV3Fn = (env: ConfigEnv) => ManifestV3 | Promise<ManifestV3>;
 type ManifestV3Export = ManifestV3 | Promise<ManifestV3> | ManifestV3Fn;

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';
@@ -15,7 +15,7 @@ import { createLogger, version } from 'vite';
 import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
 import fg from 'fast-glob';
-import { load } from 'cheerio';
+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  notifyContentScripts(payload);\n  switch (payload.event) {\n    case \"crx:runtime-reload\":\n      console.log(\"[crx] runtime reload\");\n      chrome.runtime.reload();\n      break;\n  }\n}\nasync function waitForSuccessfulPing(ms = 1e3) {\n  while (true) {\n    try {\n      await fetch(`${base}__vite_ping`);\n      break;\n    } catch (e) {\n      await new Promise((resolve) => setTimeout(resolve, ms));\n    }\n  }\n}\nsocket.addEventListener(\"close\", async ({ wasClean }) => {\n  if (wasClean)\n    return;\n  console.log(`[vite] server connection lost. polling for restart...`);\n  await waitForSuccessfulPing();\n  handleCrxHmrPayload({\n    type: \"custom\",\n    event: \"crx:runtime-reload\"\n  });\n});\n";
 
-const _debug = (id) => debug$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;
 }
@@ -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`;
@@ -257,6 +275,20 @@ 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;
@@ -271,7 +303,7 @@ 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)),
             config
@@ -294,24 +326,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) {
@@ -515,7 +548,7 @@ async function allFilesReady() {
 }
 
 const { outputFile } = fsx;
-_debug("file-writer");
+const debug$4 = _debug("file-writer");
 async function start({
   server
 }) {
@@ -546,6 +579,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 +593,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 +611,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) {
@@ -742,7 +796,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 {
@@ -790,8 +846,48 @@ 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";
+    }
+  };
 };
 
 const _dynamicScriptRegEx = /\b(import.meta).CRX_DYNAMIC_SCRIPT_(.+?)[,;]/gm;
@@ -1104,7 +1200,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 +1238,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 +1260,7 @@ const crxHMRPayload$ = hmrPayload$.pipe(
             path: prefix$1("/", getFileName({ id: p2, type: "module" }))
           }))
         };
-        return update;
+        return update_;
       }
       default:
         return p;
@@ -1169,7 +1279,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 +1304,7 @@ function isImporter(file) {
   return pred;
 }
 
-const debug$1 = _debug("hmr");
+const debug$2 = _debug("hmr");
 const crxRuntimeReload = {
   type: "custom",
   event: "crx:runtime-reload"
@@ -1262,25 +1372,51 @@ const pluginHMR = () => {
         const { root } = server.config;
         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));
+        virtualModules.forEach((file) => update(file));
         if (inputManifestFiles.background.length) {
           const background = prefix$1("/", inputManifestFiles.background[0]);
           if (relFiles.has(background) || modules.some(isImporter(join(server.config.root, background)))) {
-            debug$1("sending runtime reload");
+            debug$2("sending runtime reload");
             server.ws.send(crxRuntimeReload);
           }
         }
         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((file) => update(file));
+                }
+              }
+            } 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));
+              }
             }
           }
       }
@@ -1339,12 +1475,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 +1554,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 +1607,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 +1666,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 +1769,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,6 +1808,7 @@ const pluginManifest = () => {
                   })
                 );
               }
+            }
         } else {
           if (manifest2.content_scripts)
             for (const { js = [], matches = [] } of manifest2.content_scripts)
@@ -1689,12 +1866,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;
@@ -1743,6 +1934,7 @@ const pluginManifest = () => {
           }
         }
         const assetTypes = [
+          "contentStyles",
           "icons",
           "locales",
           "rulesets",
@@ -1780,10 +1972,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 +2064,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 +2109,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 +2244,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;
       }
     }

package/index.d.cts

@@ -0,0 +1 @@
+export * from './dist/index.d.ts'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -27,9 +27,14 @@
   "type": "module",
   "exports": {
     ".": {
-      "require": "./index.cjs",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./index.d.cts",
+        "default": "./index.cjs"
+      }
     },
     "./*": "./*",
     "./client": {
@@ -44,13 +49,13 @@
     "types",
     "manifest.schema.json",
     "index.cjs",
+    "index.d.cts",
     "client.d.ts"
   ],
   "dependencies": {
     "@rollup/pluginutils": "^4.1.2",
     "@webcomponents/custom-elements": "^1.5.0",
     "acorn-walk": "^8.2.0",
-    "cheerio": "^1.0.0-rc.10",
     "convert-source-map": "^1.7.0",
     "debug": "^4.3.3",
     "es-module-lexer": "^0.10.0",
@@ -58,6 +63,7 @@
     "fs-extra": "^10.0.1",
     "jsesc": "^3.0.2",
     "magic-string": "^0.30.12",
+    "node-html-parser": "^7.0.2",
     "pathe": "^2.0.1",
     "picocolors": "^1.1.1",
     "react-refresh": "^0.13.0",
@@ -102,12 +108,17 @@
     "svelte": "^3.48.0",
     "type-fest": "^5.1.0",
     "typescript": "^4.6.4",
+    "unocss": "^66.5.12",
     "vite": "^3.2.11",
     "vite-plugin-inspect": "0.7.25",
     "vitest": "0.28.5",
     "vue": "3.2.47"
   },
+  "peerDependencies": {
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+  },
   "scripts": {
+    "release": "bumpp",
     "format": "prettier -w -c ../../.prettierrc.yaml",
     "build": "run-s build:clean build:js",
     "build:clean": "rimraf dist",