@crxjs/vite-plugin 2.6.1 → 2.7.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { simple } from 'acorn-walk';
-import { createHash } from 'crypto';
+import { createHash, randomBytes } from 'crypto';
 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, tap, debounceTime, map, share, BehaviorSubject, mergeMap, firstValueFrom, takeUntil, first, toArray, retry, concatWith, Subscription, buffer } from 'rxjs';
@@ -58,7 +58,7 @@ function isCrxPlugin(p) {
   return !!p && typeof p === "object" && !(p instanceof Promise) && !Array.isArray(p) && p.name.startsWith("crx:");
 }
 
-var workerHmrClient = "const ownOrigin = `chrome-extension://${chrome.runtime.id}`;\nself.addEventListener(\"fetch\", (fetchEvent) => {\n  const url = new URL(fetchEvent.request.url);\n  if (url.origin === ownOrigin) {\n    fetchEvent.respondWith(sendToServer(fetchEvent.request));\n  }\n});\nasync function sendToServer(req) {\n  const url = new URL(req.url);\n  const requestHeaders = new Headers(req.headers);\n  url.protocol = __SERVER_PROTO__ + \":\";\n  url.host = \"localhost\";\n  url.port = __SERVER_PORT__;\n  url.searchParams.set(\"t\", Date.now().toString());\n  const response = await fetch(url.href.replace(/=$|=(?=&)/g, \"\"), {\n    headers: requestHeaders\n  });\n  const responseHeaders = new Headers(response.headers);\n  responseHeaders.set(\n    \"Content-Type\",\n    responseHeaders.get(\"Content-Type\") ?? \"text/javascript\"\n  );\n  responseHeaders.set(\n    \"Cache-Control\",\n    responseHeaders.get(\"Cache-Control\") ?? \"\"\n  );\n  return new Response(response.body, {\n    headers: responseHeaders\n  });\n}\nconst ports = /* @__PURE__ */ new Set();\nchrome.runtime.onConnect.addListener((port) => {\n  if (port.name === \"@crx/client\") {\n    ports.add(port);\n    port.onDisconnect.addListener((port2) => {\n      if (chrome.runtime.lastError) {\n        console.error(chrome.runtime.lastError);\n      }\n      ports.delete(port2);\n    });\n    port.onMessage.addListener((message) => {\n    });\n    port.postMessage({ data: JSON.stringify({ type: \"connected\" }) });\n  }\n});\nfunction notifyContentScripts(payload) {\n  const data = JSON.stringify(payload);\n  for (const port of ports)\n    port.postMessage({ data });\n}\nconsole.log(\"[vite] connecting...\");\nconst socketProtocol = __HMR_PROTOCOL__ || (location.protocol === \"https:\" ? \"wss\" : \"ws\");\nconst socketToken = __HMR_TOKEN__;\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;\nconst socket = new WebSocket(\n  `${socketProtocol}://${socketHost}?token=${socketToken}`,\n  \"vite-hmr\"\n);\nconst base = __BASE__ || \"/\";\nsocket.addEventListener(\"message\", async ({ data }) => {\n  handleSocketMessage(JSON.parse(data));\n});\nfunction isCrxHmrPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nfunction handleSocketMessage(payload) {\n  if (isCrxHmrPayload(payload)) {\n    handleCrxHmrPayload(payload);\n  } else if (payload.type === \"connected\") {\n    console.log(`[vite] connected.`);\n    const interval = setInterval(() => socket.send(\"ping\"), __HMR_TIMEOUT__);\n    socket.addEventListener(\"close\", () => clearInterval(interval));\n  }\n}\nfunction handleCrxHmrPayload(payload) {\n  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";
+var workerHmrClient = "const crxClientPortName = `@crx/client:${__CRX_HMR_TOKEN__}`;\nconst 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();\nfunction isExternalSenderAllowed(port) {\n  return !port.sender?.id || port.sender.id === chrome.runtime.id;\n}\nfunction handlePort(port, { external = false } = {}) {\n  if (port.name === crxClientPortName && (!external || isExternalSenderAllowed(port))) {\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}\nchrome.runtime.onConnect.addListener(handlePort);\nchrome.runtime.onConnectExternal.addListener(\n  (port) => handlePort(port, { external: true })\n);\nfunction notifyContentScripts(payload) {\n  const data = JSON.stringify(payload);\n  for (const port of ports)\n    port.postMessage({ data });\n}\nconsole.log(\"[vite] connecting...\");\nconst socketProtocol = __HMR_PROTOCOL__ || (location.protocol === \"https:\" ? \"wss\" : \"ws\");\nconst socketToken = __HMR_TOKEN__;\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;\nconst socket = new WebSocket(\n  `${socketProtocol}://${socketHost}?token=${socketToken}`,\n  \"vite-hmr\"\n);\nconst base = __BASE__ || \"/\";\nsocket.addEventListener(\"message\", async ({ data }) => {\n  handleSocketMessage(JSON.parse(data));\n});\nfunction isCrxHmrPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nfunction handleSocketMessage(payload) {\n  if (isCrxHmrPayload(payload)) {\n    handleCrxHmrPayload(payload);\n  } else if (payload.type === \"connected\") {\n    console.log(`[vite] connected.`);\n    const interval = setInterval(() => socket.send(\"ping\"), __HMR_TIMEOUT__);\n    socket.addEventListener(\"close\", () => clearInterval(interval));\n  }\n}\nfunction handleCrxHmrPayload(payload) {\n  if (!__LIVE_RELOAD__) {\n    if (payload.event === \"crx:runtime-reload\") {\n      console.log(\"[crx] runtime reload suppressed (liveReload disabled)\");\n    }\n    return;\n  }\n  notifyContentScripts(payload);\n  switch (payload.event) {\n    case \"crx:runtime-reload\":\n      console.log(\"[crx] runtime reload\");\n      chrome.runtime.reload();\n      break;\n  }\n}\nasync function waitForSuccessfulPing(ms = 1e3) {\n  while (true) {\n    try {\n      await fetch(`${base}__vite_ping`);\n      break;\n    } catch (e) {\n      await new Promise((resolve) => setTimeout(resolve, ms));\n    }\n  }\n}\nsocket.addEventListener(\"close\", async ({ wasClean }) => {\n  if (wasClean)\n    return;\n  console.log(`[vite] server connection lost. polling for restart...`);\n  await waitForSuccessfulPing();\n  if (__LIVE_RELOAD__) {\n    handleCrxHmrPayload({\n      type: \"custom\",\n      event: \"crx:runtime-reload\"\n    });\n  } else {\n    console.log(\n      \"[crx] server reconnected, skipping reload (liveReload disabled)\"\n    );\n  }\n});\n";
 
 const _debug = (id) => debug$5("crx").extend(id);
 const hash = (data, length = 5) => createHash("sha1").update(data).digest("base64").replace(/[^A-Za-z0-9]/g, "").slice(0, length);
@@ -274,6 +274,18 @@ async function fileReady(script) {
   await Promise.all(deps.map(fileReady));
 }
 
+const crxHmrTokens = /* @__PURE__ */ new WeakMap();
+function getCrxHmrToken(config) {
+  if (config.webSocketToken)
+    return config.webSocketToken;
+  let token = crxHmrTokens.get(config);
+  if (!token) {
+    token = randomBytes(16).toString("hex");
+    crxHmrTokens.set(config, token);
+  }
+  return token;
+}
+
 const viteClientId = "/@vite/client";
 const customElementsId = "/@webcomponents/custom-elements";
 const contentHmrPortId = "/@crx/client-port";
@@ -312,7 +324,12 @@ const pluginBackground = () => {
         if (id === workerClientId) {
           const base = `${config.server.https ? "https" : "http"}://localhost:${config.server.port}/`;
           return defineClientValues(
-            workerHmrClient.replace("__BASE__", JSON.stringify(base)).replace("__LIVE_RELOAD__", JSON.stringify(liveReload)),
+            workerHmrClient.replace("__BASE__", JSON.stringify(base)).replace("__LIVE_RELOAD__", JSON.stringify(liveReload)).replace(
+              "__CRX_HMR_TOKEN__",
+              JSON.stringify(
+                getCrxHmrToken(config)
+              )
+            ),
             config
           );
         }
@@ -430,11 +447,11 @@ function pluginExtensionCors() {
   };
 }
 
-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 contentHmrPort = "const crxClientPortName = `@crx/client:${__CRX_HMR_TOKEN__}`;\nfunction hasOwnExtensionRuntime(runtime2, extensionId2) {\n  try {\n    return new URL(runtime2.getURL(\"\")).host === extensionId2;\n  } catch {\n    return false;\n  }\n}\nconst runtime = typeof chrome === \"undefined\" ? void 0 : chrome.runtime;\nconst extensionId = new URL(import.meta.url).host;\nconst connectsToOwnRuntime = runtime ? hasOwnExtensionRuntime(runtime, extensionId) : false;\nfunction 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    if (!runtime)\n      throw new Error(\"[crx] chrome.runtime is not available\");\n    const connectInfo = { name: crxClientPortName };\n    this.port?.disconnect();\n    this.port = connectsToOwnRuntime ? runtime.connect(connectInfo) : runtime.connect(extensionId, connectInfo);\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";
 
-var contentDevMainLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    console.warn(__SCRIPT__, \"Content-script doesn't support HMR because the world is MAIN\");\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      __SCRIPT__\n    );\n    onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });\n  })().catch(console.error);\n\n})();\n";
+var contentDevMainLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    try {\n      if (__PREAMBLE__)\n        await import(\n          /* @vite-ignore */\n          __PREAMBLE__\n        );\n      await import(\n        /* @vite-ignore */\n        __CLIENT__\n      );\n    } catch (error) {\n      console.warn(\"[crx] MAIN world HMR client failed to load\", error);\n    }\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      __SCRIPT__\n    );\n    onExecute?.({\n      perf: { injectTime, loadTime: performance.now() - injectTime }\n    });\n  })().catch(console.error);\n\n})();\n";
 
 var contentProLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n    onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });\n  })().catch(console.error);\n\n})();\n";
 
@@ -474,11 +491,15 @@ function createProLoader({ fileName }) {
   return contentProLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName));
 }
 function createDevMainLoader({
+  preamble,
+  client,
   fileName
 }) {
-  return contentDevMainLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName)).replace(/__TIMESTAMP__/g, JSON.stringify(Date.now()));
+  return contentDevMainLoader.replace(/__PREAMBLE__/g, JSON.stringify(preamble)).replace(/__CLIENT__/g, JSON.stringify(client)).replace(/__SCRIPT__/g, JSON.stringify(fileName)).replace(/__TIMESTAMP__/g, JSON.stringify(Date.now()));
 }
-function createProMainLoader({ fileName }) {
+function createProMainLoader({
+  fileName
+}) {
   return contentProMainLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName));
 }
 
@@ -657,14 +678,16 @@ ${sourceMap}
     mergeMap(async ({ target, code, deps }) => {
       await lexer.init;
       const [imports] = lexer.parse(code, fileName);
-      const depSet = new Set(deps);
+      const isSelfDependency = (id) => getFileName({ type: "module", id }) === fileName;
+      const depSet = new Set(deps.filter((id) => !isSelfDependency(id)));
       const magic = new MagicString(code);
       for (const i of imports)
         if (i.n) {
-          depSet.add(i.n);
-          const fileName2 = getFileName({ type: "module", id: i.n });
+          const depFileName = getFileName({ type: "module", id: i.n });
+          if (!isSelfDependency(i.n))
+            depSet.add(i.n);
           const fullImport = code.substring(i.s, i.e);
-          magic.overwrite(i.s, i.e, fullImport.replace(i.n, `/${fileName2}`));
+          magic.overwrite(i.s, i.e, fullImport.replace(i.n, `/${depFileName}`));
         }
       return { target, source: magic.toString(), deps: [...depSet] };
     })
@@ -895,6 +918,37 @@ async function write(fileId) {
   return { start: start2, close: close2, deps };
 }
 
+function asRelativeImport(fromFileName, toFileName) {
+  const path = relative(dirname(fromFileName), toFileName);
+  return path.startsWith(".") ? path : `./${path}`;
+}
+function getExternallyConnectableMatch(match) {
+  if (match === "<all_urls>")
+    return null;
+  const parsed = /^(\*|https?):\/\/([^/]+)\/.*$/.exec(match);
+  if (!parsed)
+    return null;
+  const [, , host] = parsed;
+  if (host === "*")
+    return null;
+  return match;
+}
+function getExternallyConnectableMatches(matches) {
+  const result = /* @__PURE__ */ new Set();
+  const unsupported = /* @__PURE__ */ new Set();
+  for (const match of matches) {
+    const externallyConnectableMatch = getExternallyConnectableMatch(match);
+    if (externallyConnectableMatch) {
+      result.add(externallyConnectableMatch);
+    } else {
+      unsupported.add(match);
+    }
+  }
+  return {
+    matches: [...result],
+    unsupported: [...unsupported]
+  };
+}
 const pluginContentScripts = () => {
   const pluginName = "crx:content-scripts";
   let server;
@@ -903,6 +957,8 @@ const pluginContentScripts = () => {
   let liveReload = true;
   let sub = new Subscription();
   const worldMainIds = /* @__PURE__ */ new Set();
+  const worldMainExternallyConnectableMatches = /* @__PURE__ */ new Set();
+  const unsupportedWorldMainExternallyConnectableMatches = /* @__PURE__ */ new Set();
   const findWorldMainIds = async (config, env) => {
     const { manifest: _manifest } = await getOptions(config);
     const manifest = await (typeof _manifest === "function" ? _manifest(env) : _manifest);
@@ -911,16 +967,32 @@ const pluginContentScripts = () => {
         js.forEach((path) => worldMainIds.add(prefix$1("/", path)));
       }
     });
-    if (worldMainIds.size) {
-      const name = `[${pluginName}]`;
-      const message = pc.yellow(
-        [
-          `${name} Some content-scripts don't support HMR because the world is MAIN:`,
-          ...[...worldMainIds].map((id) => `  ${id}`)
-        ].join("\r\n")
-      );
-      console.log(message);
-    }
+    (manifest.content_scripts || []).forEach(({ world, matches = [] }) => {
+      if (world === "MAIN") {
+        const externallyConnectable = getExternallyConnectableMatches(matches);
+        externallyConnectable.matches.forEach(
+          (match) => worldMainExternallyConnectableMatches.add(match)
+        );
+        externallyConnectable.unsupported.forEach(
+          (match) => unsupportedWorldMainExternallyConnectableMatches.add(match)
+        );
+      }
+    });
+  };
+  const warnUnsupportedWorldMainExternallyConnectableMatches = () => {
+    if (unsupportedWorldMainExternallyConnectableMatches.size === 0)
+      return;
+    const name = `[${pluginName}]`;
+    const message = pc.yellow(
+      [
+        `${name} MAIN world HMR requires externally_connectable.matches. CRX cannot auto-add these Chrome-rejected content-script match patterns:`,
+        ...[...unsupportedWorldMainExternallyConnectableMatches].map(
+          (match) => `  ${match}`
+        ),
+        "Add explicit http(s) host addresses to your content script matches during development if you want MAIN world HMR for those pages."
+      ].join("\r\n")
+    );
+    console.warn(message);
   };
   return [
     {
@@ -928,6 +1000,7 @@ const pluginContentScripts = () => {
       apply: "serve",
       async config(config, env) {
         await findWorldMainIds(config, env);
+        warnUnsupportedWorldMainExternallyConnectableMatches();
         const opts = await getOptions(config);
         const { contentScripts: contentScripts2 = {} } = opts;
         hmrTimeout = contentScripts2.hmrTimeout ?? 5e3;
@@ -955,11 +1028,20 @@ const pluginContentScripts = () => {
                 preamble = add({ type: "module", id: preambleId });
               const client = add({ type: "module", id: viteClientId });
               const file = add({ type: "module", id });
+              const loaderFileName = getFileName({ type: "loader", id });
               const loader = add({
                 type: "asset",
-                id: getFileName({ type: "loader", id }),
+                id: loaderFileName,
                 source: worldMainIds.has(file.id) ? createDevMainLoader({
-                  fileName: `./${file.fileName.split("/").at(-1)}`
+                  preamble: preamble.fileName ? asRelativeImport(loaderFileName, preamble.fileName) : "",
+                  client: asRelativeImport(
+                    loaderFileName,
+                    client.fileName
+                  ),
+                  fileName: asRelativeImport(
+                    loaderFileName,
+                    file.fileName
+                  )
                 }) : createDevLoader({
                   preamble: preamble.fileName,
                   client: client.fileName,
@@ -989,13 +1071,30 @@ const pluginContentScripts = () => {
           return defined;
         }
         if (id === contentHmrPortId) {
-          const defined = contentHmrPort.replace("__CRX_HMR_TIMEOUT__", JSON.stringify(hmrTimeout)).replace("__CRX_LIVE_RELOAD__", JSON.stringify(liveReload));
+          const defined = contentHmrPort.replace("__CRX_HMR_TIMEOUT__", JSON.stringify(hmrTimeout)).replace("__CRX_LIVE_RELOAD__", JSON.stringify(liveReload)).replace(
+            "__CRX_HMR_TOKEN__",
+            JSON.stringify(
+              getCrxHmrToken(server.config)
+            )
+          );
           return defined;
         }
       },
       closeBundle() {
         sub.unsubscribe();
         sub = new Subscription();
+      },
+      transformCrxManifest(manifest) {
+        if (worldMainExternallyConnectableMatches.size === 0)
+          return null;
+        manifest.externally_connectable = manifest.externally_connectable ?? {};
+        manifest.externally_connectable.matches = [
+          .../* @__PURE__ */ new Set([
+            ...manifest.externally_connectable.matches ?? [],
+            ...worldMainExternallyConnectableMatches
+          ])
+        ];
+        return manifest;
       }
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -54,28 +54,26 @@
   ],
   "dependencies": {
     "@webcomponents/custom-elements": "^1.5.0",
-    "acorn-walk": "^8.2.0",
+    "acorn-walk": "^8.3.5",
     "convert-source-map": "^1.7.0",
     "debug": "^4.3.3",
     "es-module-lexer": "^0.10.0",
-    "tinyglobby": "^0.2.15",
+    "tinyglobby": "^0.2.17",
     "fs-extra": "^10.0.1",
     "jsesc": "^3.0.2",
     "magic-string": "^0.30.12",
-    "node-html-parser": "^7.0.2",
+    "node-html-parser": "^7.1.0",
     "pathe": "^2.0.1",
     "picocolors": "^1.1.1",
-    "react-refresh": "^0.13.0",
     "rollup": "2.80.0",
     "rxjs": "7.5.7"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.3",
-    "@eslint/eslintrc": "3.3.3",
+    "@eslint/eslintrc": "3.3.5",
     "@eslint/js": "9.26.0",
     "@extend-chrome/messages": "1.2.2",
     "@extend-chrome/storage": "1.5.0",
-    "@rollup/pluginutils": "^4.1.2",
     "@rollup/plugin-alias": "4.0.4",
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-json": "^5.0.0",
@@ -84,10 +82,10 @@
     "@types/acorn": "4.0.6",
     "@types/chrome": "0.0.237",
     "@types/convert-source-map": "^2.0.0",
-    "@types/debug": "4.1.7",
+    "@types/debug": "4.1.13",
     "@types/fs-extra": "9.0.13",
     "@types/jest-image-snapshot": "^5.1.0",
-    "@types/jsesc": "3.0.1",
+    "@types/jsesc": "3.0.3",
     "@types/node": "17.0.18",
     "@types/react": "17.0.52",
     "@types/react-dom": "17.0.18",