@crxjs/vite-plugin 1.0.14 → 2.0.0-beta.1

package/dist/index.mjs

@@ -1,78 +1,70 @@
-import { watch } from 'rollup';
 import { simple } from 'acorn-walk';
-import { createHash as createHash$1 } from 'crypto';
-import debug$5 from 'debug';
-import fg from 'fast-glob';
+import { createHash } from 'crypto';
+import debug$2 from 'debug';
 import v8 from 'v8';
-import { promises, readFileSync, existsSync } from 'fs';
-import MagicString from 'magic-string';
 import { posix } from 'path';
-import fsExtra from 'fs-extra';
+import fsx from 'fs-extra';
 import { performance } from 'perf_hooks';
-import colors from 'picocolors';
+import { rollup } from 'rollup';
+import * as lexer from 'es-module-lexer';
+import { readFile as readFile$1 } from 'fs/promises';
+import MagicString from 'magic-string';
 import { createLogger } from 'vite';
+import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
+import fg from 'fast-glob';
+import getPort, { portNumbers } from 'get-port';
 import { load } from 'cheerio';
 import jsesc from 'jsesc';
-import injector from 'connect-injector';
+import colors from 'picocolors';
+
+const pluginName$1 = "crx:optionsProvider";
+const pluginOptionsProvider = (options) => {
+  return {
+    name: pluginName$1,
+    api: {
+      crx: {
+        options
+      }
+    }
+  };
+};
+const getOptions = ({ plugins }) => {
+  if (typeof plugins === "undefined") {
+    throw new Error("config.plugins is undefined");
+  }
+  let options;
+  for (const p of plugins.flat()) {
+    if (isCrxPlugin(p)) {
+      if (p.name === pluginName$1) {
+        const plugin = p;
+        options = plugin.api.crx.options;
+        if (options)
+          break;
+      }
+    }
+  }
+  if (typeof options === "undefined") {
+    throw Error("Unable to get CRXJS options");
+  }
+  return options;
+};
+function isCrxPlugin(p) {
+  return !!p && typeof p === "object" && !(p instanceof Promise) && !Array.isArray(p) && p.name.startsWith("crx:");
+}
+
+var workerHmrClient = "const ownOrigin = new URL(chrome.runtime.getURL(\"/\")).origin;\nself.addEventListener(\"fetch\", (fetchEvent) => {\n  const url = new URL(fetchEvent.request.url);\n  if (url.origin === ownOrigin) {\n    fetchEvent.respondWith(sendToServer(url));\n  }\n});\nasync function sendToServer(url) {\n  url.protocol = \"http:\";\n  url.host = \"localhost\";\n  url.port = __SERVER_PORT__;\n  url.searchParams.set(\"t\", Date.now().toString());\n  const response = await fetch(url.href.replace(/=$|=(?=&)/g, \"\"));\n  return new Response(response.body, {\n    headers: {\n      \"Content-Type\": response.headers.get(\"Content-Type\") ?? \"text/javascript\"\n    }\n  });\n}\nconst ports = /* @__PURE__ */ new Set();\nchrome.runtime.onConnect.addListener((port) => {\n  if (port.name === \"@crx/client\") {\n    ports.add(port);\n    port.onDisconnect.addListener((port2) => ports.delete(port2));\n    port.onMessage.addListener((message) => {\n    });\n    port.postMessage({ data: JSON.stringify({ type: \"connected\" }) });\n  }\n});\nfunction notifyContentScripts(payload) {\n  const data = JSON.stringify(payload);\n  for (const port of ports)\n    port.postMessage({ data });\n}\nconsole.log(\"[vite] connecting...\");\nconst socketProtocol = __HMR_PROTOCOL__ || (location.protocol === \"https:\" ? \"wss\" : \"ws\");\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;\nconst socket = new WebSocket(`${socketProtocol}://${socketHost}`, \"vite-hmr\");\nconst base = __BASE__ || \"/\";\nsocket.addEventListener(\"message\", async ({ data }) => {\n  handleSocketMessage(JSON.parse(data));\n});\nfunction isCrxHmrPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nfunction handleSocketMessage(payload) {\n  if (isCrxHmrPayload(payload)) {\n    handleCrxHmrPayload(payload);\n  } else if (payload.type === \"connected\") {\n    console.log(`[vite] connected.`);\n    const interval = setInterval(() => socket.send(\"ping\"), __HMR_TIMEOUT__);\n    socket.addEventListener(\"close\", () => clearInterval(interval));\n  }\n}\nfunction handleCrxHmrPayload(payload) {\n  notifyContentScripts(payload);\n  switch (payload.event) {\n    case \"crx:runtime-reload\":\n      console.log(\"[crx] runtime reload\");\n      chrome.runtime.reload();\n      break;\n  }\n}\nasync function waitForSuccessfulPing(ms = 1e3) {\n  while (true) {\n    try {\n      await fetch(`${base}__vite_ping`);\n      break;\n    } catch (e) {\n      await new Promise((resolve) => setTimeout(resolve, ms));\n    }\n  }\n}\nsocket.addEventListener(\"close\", async ({ wasClean }) => {\n  if (wasClean)\n    return;\n  console.log(`[vite] server connection lost. polling for restart...`);\n  await waitForSuccessfulPing();\n  handleCrxHmrPayload({\n    type: \"custom\",\n    event: \"crx:runtime-reload\"\n  });\n});\n";
 
-const _debug = (id) => debug$5("crx").extend(id);
+const _debug = (id) => debug$2("crx").extend(id);
 const structuredClone = (obj) => {
   return v8.deserialize(v8.serialize(obj));
 };
-const createHash = (data, length = 5) => createHash$1("sha1").update(data).digest("base64").replace(/[^A-Za-z0-9]/g, "").slice(0, length);
+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";
-const isTruthy = (x) => !!x;
 function isObject(value) {
   return Object.prototype.toString.call(value) === "[object Object]";
 }
 const isResourceByMatch = (x) => "matches" in x;
-async function manifestFiles(manifest, options = {}) {
-  let locales = [];
-  if (manifest.default_locale)
-    locales = await fg("_locales/**/messages.json", options);
-  const rulesets = manifest.declarative_net_request?.rule_resources.flatMap(({ path }) => path) ?? [];
-  const contentScripts = manifest.content_scripts?.flatMap(({ js }) => js) ?? [];
-  const contentStyles = manifest.content_scripts?.flatMap(({ css }) => css);
-  const serviceWorker = manifest.background?.service_worker;
-  const htmlPages = htmlFiles(manifest);
-  const icons = [
-    Object.values(isString(manifest.icons) ? [manifest.icons] : manifest.icons ?? {}),
-    Object.values(isString(manifest.action?.default_icon) ? [manifest.action?.default_icon] : manifest.action?.default_icon ?? {})
-  ].flat();
-  let webAccessibleResources = [];
-  if (manifest.web_accessible_resources) {
-    const resources = await Promise.all(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);
-      return r;
-    }));
-    webAccessibleResources = resources.flat().filter(isString);
-  }
-  return {
-    contentScripts: [...new Set(contentScripts)].filter(isString),
-    contentStyles: [...new Set(contentStyles)].filter(isString),
-    html: htmlPages,
-    icons: [...new Set(icons)].filter(isString),
-    locales: [...new Set(locales)].filter(isString),
-    rulesets: [...new Set(rulesets)].filter(isString),
-    background: [serviceWorker].filter(isString),
-    webAccessibleResources
-  };
-}
-function htmlFiles(manifest) {
-  const files = [
-    manifest.action?.default_popup,
-    Object.values(manifest.chrome_url_overrides ?? {}),
-    manifest.devtools_page,
-    manifest.options_page,
-    manifest.options_ui?.page,
-    manifest.sandbox?.pages
-  ].flat().filter(isString).map((s) => s.split("#")[0]).sort();
-  return [...new Set(files)];
-}
 function decodeManifest(code) {
   const tree = this.parse(code);
   let literal;
@@ -99,70 +91,25 @@ function encodeManifest(manifest) {
   const json = JSON.stringify(JSON.stringify(manifest));
   return `export default ${json}`;
 }
-const stubMatchPattern = (pattern) => {
-  if (pattern === "<all_urls>") {
+function parseJsonAsset(bundle, key) {
+  const asset = bundle[key];
+  if (typeof asset === "undefined")
+    throw new TypeError(`OutputBundle["${key}"] is undefined.`);
+  if (asset.type !== "asset")
+    throw new Error(`OutputBundle["${key}"] is not an OutputAsset.`);
+  if (typeof asset.source !== "string")
+    throw new TypeError(`OutputBundle["${key}"].source is not a string.`);
+  return JSON.parse(asset.source);
+}
+const getMatchPatternOrigin = (pattern) => {
+  if (pattern.startsWith("<"))
     return pattern;
-  }
   const [schema, rest] = pattern.split("://");
   const [origin, pathname] = rest.split("/");
   const root = `${schema}://${origin}`;
   return pathname ? `${root}/*` : root;
 };
 
-const idBySource = /* @__PURE__ */ new Map();
-const idByUrl = /* @__PURE__ */ new Map();
-const urlById = /* @__PURE__ */ new Map();
-function setUrlMeta({
-  id,
-  source,
-  url
-}) {
-  idBySource.set(source, id);
-  idByUrl.set(url, id);
-  urlById.set(id, url);
-}
-const fileById = /* @__PURE__ */ new Map();
-const fileByUrl = /* @__PURE__ */ new Map();
-const pathById = /* @__PURE__ */ new Map();
-const pathByUrl = /* @__PURE__ */ new Map();
-const setFileMeta = ({ file, id }) => {
-  const url = urlById.get(id);
-  if (!url)
-    return;
-  fileById.set(id, file);
-  fileByUrl.set(url, file);
-  const pathName = `/${file}`;
-  pathById.set(id, pathName);
-  pathByUrl.set(url, pathName);
-};
-const ownerById = /* @__PURE__ */ new Map();
-const pathByOwner = /* @__PURE__ */ new Map();
-const ownersByFile = /* @__PURE__ */ new Map();
-const setOwnerMeta = ({ owner, id }) => {
-  const pathName = pathById.get(id);
-  if (!pathName)
-    return;
-  pathByOwner.set(owner, pathName);
-  ownerById.set(id, owner);
-  const fileName = fileById.get(id);
-  const owners = ownersByFile.get(fileName) ?? /* @__PURE__ */ new Set();
-  owners.add(owner);
-  ownersByFile.set(fileName, owners);
-};
-const outputById = /* @__PURE__ */ new Map();
-const outputByOwner = /* @__PURE__ */ new Map();
-const setOutputMeta = ({
-  output,
-  id
-}) => {
-  const ownerName = ownerById.get(id);
-  if (!ownerName)
-    return;
-  outputByOwner.set(ownerName, output);
-  outputById.set(id, output);
-};
-const transformResultByOwner = /* @__PURE__ */ new Map();
-
 const {
   basename,
   dirname,
@@ -179,168 +126,39 @@ const {
   sep
 } = posix;
 
-const viteClientId = "/@vite/client";
-const customElementsId = "@webcomponents/custom-elements";
-const reactRefreshId = "/@react-refresh";
-const contentHmrPortId = "/crx-client-port";
-const manifestId = "/crx-manifest";
-const preambleId = "/crx-client-preamble";
-const stubId = "/crx-stub";
-const workerClientId = "/crx-client-worker";
-
-const { readFile: readFile$2 } = promises;
-const debug$4 = _debug("file-writer").extend("chunks");
-for (const source of [viteClientId, customElementsId]) {
-  setUrlMeta(sourceToUrlMeta(source));
-}
-setUrlMeta({
-  source: reactRefreshId,
-  id: "/react-refresh",
-  url: reactRefreshId
-});
-function sourceToUrlMeta(source) {
-  const [p, query = ""] = source.split("?");
-  const pathname = p.replace(/^\/@id\//, "").replace(/^\/@fs/, "");
-  const url = [pathname, query].filter(isTruthy).join("?");
-  const hash = createHash(url);
-  const base = p.split("/").slice(-4).filter(isTruthy).join("-");
-  const id = `/${base}-${hash}.js`.replace(/[@]/g, "");
-  return { id, url, source };
-}
-const pluginFileWriterChunks = () => {
-  let server;
-  return {
-    name: "crx:file-writer-chunks",
-    apply: "build",
-    fileWriterStart(_server) {
-      server = _server;
-    },
-    async resolveId(source, importer) {
-      if (this.meta.watchMode) {
-        if (idBySource.has(source)) {
-          const id = idBySource.get(source);
-          debug$4(`resolved cached ${source} -> ${id}`);
-          return id;
-        } else if (importer) {
-          const meta = sourceToUrlMeta(source);
-          setUrlMeta(meta);
-          const { id } = meta;
-          debug$4(`resolved ${source} -> ${id}`);
-          return id;
-        } else {
-          const [rawUrl] = await server.moduleGraph.resolveUrl(source);
-          const name = rawUrl.split("/").join("-").replace(/^-/, "");
-          const url = rawUrl.startsWith("/") ? rawUrl : `/${rawUrl}`;
-          const id = `/${name}-${createHash(url)}.js`;
-          setUrlMeta({ url, id, source });
-          debug$4(`resolved entry ${source} -> ${id}`);
-          return id;
-        }
-      }
-    },
-    async load(id) {
-      if (this.meta.watchMode && urlById.has(id)) {
-        const url = urlById.get(id);
-        let serverModule = await server.moduleGraph.getModuleByUrl(url);
-        let transformResult = null;
-        if (!serverModule) {
-          transformResult = await server.transformRequest(url);
-          serverModule = await server.moduleGraph.getModuleByUrl(url);
-        }
-        if (!serverModule)
-          throw new Error(`Unable to load "${url}" from server.`);
-        const { file, url: owner } = serverModule;
-        transformResult = transformResult ?? transformResultByOwner.get(owner) ?? serverModule.transformResult;
-        if (!transformResult)
-          transformResult = await server.transformRequest(url);
-        if (!transformResult)
-          throw new TypeError(`Unable to load "${url}" from server.`);
-        transformResultByOwner.set(owner, transformResult);
-        if (file) {
-          setFileMeta({ id, file });
-          this.addWatchFile(file);
-          if (urlById.get(id).includes("?import"))
-            this.emitFile({
-              type: "asset",
-              fileName: relative(server.config.root, file),
-              source: await readFile$2(file)
-            });
-        }
-        if (url)
-          setOwnerMeta({ id, owner });
-        return { code: transformResult.code, map: transformResult.map };
-      }
-      return null;
-    },
-    outputOptions(options) {
-      const cacheDir = relative(server.config.root, server.config.cacheDir);
-      const fileNameById = /* @__PURE__ */ new Map();
-      fileNameById.set("/react-refresh", "vendor/react-refresh.js");
-      function fileNames(info) {
-        const id = info.type === "chunk" ? info.facadeModuleId : info.name;
-        if (id && fileNameById.has(id))
-          return fileNameById.get(id);
-        let fileName = info.type === "chunk" ? "assets/[name].js" : "assets/[name].[ext]";
-        if (id && fileById.has(id)) {
-          fileName = fileById.get(id);
-          const url = new URL(urlById.get(id), "stub://stub");
-          if (url.searchParams.has("type"))
-            fileName += `.${url.searchParams.get("type")}`;
-          if (url.searchParams.has("index"))
-            fileName += `.${url.searchParams.get("index")}`;
-        }
-        if (id?.startsWith("/@crx/"))
-          fileName = `vendor/${id.slice("/@crx/".length).split("/").join("-")}`;
-        if (fileName.startsWith(server.config.root))
-          fileName = fileName.slice(server.config.root.length + 1);
-        if (fileName.startsWith(cacheDir))
-          fileName = `vendor/${fileName.slice(cacheDir.length + 1)}`;
-        if (fileName.includes("/node_modules/"))
-          fileName = `vendor/${fileName.split("/node_modules/").pop().split("/").join("-").replace("vite-dist-client", "vite")}`;
-        if (fileName.startsWith("/"))
-          fileName = fileName.slice(1);
-        if (!fileName.endsWith(".js"))
-          fileName += ".js";
-        if (id)
-          fileNameById.set(id, fileName);
-        fileName = fileName.replace(/:/g, "-").replace(/@/, "");
-        return fileName;
-      }
-      return {
-        ...options,
-        preserveModules: true,
-        assetFileNames: fileNames,
-        entryFileNames: fileNames
-      };
-    },
-    generateBundle(options, bundle) {
-      for (const chunk of Object.values(bundle))
-        if (chunk.type === "chunk") {
-          const { facadeModuleId: id, modules, code, fileName } = chunk;
-          if (!id || Object.keys(modules).length !== 1)
-            continue;
-          const url = urlById.get(id);
-          if (url === viteClientId)
-            continue;
-          const ownerPath = ownerById.get(id);
-          if (!ownerPath)
-            continue;
-          const index = code.indexOf("createHotContext(");
-          if (index === -1)
-            continue;
-          const start = code.indexOf(ownerPath, index);
-          const end = start + ownerPath.length;
-          if (start > 0) {
-            const outputName = `/${fileName}`;
-            setOutputMeta({ id, output: outputName });
-            const magic = new MagicString(code);
-            magic.overwrite(start, end, outputName);
-            chunk.code = magic.toString();
-          }
-        }
+function defineClientValues(code, config) {
+  let options = config.server.hmr;
+  options = options && typeof options !== "boolean" ? options : {};
+  const host = options.host || null;
+  const protocol = options.protocol || null;
+  const timeout = options.timeout || 3e4;
+  const overlay = options.overlay !== false;
+  let hmrPort;
+  if (isObject(config.server.hmr)) {
+    hmrPort = config.server.hmr.clientPort || config.server.hmr.port;
+  }
+  if (config.server.middlewareMode) {
+    hmrPort = String(hmrPort || 24678);
+  } else {
+    hmrPort = String(hmrPort || options.port || config.server.port);
+  }
+  let hmrBase = config.base;
+  if (options.path) {
+    hmrBase = join(hmrBase, options.path);
+  }
+  if (hmrBase !== "/") {
+    hmrPort = normalize(`${hmrPort}${hmrBase}`);
+  }
+  return code.replace(`__MODE__`, JSON.stringify(config.mode)).replace(`__BASE__`, JSON.stringify(config.base)).replace(`__DEFINES__`, serializeDefine(config.define || {})).replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol)).replace(`__HMR_HOSTNAME__`, JSON.stringify(host)).replace(`__HMR_PORT__`, JSON.stringify(hmrPort)).replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout)).replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay)).replace(`__SERVER_PORT__`, JSON.stringify(config.server.port?.toString()));
+  function serializeDefine(define) {
+    let res = `{`;
+    for (const key in define) {
+      const val = define[key];
+      res += `${JSON.stringify(key)}: ${typeof val === "string" ? `(${val})` : JSON.stringify(val)}, `;
     }
-  };
-};
+    return res + `}`;
+  }
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1239,46 +1057,67 @@ var AnonymousSubject = (function (_super) {
     return AnonymousSubject;
 }(Subject));
 
-var BehaviorSubject = (function (_super) {
-    __extends(BehaviorSubject, _super);
-    function BehaviorSubject(_value) {
+var dateTimestampProvider = {
+    now: function () {
+        return (dateTimestampProvider.delegate || Date).now();
+    },
+    delegate: undefined,
+};
+
+var ReplaySubject = (function (_super) {
+    __extends(ReplaySubject, _super);
+    function ReplaySubject(_bufferSize, _windowTime, _timestampProvider) {
+        if (_bufferSize === void 0) { _bufferSize = Infinity; }
+        if (_windowTime === void 0) { _windowTime = Infinity; }
+        if (_timestampProvider === void 0) { _timestampProvider = dateTimestampProvider; }
         var _this = _super.call(this) || this;
-        _this._value = _value;
+        _this._bufferSize = _bufferSize;
+        _this._windowTime = _windowTime;
+        _this._timestampProvider = _timestampProvider;
+        _this._buffer = [];
+        _this._infiniteTimeWindow = true;
+        _this._infiniteTimeWindow = _windowTime === Infinity;
+        _this._bufferSize = Math.max(1, _bufferSize);
+        _this._windowTime = Math.max(1, _windowTime);
         return _this;
     }
-    Object.defineProperty(BehaviorSubject.prototype, "value", {
-        get: function () {
-            return this.getValue();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    BehaviorSubject.prototype._subscribe = function (subscriber) {
-        var subscription = _super.prototype._subscribe.call(this, subscriber);
-        !subscription.closed && subscriber.next(this._value);
-        return subscription;
-    };
-    BehaviorSubject.prototype.getValue = function () {
-        var _a = this, hasError = _a.hasError, thrownError = _a.thrownError, _value = _a._value;
-        if (hasError) {
-            throw thrownError;
+    ReplaySubject.prototype.next = function (value) {
+        var _a = this, isStopped = _a.isStopped, _buffer = _a._buffer, _infiniteTimeWindow = _a._infiniteTimeWindow, _timestampProvider = _a._timestampProvider, _windowTime = _a._windowTime;
+        if (!isStopped) {
+            _buffer.push(value);
+            !_infiniteTimeWindow && _buffer.push(_timestampProvider.now() + _windowTime);
         }
+        this._trimBuffer();
+        _super.prototype.next.call(this, value);
+    };
+    ReplaySubject.prototype._subscribe = function (subscriber) {
         this._throwIfClosed();
-        return _value;
+        this._trimBuffer();
+        var subscription = this._innerSubscribe(subscriber);
+        var _a = this, _infiniteTimeWindow = _a._infiniteTimeWindow, _buffer = _a._buffer;
+        var copy = _buffer.slice();
+        for (var i = 0; i < copy.length && !subscriber.closed; i += _infiniteTimeWindow ? 1 : 2) {
+            subscriber.next(copy[i]);
+        }
+        this._checkFinalizedStatuses(subscriber);
+        return subscription;
     };
-    BehaviorSubject.prototype.next = function (value) {
-        _super.prototype.next.call(this, (this._value = value));
+    ReplaySubject.prototype._trimBuffer = function () {
+        var _a = this, _bufferSize = _a._bufferSize, _timestampProvider = _a._timestampProvider, _buffer = _a._buffer, _infiniteTimeWindow = _a._infiniteTimeWindow;
+        var adjustedBufferSize = (_infiniteTimeWindow ? 1 : 2) * _bufferSize;
+        _bufferSize < Infinity && adjustedBufferSize < _buffer.length && _buffer.splice(0, _buffer.length - adjustedBufferSize);
+        if (!_infiniteTimeWindow) {
+            var now = _timestampProvider.now();
+            var last = 0;
+            for (var i = 1; i < _buffer.length && _buffer[i] <= now; i += 2) {
+                last = i;
+            }
+            last && _buffer.splice(0, last + 1);
+        }
     };
-    return BehaviorSubject;
+    return ReplaySubject;
 }(Subject));
 
-var dateTimestampProvider = {
-    now: function () {
-        return (dateTimestampProvider.delegate || Date).now();
-    },
-    delegate: undefined,
-};
-
 var Action = (function (_super) {
     __extends(Action, _super);
     function Action(scheduler, work) {
@@ -1451,15 +1290,9 @@ function isScheduler(value) {
 function last(arr) {
     return arr[arr.length - 1];
 }
-function popResultSelector(args) {
-    return isFunction(last(args)) ? args.pop() : undefined;
-}
 function popScheduler(args) {
     return isScheduler(last(args)) ? args.pop() : undefined;
 }
-function popNumber(args, defaultValue) {
-    return typeof last(args) === 'number' ? args.pop() : defaultValue;
-}
 
 var isArrayLike = (function (x) { return x && typeof x.length === 'number' && typeof x !== 'function'; });
 
@@ -1796,6 +1629,15 @@ function from(input, scheduler) {
     return scheduler ? scheduled(input, scheduler) : innerFrom(input);
 }
 
+function of() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var scheduler = popScheduler(args);
+    return from(args, scheduler);
+}
+
 var EmptyError = createErrorClass(function (_super) { return function EmptyErrorImpl() {
     _super(this);
     this.name = 'EmptyError';
@@ -1911,6 +1753,18 @@ function mergeAll(concurrent) {
     return mergeMap(identity, concurrent);
 }
 
+function concatAll() {
+    return mergeAll(1);
+}
+
+function concat$1() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return concatAll()(from(args, popScheduler(args)));
+}
+
 function timer(dueTime, intervalOrScheduler, scheduler) {
     if (dueTime === void 0) { dueTime = 0; }
     if (scheduler === void 0) { scheduler = async; }
@@ -1943,24 +1797,6 @@ function timer(dueTime, intervalOrScheduler, scheduler) {
     });
 }
 
-function merge() {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    var scheduler = popScheduler(args);
-    var concurrent = popNumber(args, Infinity);
-    var sources = args;
-    return !sources.length
-        ?
-            EMPTY
-        : sources.length === 1
-            ?
-                innerFrom(sources[0])
-            :
-                mergeAll(concurrent)(from(sources, scheduler));
-}
-
 function filter(predicate, thisArg) {
     return operate(function (source, subscriber) {
         var index = 0;
@@ -1986,36 +1822,57 @@ function buffer(closingNotifier) {
     });
 }
 
-function debounce(durationSelector) {
-    return operate(function (source, subscriber) {
-        var hasValue = false;
-        var lastValue = null;
-        var durationSubscriber = null;
-        var emit = function () {
-            durationSubscriber === null || durationSubscriber === void 0 ? void 0 : durationSubscriber.unsubscribe();
-            durationSubscriber = null;
-            if (hasValue) {
-                hasValue = false;
-                var value = lastValue;
-                lastValue = null;
-                subscriber.next(value);
-            }
-        };
+function scanInternals(accumulator, seed, hasSeed, emitOnNext, emitBeforeComplete) {
+    return function (source, subscriber) {
+        var hasState = hasSeed;
+        var state = seed;
+        var index = 0;
         source.subscribe(createOperatorSubscriber(subscriber, function (value) {
-            durationSubscriber === null || durationSubscriber === void 0 ? void 0 : durationSubscriber.unsubscribe();
-            hasValue = true;
-            lastValue = value;
-            durationSubscriber = createOperatorSubscriber(subscriber, emit, noop);
-            innerFrom(durationSelector(value)).subscribe(durationSubscriber);
-        }, function () {
-            emit();
-            subscriber.complete();
-        }, undefined, function () {
-            lastValue = durationSubscriber = null;
-        }));
+            var i = index++;
+            state = hasState
+                ?
+                    accumulator(state, value, i)
+                :
+                    ((hasState = true), value);
+            emitOnNext && subscriber.next(state);
+        }, emitBeforeComplete &&
+            (function () {
+                hasState && subscriber.next(state);
+                subscriber.complete();
+            })));
+    };
+}
+
+function reduce(accumulator, seed) {
+    return operate(scanInternals(accumulator, seed, arguments.length >= 2, false, true));
+}
+
+var arrReducer = function (arr, value) { return (arr.push(value), arr); };
+function toArray() {
+    return operate(function (source, subscriber) {
+        reduce(arrReducer, [])(source).subscribe(subscriber);
+    });
+}
+
+function concat() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var scheduler = popScheduler(args);
+    return operate(function (source, subscriber) {
+        concatAll()(from(__spreadArray([source], __read(args)), scheduler)).subscribe(subscriber);
     });
 }
 
+function concatWith() {
+    var otherSources = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        otherSources[_i] = arguments[_i];
+    }
+    return concat.apply(void 0, __spreadArray([], __read(otherSources)));
+}
+
 function defaultIfEmpty(defaultValue) {
     return operate(function (source, subscriber) {
         var hasValue = false;
@@ -2069,6 +1926,81 @@ function first(predicate, defaultValue) {
     };
 }
 
+function retry(configOrCount) {
+    if (configOrCount === void 0) { configOrCount = Infinity; }
+    var config;
+    if (configOrCount && typeof configOrCount === 'object') {
+        config = configOrCount;
+    }
+    else {
+        config = {
+            count: configOrCount,
+        };
+    }
+    var _a = config.count, count = _a === void 0 ? Infinity : _a, delay = config.delay, _b = config.resetOnSuccess, resetOnSuccess = _b === void 0 ? false : _b;
+    return count <= 0
+        ? identity
+        : operate(function (source, subscriber) {
+            var soFar = 0;
+            var innerSub;
+            var subscribeForRetry = function () {
+                var syncUnsub = false;
+                innerSub = source.subscribe(createOperatorSubscriber(subscriber, function (value) {
+                    if (resetOnSuccess) {
+                        soFar = 0;
+                    }
+                    subscriber.next(value);
+                }, undefined, function (err) {
+                    if (soFar++ < count) {
+                        var resub_1 = function () {
+                            if (innerSub) {
+                                innerSub.unsubscribe();
+                                innerSub = null;
+                                subscribeForRetry();
+                            }
+                            else {
+                                syncUnsub = true;
+                            }
+                        };
+                        if (delay != null) {
+                            var notifier = typeof delay === 'number' ? timer(delay) : innerFrom(delay(err, soFar));
+                            var notifierSubscriber_1 = createOperatorSubscriber(subscriber, function () {
+                                notifierSubscriber_1.unsubscribe();
+                                resub_1();
+                            }, function () {
+                                subscriber.complete();
+                            });
+                            notifier.subscribe(notifierSubscriber_1);
+                        }
+                        else {
+                            resub_1();
+                        }
+                    }
+                    else {
+                        subscriber.error(err);
+                    }
+                }));
+                if (syncUnsub) {
+                    innerSub.unsubscribe();
+                    innerSub = null;
+                    subscribeForRetry();
+                }
+            };
+            subscribeForRetry();
+        });
+}
+
+function startWith() {
+    var values = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        values[_i] = arguments[_i];
+    }
+    var scheduler = popScheduler(values);
+    return operate(function (source, subscriber) {
+        (scheduler ? concat$1(values, source, scheduler) : concat$1(values, source)).subscribe(subscriber);
+    });
+}
+
 function switchMap(project, resultSelector) {
     return operate(function (source, subscriber) {
         var innerSubscriber = null;
@@ -2090,184 +2022,478 @@ function switchMap(project, resultSelector) {
     });
 }
 
-function withLatestFrom() {
-    var inputs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputs[_i] = arguments[_i];
-    }
-    var project = popResultSelector(inputs);
+function takeUntil(notifier) {
     return operate(function (source, subscriber) {
-        var len = inputs.length;
-        var otherValues = new Array(len);
-        var hasValue = inputs.map(function () { return false; });
-        var ready = false;
-        var _loop_1 = function (i) {
-            innerFrom(inputs[i]).subscribe(createOperatorSubscriber(subscriber, function (value) {
-                otherValues[i] = value;
-                if (!ready && !hasValue[i]) {
-                    hasValue[i] = true;
-                    (ready = hasValue.every(identity)) && (hasValue = null);
-                }
-            }, noop));
-        };
-        for (var i = 0; i < len; i++) {
-            _loop_1(i);
-        }
-        source.subscribe(createOperatorSubscriber(subscriber, function (value) {
-            if (ready) {
-                var values = __spreadArray([value], __read(otherValues));
-                subscriber.next(project ? project.apply(void 0, __spreadArray([], __read(values))) : values);
-            }
-        }));
+        innerFrom(notifier).subscribe(createOperatorSubscriber(subscriber, function () { return subscriber.complete(); }, noop));
+        !subscriber.closed && source.subscribe(subscriber);
     });
 }
 
-const { pathExistsSync, outputFile, statSync } = fsExtra;
-const debug$3 = _debug("file-writer").extend("events");
-const writerEvent$ = new BehaviorSubject({
-  type: "init"
-});
-writerEvent$.subscribe((event) => {
-  debug$3("watcher event %O", event.type);
-  if (event.type === "error") {
-    debug$3("watcher error %O", event.error);
+class RxMap extends Map {
+  static isChangeType = {
+    clear: (x) => x.type === "clear",
+    delete: (x) => x.type === "delete",
+    set: (x) => x.type === "set"
+  };
+  change$;
+  constructor(iterable) {
+    super(iterable);
+    const change$ = new Subject();
+    this.change$ = change$.asObservable();
+    const changeMethodKeys = ["clear", "set", "delete"];
+    for (const type of changeMethodKeys) {
+      const method = this[type];
+      this[type] = function(...args) {
+        const result = method.call(this, ...args);
+        change$.next({ type, key: args[0], value: args[1], map: this });
+        return result;
+      }.bind(this);
+    }
   }
-});
-const filesError$ = writerEvent$.pipe(filter((x) => {
-  return x.type === "error";
-}));
-const filesStart$ = writerEvent$.pipe(filter((x) => {
-  return x.type === "buildStart";
-}));
-const filesStart = () => firstValueFrom(filesStart$);
-const filesReady$ = writerEvent$.pipe(filter((x) => {
-  return x.type === "writeBundle";
-}), switchMap((event) => timer(0, 100).pipe(map(() => event), first(({ bundle, options, timestamp }) => {
-  const result = Object.keys(bundle).every((p) => {
-    const stats = statSync(join(options.dir, p));
-    return stats.mtimeMs > timestamp;
-  });
-  return result;
-}))));
-const filesReady = () => firstValueFrom(filesReady$);
-const server$ = new Subject();
-const triggerName = firstValueFrom(server$.pipe(map(({ config: { cacheDir } }) => cacheDir), filter(isString), map((dir) => join(dir, ".crx-watch-trigger"))));
-const rebuildFiles = async () => {
-  debug$3("rebuildFiles start");
-  await filesReady();
-  await Promise.all([
-    outputFile(await triggerName, Date.now().toString()),
-    filesStart()
-  ]);
-  await filesReady();
-  debug$3("rebuildFiles end");
-};
-function startLogger(server) {
-  const logger = createLogger(server.config.logLevel, {
-    prefix: "[crx]"
-  });
-  const subs = [
-    filesStart$.subscribe(() => {
-      const message = colors.green("files start");
-      const outDir = colors.dim(relative(server.config.root, server.config.build.outDir));
-      logger.info(`${message} ${outDir}`, { timestamp: true });
-    }),
-    filesReady$.subscribe(({ duration: d }) => {
-      const message = colors.green("files ready");
-      const duration = colors.dim(`in ${colors.bold(`${d}ms`)}`);
-      logger.info(`${message} ${duration}`, { timestamp: true });
-    }),
-    filesError$.subscribe(({ error }) => {
-      logger.error(colors.dim("error from file writer:"), { timestamp: true });
-      if (error) {
-        const message = error?.stack ?? error.message;
-        logger.error(colors.red(message));
-      }
-    })
-  ];
-  return () => subs.forEach((sub) => sub.unsubscribe());
 }
-const pluginFileWriterEvents = () => {
-  let start = performance.now();
-  let stopLogger;
-  return {
-    name: "crx:file-writer-events",
-    enforce: "post",
-    apply: "build",
-    fileWriterStart(server) {
-      debug$3("fileWriterStart");
-      stopLogger = startLogger(server);
-    },
-    closeWatcher() {
-      debug$3("closeWatcher");
-      stopLogger();
-    },
-    async buildStart(options) {
-      start = performance.now();
-      const filename = await triggerName;
-      if (!pathExistsSync(filename)) {
-        await outputFile(filename, Date.now().toString());
+
+const outputFiles = new RxMap();
+
+_debug("file-writer").extend("utilities");
+function prefix$1(prefix2, text) {
+  return text.startsWith(prefix2) ? text : prefix2 + text;
+}
+function strip(prefix2, text) {
+  return text?.startsWith(prefix2) ? text?.slice(prefix2.length) : text;
+}
+function formatFileData(script) {
+  script.id = prefix$1("/", script.id);
+  if (script.fileName)
+    script.fileName = strip("/", script.fileName);
+  if (script.loaderName)
+    script.loaderName = strip("/", script.loaderName);
+  return script;
+}
+function getFileName({ type, id }) {
+  let fileName = id.replace(/t=\d+&/, "").replace(/^\//, "").replace(/\?/g, "__").replace(/&/g, "_").replace(/=/g, "--");
+  if (fileName.includes("node_modules/")) {
+    fileName = `vendor/${fileName.split("node_modules/").pop().replace(/\//g, "-")}`;
+  } else if (fileName.startsWith("@")) {
+    fileName = `vendor/${fileName.slice("@".length).replace(/\//g, "-")}`;
+  } else if (fileName.startsWith(".vite/deps/")) {
+    fileName = `vendor/${fileName.slice(".vite/deps/".length)}`;
+  }
+  switch (type) {
+    case "iife":
+      return `${fileName}.iife.js`;
+    case "loader":
+      return `${fileName}-loader.js`;
+    case "module":
+      return `${fileName}.js`;
+    case "asset":
+      return fileName;
+    default:
+      throw new Error(`Unexpected script type "${type}" for "${JSON.stringify({
+        type,
+        id
+      })}"`);
+  }
+}
+function getOutputPath(server, fileName) {
+  const {
+    root,
+    build: { outDir }
+  } = server.config;
+  const target = isAbsolute(outDir) ? join(outDir, fileName) : join(root, outDir, fileName);
+  return target;
+}
+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.`);
+  } else if (type === "loader") {
+    throw new Error("Vite does not transform loader files.");
+  } else if (type === "module") {
+    if (id.startsWith("/@id/"))
+      return id.slice("/@id/".length).replace("__x00__", "\0");
+    return prefix$1("/", id);
+  } else {
+    throw new Error(`Invalid file type: "${type}"`);
+  }
+}
+async function fileReady(script) {
+  const fileName = getFileName(script);
+  const file = outputFiles.get(fileName);
+  if (!file)
+    throw new Error("unknown script type and id");
+  const { deps } = await file.file;
+  await Promise.all(deps.map(fileReady));
+}
+
+const viteClientId = "/@vite/client";
+const customElementsId = "/@webcomponents/custom-elements";
+const contentHmrPortId = "/@crx/client-port";
+const manifestId = "/@crx/manifest";
+const preambleId = "/@crx/client-preamble";
+const stubId = "/@crx/stub";
+const workerClientId = "/@crx/client-worker";
+
+const pluginBackground = () => {
+  let config;
+  return [
+    {
+      name: "crx:background-client",
+      apply: "serve",
+      resolveId(source) {
+        if (source === `/${workerClientId}`)
+          return workerClientId;
+      },
+      load(id) {
+        if (id === workerClientId) {
+          const base = `http://localhost:${config.server.port}/`;
+          return defineClientValues(workerHmrClient.replace("__BASE__", JSON.stringify(base)), config);
+        }
       }
-      this.addWatchFile(filename);
-      writerEvent$.next({ type: "buildStart", options });
-      debug$3("buildStart");
     },
-    writeBundle(options, bundle) {
-      const timestamp = performance.now();
-      const duration = Math.round(timestamp - start);
-      writerEvent$.next({
-        type: "writeBundle",
-        options,
-        bundle,
-        duration,
-        timestamp
-      });
-      debug$3("writeBundle");
-    },
-    renderError(error) {
-      writerEvent$.next({ type: "error", error });
-    },
-    watchChange(id, { event }) {
-      writerEvent$.next({ type: "change", id, event });
+    {
+      name: "crx:background-loader-file",
+      enforce: "post",
+      configResolved(_config) {
+        config = _config;
+      },
+      renderCrxManifest(manifest) {
+        const worker = manifest.background?.service_worker;
+        let loader;
+        if (config.command === "serve") {
+          const port = config.server.port?.toString();
+          if (typeof port === "undefined")
+            throw new Error("server port is undefined in watch mode");
+          loader = `import 'http:/localhost:${port}/@vite/env';
+`;
+          loader += `import 'http://localhost:${port}${workerClientId}';
+`;
+          if (worker)
+            loader += `import 'http://localhost:${port}/${worker}';
+`;
+        } else if (worker) {
+          loader = `import './${worker}';
+`;
+        } else {
+          return null;
+        }
+        const refId = this.emitFile({
+          type: "asset",
+          fileName: getFileName({ type: "loader", id: "service-worker" }),
+          source: loader
+        });
+        manifest.background = {
+          service_worker: this.getFileName(refId),
+          type: "module"
+        };
+        return manifest;
+      }
     }
-  };
+  ];
 };
 
-var precontrollerScript = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\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        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 precontrollerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%PATH%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
+var contentDevLoader = "(function () {\n  'use strict';\n\n  (async () => {\n    if (__PREAMBLE__)\n      await import(\n        /* @vite-ignore */\n        chrome.runtime.getURL(__PREAMBLE__)\n      );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__CLIENT__)\n    );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\n";
 
-const pluginFileWriterHtml = () => {
-  let precontrollerName;
-  return {
-    name: "crx:file-writer-html",
-    apply: "build",
-    fileWriterStart(server) {
-      const plugins = server.config.plugins;
-      const i = plugins.findIndex(({ name }) => name === "alias");
-      plugins.splice(i, 0, {
-        name: "crx:load-precontroller",
-        apply: "serve",
-        load(id) {
-          if (id === `/${precontrollerName}`)
-            return "location.reload();";
+var contentProLoader = "(function () {\n  'use strict';\n\n  (async () => {\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\n";
+
+const contentScripts = new RxMap();
+contentScripts.change$.pipe(filter(RxMap.isChangeType.set)).subscribe(({ map, value }) => {
+  const keyNames = [
+    "refId",
+    "id",
+    "fileName",
+    "loaderName",
+    "resolvedId",
+    "scriptId"
+  ];
+  for (const keyName of keyNames) {
+    const key = value[keyName];
+    if (typeof key === "undefined" || map.has(key)) {
+      continue;
+    } else {
+      map.set(key, value);
+    }
+  }
+});
+function hashScriptId(script) {
+  return hash(`${script.type}&${script.id}`);
+}
+function createDevLoader({
+  preamble,
+  client,
+  fileName
+}) {
+  return contentDevLoader.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 createProLoader({ fileName }) {
+  return contentProLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName));
+}
+
+const serverEvent$ = new ReplaySubject(1);
+const close$ = serverEvent$.pipe(filter((e) => e.type === "close"), switchMap((e) => of(e)));
+const start$ = serverEvent$.pipe(filter((e) => e.type === "start"), switchMap((e) => of(e)));
+const fileWriterEvent$ = new ReplaySubject(1);
+const buildEnd$ = fileWriterEvent$.pipe(filter((e) => e.type === "build_end"), switchMap((e) => of(e)));
+fileWriterEvent$.pipe(filter((e) => e.type === "build_start"), switchMap((e) => of(e)));
+const allFilesReady$ = buildEnd$.pipe(switchMap(() => outputFiles.change$.pipe(startWith({ type: "start" }))), map(() => [...outputFiles.values()]), switchMap((files) => Promise.allSettled(files.map(({ file }) => file))));
+const isRejected = (x) => x?.status === "rejected";
+const fileWriterError$ = allFilesReady$.pipe(mergeMap((results) => results.filter(isRejected)), map((rejected) => ({ err: rejected.reason, type: "error" })));
+firstValueFrom(fileWriterError$.pipe(takeUntil(serverEvent$.pipe(first(({ type }) => type === "close"))), toArray()));
+function prepFileData(fileId) {
+  const fileName = getFileName(fileId);
+  if (fileId.type === "asset") {
+    return prepAsset(fileName, fileId);
+  } else {
+    return prepScript(fileName, fileId);
+  }
+}
+function prepAsset(fileName, { id, source }) {
+  return ($) => $.pipe(mergeMap(async ({ server }) => {
+    const target = getOutputPath(server, fileName);
+    return {
+      target,
+      source: source ?? await readFile$1(join(server.config.root, id)),
+      deps: []
+    };
+  }));
+}
+function prepScript(fileName, script) {
+  return ($) => $.pipe(mergeMap(async ({ server }) => {
+    const target = getOutputPath(server, fileName);
+    const viteUrl = getViteUrl(script);
+    const transformResult = await server.transformRequest(viteUrl);
+    if (!transformResult)
+      throw new TypeError(`Unable to load "${script.id}" from server.`);
+    const { code, deps = [], dynamicDeps = [] } = transformResult;
+    return { target, code, deps: [...deps, ...dynamicDeps].flat(), server };
+  }), retry({ count: 10, delay: 100 }), mergeMap(async ({ target, server, ...rest }) => {
+    const plugins = server.config.plugins;
+    let { code, deps } = rest;
+    for (const plugin of plugins) {
+      const r = await plugin.renderCrxDevScript?.(code, script);
+      if (typeof r === "string")
+        code = r;
+    }
+    return { target, code, deps };
+  }), mergeMap(async ({ target, code, deps }) => {
+    await lexer.init;
+    const [imports] = lexer.parse(code, fileName);
+    const depSet = new Set(deps);
+    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 });
+        magic.overwrite(i.s, i.e, `/${fileName2}`);
+      }
+    return { target, source: magic.toString(), deps: [...depSet] };
+  }));
+}
+async function allFilesReady() {
+  await firstValueFrom(allFilesReady$);
+}
+
+const { outputFile } = fsx;
+_debug("file-writer");
+async function start({
+  server
+}) {
+  serverEvent$.next({ type: "start", server });
+  const plugins = server.config.plugins.filter((p) => p.name?.startsWith("crx:"));
+  const { rollupOptions, outDir } = server.config.build;
+  const inputOptions = {
+    input: "index.html",
+    ...rollupOptions,
+    plugins
+  };
+  const rollupOutputOptions = [rollupOptions.output].flat()[0];
+  const outputOptions = {
+    ...rollupOutputOptions,
+    dir: outDir,
+    format: "es"
+  };
+  fileWriterEvent$.next({ type: "build_start" });
+  const build = await rollup(inputOptions);
+  await build.write(outputOptions);
+  fileWriterEvent$.next({ type: "build_end" });
+  await allFilesReady();
+}
+async function close() {
+  serverEvent$.next({ type: "close" });
+}
+function add(script) {
+  const fileName = getFileName(script);
+  let file = outputFiles.get(fileName);
+  if (typeof file === "undefined") {
+    file = formatFileData({
+      ...script,
+      fileName,
+      file: write(script)
+    });
+    outputFiles.set(file.fileName, file);
+  }
+  return file;
+}
+function update(_id) {
+  const id = prefix$1("/", _id);
+  const types = ["iife", "module"];
+  const updatedFiles = [];
+  for (const type of types) {
+    const fileName = getFileName({ id, type });
+    const scriptFile = outputFiles.get(fileName);
+    if (scriptFile) {
+      scriptFile.file = write({ id, type });
+      updatedFiles.push(scriptFile);
+      outputFiles.set(fileName, scriptFile);
+    }
+  }
+  return updatedFiles;
+}
+async function write(fileId) {
+  const start2 = performance.now();
+  const deps = await firstValueFrom(start$.pipe(prepFileData(fileId), mergeMap(async ({ target, source, deps: deps2 }) => {
+    const files = deps2.map((id) => {
+      const r = [add({ id, type: "module" })];
+      if (id.includes("?import")) {
+        const [imported] = id.split("?import");
+        r.push(add({ id: imported, type: "asset" }));
+      }
+      return r;
+    }).flat();
+    if (source instanceof Uint8Array)
+      await outputFile(target, source);
+    else
+      await outputFile(target, source, { encoding: "utf8" });
+    return files;
+  }), takeUntil(close$), concatWith(of([]))));
+  const close2 = performance.now();
+  return { start: start2, close: close2, deps };
+}
+
+const pluginContentScripts = () => {
+  let server;
+  let preambleCode;
+  let hmrTimeout;
+  let sub = new Subscription();
+  return [
+    {
+      name: "crx:content-scripts",
+      apply: "serve",
+      config(config) {
+        const { contentScripts: contentScripts2 = {} } = getOptions(config);
+        hmrTimeout = contentScripts2.hmrTimeout ?? 5e3;
+        preambleCode = preambleCode ?? contentScripts2.preambleCode;
+      },
+      async configureServer(_server) {
+        server = _server;
+        if (typeof preambleCode === "undefined" && server.config.plugins.some(({ name = "none" }) => name.toLowerCase().includes("react"))) {
+          try {
+            const react = await import('@vitejs/plugin-react');
+            preambleCode = react.default.preambleCode;
+          } catch (error) {
+            preambleCode = false;
+          }
         }
-      });
+        sub.add(contentScripts.change$.pipe(filter(RxMap.isChangeType.set)).subscribe(({ value: script }) => {
+          const { type, id } = script;
+          if (type === "loader") {
+            let preamble = { fileName: "" };
+            if (preambleCode)
+              preamble = add({ type: "module", id: preambleId });
+            const client = add({ type: "module", id: viteClientId });
+            const file = add({ type: "module", id });
+            const loader = add({
+              type: "asset",
+              id: getFileName({ type: "loader", id }),
+              source: createDevLoader({
+                preamble: preamble.fileName,
+                client: client.fileName,
+                fileName: file.fileName
+              })
+            });
+            script.fileName = loader.fileName;
+          } else if (type === "iife") {
+            throw new Error("IIFE content scripts are not implemented");
+          } else {
+            const file = add({ type: "module", id });
+            script.fileName = file.fileName;
+          }
+        }));
+      },
+      resolveId(source) {
+        if (source === preambleId)
+          return preambleId;
+        if (source === contentHmrPortId)
+          return contentHmrPortId;
+      },
+      load(id) {
+        if (id === preambleId && typeof preambleCode === "string") {
+          const defined = preambleCode.replace(/__BASE__/g, server.config.base);
+          return defined;
+        }
+        if (id === contentHmrPortId) {
+          const defined = contentHmrPort.replace("__CRX_HMR_TIMEOUT__", JSON.stringify(hmrTimeout));
+          return defined;
+        }
+      },
+      closeBundle() {
+        sub.unsubscribe();
+        sub = new Subscription();
+      }
+    },
+    {
+      name: "crx:content-scripts",
+      apply: "build",
+      enforce: "pre",
+      generateBundle() {
+        for (const [key, script] of contentScripts)
+          if (key === script.refId) {
+            if (script.type === "module") {
+              const fileName = this.getFileName(script.refId);
+              script.fileName = fileName;
+            } else if (script.type === "loader") {
+              const fileName = this.getFileName(script.refId);
+              script.fileName = fileName;
+              const refId = this.emitFile({
+                type: "asset",
+                name: getFileName({ type: "loader", id: basename(script.id) }),
+                source: createProLoader({ fileName })
+              });
+              script.loaderName = this.getFileName(refId);
+            } else if (script.type === "iife") {
+              throw new Error("IIFE content scripts are not implemented");
+            }
+            contentScripts.set(script.refId, formatFileData(script));
+          }
+      }
+    }
+  ];
+};
+
+const pluginContentScriptsCss = () => {
+  let injectCss;
+  return {
+    name: "crx:content-scripts-css",
+    enforce: "post",
+    config(config) {
+      const { contentScripts: contentScripts2 = {} } = getOptions(config);
+      injectCss = contentScripts2.injectCss ?? true;
     },
     renderCrxManifest(manifest) {
-      if (this.meta.watchMode) {
-        const refId = this.emitFile({
-          type: "asset",
-          name: "precontroller.js",
-          source: precontrollerScript
-        });
-        precontrollerName = this.getFileName(refId);
-        for (const fileName of htmlFiles(manifest)) {
-          this.emitFile({
-            type: "asset",
-            fileName,
-            source: precontrollerHtml.replace("%PATH%", `/${precontrollerName}`)
-          });
+      if (injectCss) {
+        if (manifest.content_scripts) {
+          for (const script of manifest.content_scripts)
+            if (script.js)
+              for (const fileName of script.js)
+                if (contentScripts.has(fileName)) {
+                  const { css } = contentScripts.get(fileName);
+                  if (css?.length)
+                    script.css = [script.css ?? [], css].flat();
+                } else {
+                  throw new Error(`Content script is undefined by fileName: ${fileName}`);
+                }
         }
       }
       return manifest;
@@ -2275,89 +2501,257 @@ const pluginFileWriterHtml = () => {
   };
 };
 
-const { readFile: readFile$1 } = promises;
-const pluginFileWriterPublic = () => {
+const pluginDeclaredContentScripts = () => {
+  return [];
+};
+
+const _dynamicScriptRegEx = /\b(import.meta).CRX_DYNAMIC_SCRIPT_(.+?);$/gm;
+const dynamicScriptRegEx = () => {
+  _dynamicScriptRegEx.lastIndex = 0;
+  return _dynamicScriptRegEx;
+};
+const pluginDynamicContentScripts = () => {
   let config;
-  return {
-    name: "crx:file-writer-public",
-    apply: "build",
-    configResolved(_config) {
-      config = _config;
-    },
-    async buildStart() {
-      if (this.meta.watchMode) {
-        this.addWatchFile(config.publicDir);
-        const publicFiles = await fg(`${config.publicDir}/**/*`);
-        for (const file of publicFiles) {
-          const source = await readFile$1(file);
-          const fileName = relative(config.publicDir, file);
-          this.emitFile({ type: "asset", fileName, source });
+  return [
+    {
+      name: "crx:dynamic-content-scripts-loader",
+      enforce: "pre",
+      configResolved(_config) {
+        config = _config;
+      },
+      async resolveId(_source, importer) {
+        if (importer && _source.includes("?script")) {
+          const url = new URL(_source, "stub://stub");
+          if (url.searchParams.has("script")) {
+            const [source] = _source.split("?");
+            const resolved = await this.resolve(source, importer, {
+              skipSelf: true
+            });
+            if (!resolved)
+              throw new Error(`Could not resolve dynamic script: "${_source}" from "${importer}"`);
+            const { id } = resolved;
+            let type = "loader";
+            if (url.searchParams.has("module")) {
+              type = "module";
+            } else if (url.searchParams.has("iife")) {
+              type = "iife";
+            }
+            const scriptId = hashScriptId({ type, id });
+            const resolvedId = `${id}?scriptId=${scriptId}`;
+            let script = contentScripts.get(resolvedId);
+            if (typeof script === "undefined") {
+              let refId;
+              let fileName;
+              let loaderName;
+              if (config.command === "build") {
+                refId = this.emitFile({
+                  type: "chunk",
+                  id,
+                  name: basename(id)
+                });
+              } else {
+                refId = scriptId;
+                const relId = relative(config.root, id);
+                fileName = getFileName({
+                  type: type === "iife" ? "iife" : "module",
+                  id: relId
+                });
+                if (type === "loader")
+                  loaderName = getFileName({ type, id: relId });
+              }
+              script = formatFileData({
+                type,
+                id: relative(config.root, id),
+                isDynamicScript: true,
+                fileName,
+                loaderName,
+                refId,
+                scriptId,
+                matches: []
+              });
+              contentScripts.set(script.id, script);
+            }
+            return resolvedId;
+          } else if (url.searchParams.has("scriptId")) {
+            return _source;
+          }
+        }
+      },
+      async load(id) {
+        const index = id.indexOf("?scriptId=");
+        if (index > -1) {
+          const scriptId = id.slice(index + "?scriptId=".length);
+          const script = contentScripts.get(scriptId);
+          if (config.command === "build") {
+            return `export default import.meta.CRX_DYNAMIC_SCRIPT_${script.refId};`;
+          } else if (typeof script.fileName === "string") {
+            await fileReady(script);
+            return `export default ${JSON.stringify(script.fileName)};`;
+          } else {
+            throw new Error(`Content script fileName is undefined: "${script.id}"`);
+          }
         }
       }
+    },
+    {
+      name: "crx:dynamic-content-scripts-build",
+      apply: "build",
+      generateBundle(options, bundle) {
+        for (const chunk of Object.values(bundle))
+          if (chunk.type === "chunk") {
+            if (dynamicScriptRegEx().test(chunk.code)) {
+              const replaced = chunk.code.replace(dynamicScriptRegEx(), (match, p1, scriptKey) => {
+                const script = contentScripts.get(scriptKey);
+                if (typeof script === "undefined")
+                  throw new Error(`Content script refId is undefined: "${match}"`);
+                if (typeof script.fileName === "undefined")
+                  throw new Error(`Content script fileName is undefined: "${script.id}"`);
+                return `${JSON.stringify(`/${script.loaderName ?? script.fileName}`)};`;
+              });
+              chunk.code = replaced;
+            }
+          }
+      }
+    }
+  ];
+};
+
+const logger = createLogger("error", { prefix: "crxjs" });
+const pluginFileWriter = () => {
+  fileWriterError$.subscribe((error) => {
+    logger.error(error.err.message, { error: error.err });
+  });
+  return {
+    name: "crx:file-writer",
+    apply: "serve",
+    configureServer(server) {
+      server.httpServer?.on("listening", async () => {
+        try {
+          await start({ server });
+        } catch (error) {
+          console.error(error);
+          server.close();
+        }
+      });
+      server.httpServer?.on("close", () => close());
+    },
+    closeBundle() {
+      outputFiles.clear();
     }
   };
 };
 
 const _require = typeof require === "undefined" ? createRequire(import.meta.url) : require;
-const customElementsPath = _require.resolve(customElementsId);
+const customElementsPath = _require.resolve(customElementsId.slice(1));
 const customElementsCode = readFileSync(customElementsPath, "utf8");
 const customElementsMap = readFileSync(`${customElementsPath}.map`, "utf8");
 const pluginFileWriterPolyfill = () => {
   return {
     name: "crx:file-writer-polyfill",
-    apply: "build",
+    apply: "serve",
     enforce: "pre",
+    resolveId(source) {
+      if (source === customElementsId) {
+        return customElementsId;
+      }
+    },
     load(id) {
-      if (id === idByUrl.get(customElementsId)) {
+      if (id === customElementsId) {
         return { code: customElementsCode, map: customElementsMap };
       }
     },
-    transform(code, id) {
-      if (id === idByUrl.get(viteClientId)) {
+    renderCrxDevScript(code, { type, id }) {
+      if (type === "module" && id === viteClientId) {
         const magic = new MagicString(code);
         magic.prepend(`import '${customElementsId}';`);
         magic.prepend(`import { HMRPort } from '${contentHmrPortId}';`);
         const ws = "new WebSocket";
         const index = code.indexOf(ws);
         magic.overwrite(index, index + ws.length, "new HMRPort");
-        return { code: magic.toString(), map: magic.generateMap() };
+        return magic.toString();
       }
     }
   };
 };
 
-function isUpdatePayload(p) {
-  return p.type === "update";
-}
-function isFullReloadPayload(p) {
-  return p.type === "full-reload";
+async function manifestFiles(manifest, options = {}) {
+  let locales = [];
+  if (manifest.default_locale)
+    locales = await fg("_locales/**/messages.json", options);
+  const rulesets = manifest.declarative_net_request?.rule_resources.flatMap(({ path }) => path) ?? [];
+  const contentScripts = manifest.content_scripts?.flatMap(({ js }) => js) ?? [];
+  const contentStyles = manifest.content_scripts?.flatMap(({ css }) => css);
+  const serviceWorker = manifest.background?.service_worker;
+  const htmlPages = htmlFiles(manifest);
+  const icons = [
+    Object.values(isString(manifest.icons) ? [manifest.icons] : manifest.icons ?? {}),
+    Object.values(isString(manifest.action?.default_icon) ? [manifest.action?.default_icon] : manifest.action?.default_icon ?? {})
+  ].flat();
+  let webAccessibleResources = [];
+  if (manifest.web_accessible_resources) {
+    const resources = await Promise.all(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);
+      return r;
+    }));
+    webAccessibleResources = resources.flat().filter(isString);
+  }
+  return {
+    contentScripts: [...new Set(contentScripts)].filter(isString),
+    contentStyles: [...new Set(contentStyles)].filter(isString),
+    html: htmlPages,
+    icons: [...new Set(icons)].filter(isString),
+    locales: [...new Set(locales)].filter(isString),
+    rulesets: [...new Set(rulesets)].filter(isString),
+    background: [serviceWorker].filter(isString),
+    webAccessibleResources
+  };
 }
-function isPrunePayload(p) {
-  return p.type === "prune";
+async function dirFiles(dir) {
+  const files = await fg(`${dir}/**/*`);
+  return files;
 }
-function isCrxHMRPayload(x) {
-  return x.type === "custom" && x.event.startsWith("crx:");
+function htmlFiles(manifest) {
+  const files = [
+    manifest.action?.default_popup,
+    Object.values(manifest.chrome_url_overrides ?? {}),
+    manifest.devtools_page,
+    manifest.options_page,
+    manifest.options_ui?.page,
+    manifest.sandbox?.pages
+  ].flat().filter(isString).map((s) => s.split("#")[0]).sort();
+  return [...new Set(files)];
 }
+
+const pluginFileWriterPublic = () => {
+  let config;
+  return {
+    name: "crx:file-writer-public",
+    apply: "serve",
+    configResolved(_config) {
+      config = _config;
+    },
+    async generateBundle() {
+      const publicDir = isAbsolute(config.publicDir) ? config.publicDir : resolve(config.root, config.publicDir);
+      const files = await dirFiles(publicDir);
+      for (const filepath of files) {
+        const source = await readFile$1(filepath);
+        const fileName = relative(publicDir, filepath);
+        this.emitFile({ type: "asset", source, fileName });
+      }
+    }
+  };
+};
+
+_debug("file-writer").extend("hmr");
+const isCrxHMRPayload = (p) => p.type === "custom" && p.event.startsWith("crx:");
 const hmrPayload$ = new Subject();
-const hmrPrune$ = hmrPayload$.pipe(filter(isPrunePayload));
-const hmrFullReload$ = hmrPayload$.pipe(filter(isFullReloadPayload));
-const hmrUpdate$ = hmrPayload$.pipe(filter(isUpdatePayload));
-const payload$ = merge(hmrFullReload$, hmrPrune$, hmrUpdate$);
-const rebuildSignal$ = payload$.pipe(buffer(payload$.pipe(debounce(() => filesReady$))), map((payloads) => {
-  if (payloads.every(isUpdatePayload)) {
-    const owners = /* @__PURE__ */ new Set();
-    for (const { updates } of payloads)
-      for (const { path } of updates)
-        if (transformResultByOwner.has(path))
-          owners.add(path);
-    return { type: "partial", owners };
-  }
-  return { type: "full" };
-}), filter((rebuild) => rebuild.type === "partial" ? rebuild.owners.size > 0 : true));
-const crxHmrPayload$ = hmrPayload$.pipe(filter((p) => !isCrxHMRPayload(p)), buffer(filesReady$), mergeMap((pps) => {
+const crxHMRPayload$ = hmrPayload$.pipe(filter((p) => !isCrxHMRPayload(p)), buffer(allFilesReady$), mergeMap((pps) => {
   let fullReload;
   const payloads = [];
-  for (const p of pps.slice(-50))
+  for (const p of pps)
     if (p.type === "full-reload") {
       fullReload = p;
     } else {
@@ -2369,38 +2763,37 @@ const crxHmrPayload$ = hmrPayload$.pipe(filter((p) => !isCrxHMRPayload(p)), buff
 }), map((p) => {
   switch (p.type) {
     case "full-reload": {
-      const path = p.path && outputByOwner.get(p.path);
       const fullReload = {
         type: "full-reload",
-        path
+        path: p.path && getViteUrl({ id: p.path, type: "module" })
       };
       return fullReload;
     }
     case "prune": {
-      const paths = [];
-      for (const owner of p.paths)
-        if (outputByOwner.has(owner))
-          paths.push(outputByOwner.get(owner));
-      return { type: "prune", paths };
+      const prune = {
+        type: "prune",
+        paths: p.paths.map((id) => getViteUrl({ id, type: "module" }))
+      };
+      return prune;
     }
     case "update": {
-      const updates = [];
-      for (const { acceptedPath, path, ...rest } of p.updates)
-        if (outputByOwner.has(acceptedPath) && outputByOwner.has(path))
-          updates.push({
-            ...rest,
-            acceptedPath: outputByOwner.get(acceptedPath),
-            path: outputByOwner.get(path)
-          });
-      return { type: "update", updates };
+      const update = {
+        type: "update",
+        updates: p.updates.map(({ acceptedPath: ap, path: p2, ...rest }) => ({
+          ...rest,
+          acceptedPath: prefix$1("/", getFileName({ id: ap, type: "module" })),
+          path: prefix$1("/", getFileName({ id: p2, type: "module" }))
+        }))
+      };
+      return update;
     }
     default:
       return p;
   }
-}), withLatestFrom(filesReady$), filter(([p, { bundle }]) => {
+}), filter((p) => {
   switch (p.type) {
     case "full-reload":
-      return typeof p.path === "undefined" || p.path in bundle;
+      return typeof p.path === "undefined";
     case "prune":
       return p.paths.length > 0;
     case "update":
@@ -2408,127 +2801,13 @@ const crxHmrPayload$ = hmrPayload$.pipe(filter((p) => !isCrxHMRPayload(p)), buff
     default:
       return true;
   }
-}), map(([p]) => ({
-  type: "custom",
-  event: "crx:content-script-payload",
-  data: p
-})));
-
-function sortPlugins(plugins, command) {
-  const pre = [];
-  const mid = [];
-  const post = [];
-  for (const p of plugins) {
-    if (p.apply === command || !p.apply || !command) {
-      if (p.enforce === "pre")
-        pre.push(p);
-      else if (p.enforce === "post")
-        post.push(p);
-      else
-        mid.push(p);
-    }
-  }
-  return { pre, mid, post };
-}
-const pluginFileWriter = (crxPlugins) => (options) => {
-  const chunks = pluginFileWriterChunks();
-  const html = pluginFileWriterHtml();
-  const events = pluginFileWriterEvents();
-  const publicDir = pluginFileWriterPublic();
-  const polyfill = pluginFileWriterPolyfill();
-  const { pre, mid, post } = sortPlugins(crxPlugins, "build");
-  const plugins = [
-    ...pre,
-    ...mid,
-    polyfill,
-    chunks,
-    html,
-    publicDir,
-    ...post,
-    events
-  ].flat();
-  let watcher;
+}), map((data) => {
   return {
-    name: "crx:file-writer",
-    apply: "serve",
-    async config(_config, env) {
-      let config = _config;
-      for (const p of plugins) {
-        const r = await p.config?.(config, env);
-        config = r ?? config;
-      }
-      return config;
-    },
-    async configResolved(config) {
-      await Promise.all(plugins.map((p) => p.configResolved?.(config)));
-    },
-    configureServer(server) {
-      server.httpServer?.once("listening", async () => {
-        server$.next(server);
-        const optimizedDeps = server._optimizedDeps;
-        await optimizedDeps?.scanProcessing;
-        const { pre: pre2, mid: mid2, post: post2 } = sortPlugins([
-          ...server.config.plugins,
-          ...plugins
-        ]);
-        const allPlugins = [...pre2, ...mid2, ...post2];
-        await Promise.all(allPlugins.map(async (p) => {
-          try {
-            await p.fileWriterStart?.(server);
-          } catch (e) {
-            const hook = `[${p.name}].fileWriterStart`;
-            let error = new Error(`Error in plugin ${hook}`);
-            if (e instanceof Error) {
-              error = e;
-              error.message = `${hook} ${error.message}`;
-            } else if (typeof e === "string") {
-              error = new Error(`${hook} ${e}`);
-            }
-            writerEvent$.next({ type: "error", error });
-          }
-        }));
-        watcher = watch({
-          input: stubId,
-          context: "this",
-          output: {
-            dir: server.config.build.outDir,
-            format: "es"
-          },
-          plugins,
-          treeshake: false
-        });
-        watcher.on("event", (event) => {
-          if (event.code === "ERROR") {
-            const { message, parserError, stack, id, loc, code, frame } = event.error;
-            const error = parserError ?? new Error(message);
-            if (parserError && message.startsWith("Unexpected token")) {
-              const m = `Unexpected token in ${loc?.file ?? id}`;
-              error.message = [m, loc?.line, loc?.column].filter(isTruthy).join(":");
-            }
-            error.stack = (stack ?? error.stack)?.replace(/.+?\n/, `Error: ${error.message}
-`);
-            writerEvent$.next({ type: "error", error, code, frame });
-          }
-        });
-        const rebuildSub = rebuildSignal$.subscribe((rebuild) => {
-          if (rebuild.type === "partial") {
-            for (const owner of rebuild.owners)
-              transformResultByOwner.delete(owner);
-          } else {
-            transformResultByOwner.clear();
-          }
-          rebuildFiles();
-        });
-        watcher.on("close", () => {
-          rebuildSub.unsubscribe();
-        });
-      });
-    },
-    closeBundle() {
-      watcher?.close();
-    }
+    type: "custom",
+    event: "crx:content-script-payload",
+    data
   };
-};
+}));
 
 function isImporter(file) {
   const seen = /* @__PURE__ */ new Set();
@@ -2546,68 +2825,108 @@ function isImporter(file) {
   return pred;
 }
 
-const debug$2 = _debug("hmr");
+const debug$1 = _debug("hmr");
 const crxRuntimeReload = {
   type: "custom",
   event: "crx:runtime-reload"
 };
 const pluginHMR = () => {
-  let files;
+  let inputManifestFiles;
   let decoratedSend;
+  let config;
+  let subs;
   return [
-    {
-      name: "crx:hmr",
-      apply: "build",
-      enforce: "post",
-      async renderCrxManifest(manifest) {
-        if (this.meta.watchMode) {
-          files = await manifestFiles(manifest);
-        }
-        return null;
-      }
-    },
     {
       name: "crx:hmr",
       apply: "serve",
       enforce: "pre",
-      config({ server = {}, ...config }) {
+      async config({ server = {}, ...config2 }) {
         if (server.hmr === false)
           return;
         if (server.hmr === true)
           server.hmr = {};
         server.hmr = server.hmr ?? {};
         server.hmr.host = "localhost";
-        return { server, ...config };
+        server.hmr.port = server.hmr.port ?? await getPort({ port: portNumbers(5200, 5300) });
+        return { server, ...config2 };
       },
-      configResolved(config) {
+      configResolved(_config) {
+        config = _config;
         const { watch = {} } = config.server;
         config.server.watch = watch;
         watch.ignored = watch.ignored ? [...new Set([watch.ignored].flat())] : [];
         const outDir = isAbsolute(config.build.outDir) ? config.build.outDir : join(config.root, config.build.outDir, "**/*");
-        watch.ignored.push(outDir);
+        if (!watch.ignored.includes(outDir))
+          watch.ignored.push(outDir);
       },
       configureServer(server) {
         if (server.ws.send !== decoratedSend) {
           const { send } = server.ws;
           decoratedSend = (payload) => {
-            hmrPayload$.next(payload);
+            if (payload.type === "error") {
+              send({
+                type: "custom",
+                event: "crx:content-script-payload",
+                data: payload
+              });
+            } else {
+              hmrPayload$.next(payload);
+            }
             send(payload);
           };
           server.ws.send = decoratedSend;
-          crxHmrPayload$.subscribe((payload) => {
+          subs = new Subscription(() => subs = new Subscription());
+          subs.add(fileWriterError$.subscribe(send));
+          subs.add(crxHMRPayload$.subscribe((payload) => {
             send(payload);
-          });
+          }));
         }
       },
-      handleHotUpdate({ file, modules, server }) {
-        const background = files.background[0] && join(server.config.root, files.background[0]);
-        if (background) {
-          if (file === background || modules.some(isImporter(background))) {
-            debug$2("sending runtime reload");
+      closeBundle() {
+        subs.unsubscribe();
+      },
+      handleHotUpdate({ modules, server }) {
+        const { root } = server.config;
+        const relFiles = /* @__PURE__ */ new Set();
+        for (const m of modules)
+          if (m.id?.startsWith(root)) {
+            relFiles.add(m.id.slice(server.config.root.length));
+          }
+        if (inputManifestFiles.background.length) {
+          const background = prefix$1("/", inputManifestFiles.background[0]);
+          if (relFiles.has(background) || modules.some(isImporter(join(server.config.root, background)))) {
+            debug$1("sending runtime reload");
             server.ws.send(crxRuntimeReload);
             return [];
           }
         }
+        for (const [key, script] of contentScripts)
+          if (key === script.id) {
+            if (relFiles.has(script.id) || modules.some(isImporter(join(server.config.root, script.id)))) {
+              relFiles.forEach((relFile) => update(relFile));
+            }
+          }
+      }
+    },
+    {
+      name: "crx:hmr",
+      apply: "serve",
+      enforce: "post",
+      async transformCrxManifest(manifest) {
+        inputManifestFiles = await manifestFiles(manifest, { cwd: config.root });
+        return null;
+      },
+      renderCrxDevScript(code, { id: _id, type }) {
+        if (type === "module" && _id !== "/@vite/client" && code.includes("createHotContext")) {
+          const id = _id.replace(/t=\d+&/, "");
+          const escaped = id.replace(/([?&.])/g, "\\$1");
+          const regexp = new RegExp(`(?<=createHotContext\\(")${escaped}(?="\\))`);
+          const fileUrl = prefix$1("/", getFileName({ id, type }));
+          const replaced = code.replace(regexp, fileUrl);
+          return replaced;
+        } else {
+          return code;
+        }
       }
     }
   ];
@@ -2616,14 +2935,14 @@ const pluginHMR = () => {
 var loader = "try {\n  for (const p of JSON.parse(SCRIPTS)) {\n    const url = new URL(p, \"https://stub\");\n    url.searchParams.set(\"t\", Date.now().toString());\n    const req = url.pathname + url.search;\n    await import(\n      /* @vite-ignore */\n      req\n    );\n  }\n} catch (error) {\n  console.error(error);\n}\n";
 
 const pluginName = "crx:html-inline-scripts";
-const debug$1 = _debug(pluginName);
+const debug = _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);
   return join(prefix, dir, name);
 };
-const pluginHtmlAuditor = () => {
+const pluginHtmlInlineScripts = () => {
   const pages = /* @__PURE__ */ new Map();
   const auditTransformIndexHtml = (p) => {
     let transform;
@@ -2737,15 +3056,19 @@ const pluginHtmlAuditor = () => {
           })}"`;
           return [inline, loader.replace("SCRIPTS", json)].join("\n");
         } else {
-          debug$1("page missing %s", id);
+          debug("page missing %s", id);
         }
       }
     }
   };
 };
 
+var precontrollerJs = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\n";
+
+var precontrollerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%SCRIPT%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
+
 const { readFile } = promises;
-const pluginManifest = (_manifest) => () => {
+const pluginManifest = () => {
   let manifest;
   let plugins;
   let refId;
@@ -2755,6 +3078,7 @@ const pluginManifest = (_manifest) => () => {
       name: "crx:manifest-init",
       enforce: "pre",
       async config(config2, env) {
+        const { manifest: _manifest } = await getOptions(config2);
         manifest = await (typeof _manifest === "function" ? _manifest(env) : _manifest);
         if (manifest.manifest_version !== 3)
           throw new Error(`CRXJS does not support Manifest v${manifest.manifest_version}, please use Manifest v3`);
@@ -2763,7 +3087,7 @@ const pluginManifest = (_manifest) => () => {
             contentScripts: js,
             background: sw,
             html
-          } = await manifestFiles(manifest);
+          } = await manifestFiles(manifest, { cwd: config2.root });
           const { entries = [] } = config2.optimizeDeps ?? {};
           let { input = [] } = config2.build?.rollupOptions ?? {};
           if (typeof input === "string")
@@ -2796,15 +3120,16 @@ const pluginManifest = (_manifest) => () => {
     },
     {
       name: "crx:manifest-loader",
-      apply: "build",
       enforce: "pre",
-      buildStart() {
-        refId = this.emitFile({
-          type: "chunk",
-          id: manifestId,
-          name: "crx-manifest.js",
-          preserveSignature: "strict"
-        });
+      buildStart(options) {
+        if (typeof options.input !== "undefined") {
+          refId = this.emitFile({
+            type: "chunk",
+            id: manifestId,
+            name: "crx-manifest.js",
+            preserveSignature: "strict"
+          });
+        }
       },
       resolveId(source) {
         if (source === manifestId)
@@ -2819,13 +3144,22 @@ const pluginManifest = (_manifest) => () => {
     },
     {
       name: "crx:stub-input",
-      apply: "build",
       enforce: "pre",
       options({ input, ...options }) {
-        return {
-          input: isString(input) && input.endsWith("index.html") ? stubId : input,
-          ...options
-        };
+        let finalInput = input;
+        if (isString(input) && input.endsWith("index.html")) {
+          finalInput = stubId;
+        }
+        if (config.command === "serve") {
+          if (Array.isArray(input)) {
+            finalInput = input.filter((x) => !x.endsWith(".html"));
+          } else if (typeof input === "object") {
+            for (const [key, value] of Object.entries(input))
+              if (value.endsWith(".html"))
+                delete input[key];
+          }
+        }
+        return { input: finalInput, ...options };
       },
       resolveId(source) {
         if (source === stubId)
@@ -2848,7 +3182,6 @@ const pluginManifest = (_manifest) => () => {
     },
     {
       name: "crx:manifest-post",
-      apply: "build",
       enforce: "post",
       configResolved(_config) {
         config = _config;
@@ -2870,32 +3203,52 @@ const pluginManifest = (_manifest) => () => {
             if (error instanceof Error)
               error.message = `[${plugin.name}] ${error.message}`;
             throw error;
-          }
-        }
-        if (manifest2.content_scripts?.length) {
-          manifest2.content_scripts = manifest2.content_scripts.map(({ js = [], ...rest }) => {
-            const refJS = js.map((file) => this.emitFile({
-              type: "chunk",
-              id: file,
-              name: basename(file)
-            }));
-            return { js: refJS, ...rest };
-          });
+          }
         }
-        if (!this.meta.watchMode) {
+        if (config.command === "serve") {
+          if (manifest2.content_scripts)
+            for (const { js = [], matches = [] } of manifest2.content_scripts)
+              for (const id2 of js) {
+                contentScripts.set(prefix$1("/", id2), formatFileData({
+                  type: "loader",
+                  id: id2,
+                  matches,
+                  refId: hashScriptId({ type: "loader", id: id2 }),
+                  fileName: getFileName({ type: "loader", id: id2 })
+                }));
+              }
+        } else {
+          if (manifest2.content_scripts)
+            for (const { js = [], matches = [] } of manifest2.content_scripts)
+              for (const file of js) {
+                const id2 = join(config.root, file);
+                const refId2 = this.emitFile({
+                  type: "chunk",
+                  id: id2,
+                  name: basename(file)
+                });
+                contentScripts.set(file, formatFileData({
+                  type: "loader",
+                  id: file,
+                  refId: refId2,
+                  matches
+                }));
+              }
           if (manifest2.background?.service_worker) {
             const file = manifest2.background.service_worker;
+            const id2 = join(config.root, file);
             const refId2 = this.emitFile({
               type: "chunk",
-              id: file,
+              id: id2,
               name: basename(file)
             });
             manifest2.background.service_worker = refId2;
           }
           for (const file of htmlFiles(manifest2)) {
+            const id2 = join(config.root, file);
             this.emitFile({
               type: "chunk",
-              id: file,
+              id: id2,
               name: basename(file)
             });
           }
@@ -2907,15 +3260,30 @@ const pluginManifest = (_manifest) => () => {
         const manifestName = this.getFileName(refId);
         const manifestJs = bundle[manifestName];
         let manifest2 = decodeManifest.call(this, manifestJs.code);
-        if (manifest2.background?.service_worker && !this.meta.watchMode) {
-          const ref = manifest2.background.service_worker;
-          const name = this.getFileName(ref);
-          manifest2.background.service_worker = name;
-        }
-        manifest2.content_scripts = manifest2.content_scripts?.map(({ js = [], ...rest }) => {
-          const refJS = js.map((ref) => this.getFileName(ref));
-          return { js: refJS, ...rest };
-        });
+        if (config.command === "serve") {
+          if (manifest2.content_scripts)
+            for (const script of manifest2.content_scripts) {
+              script.js = script.js?.map((id) => getFileName({ id, type: "loader" }));
+            }
+        } else {
+          if (manifest2.background?.service_worker) {
+            const ref = manifest2.background.service_worker;
+            const name = this.getFileName(ref);
+            manifest2.background.service_worker = name;
+          }
+          manifest2.content_scripts = manifest2.content_scripts?.map(({ js = [], ...rest }) => {
+            return {
+              js: js.map((id) => {
+                const script = contentScripts.get(id);
+                const fileName = script?.loaderName ?? script?.fileName;
+                if (typeof fileName === "undefined")
+                  throw new Error(`Content script fileName is undefined: "${id}"`);
+                return fileName;
+              }),
+              ...rest
+            };
+          });
+        }
         for (const plugin of plugins) {
           try {
             const m = structuredClone(manifest2);
@@ -2939,7 +3307,7 @@ const pluginManifest = (_manifest) => () => {
           "rulesets",
           "webAccessibleResources"
         ];
-        const files = await manifestFiles(manifest2);
+        const files = await manifestFiles(manifest2, { cwd: config.root });
         await Promise.all(assetTypes.map((k) => files[k]).flat().map(async (f) => {
           if (typeof bundle[f] === "undefined") {
             let filename = join(config.root, f);
@@ -2957,6 +3325,19 @@ Public dir: "${config.publicDir}"`);
             });
           }
         }));
+        if (config.command === "serve" && files.html.length) {
+          const refId2 = this.emitFile({
+            type: "asset",
+            name: "precontroller.js",
+            source: precontrollerJs
+          });
+          const precontrollerJsName = this.getFileName(refId2);
+          files.html.map((f) => this.emitFile({
+            type: "asset",
+            fileName: f,
+            source: precontrollerHtml.replace("%SCRIPT%", `/${precontrollerJsName}`)
+          }));
+        }
         const manifestJson = bundle["manifest.json"];
         if (typeof manifestJson === "undefined") {
           this.emitFile({
@@ -2973,570 +3354,212 @@ Public dir: "${config.publicDir}"`);
   ];
 };
 
-var contentHmrPort = "function isCrxHMRPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nclass HMRPort {\n  port;\n  callbacks = /* @__PURE__ */ new Map();\n  constructor() {\n    setInterval(() => {\n      try {\n        this.port?.postMessage({ data: \"ping\" });\n      } catch (error) {\n        if (error instanceof Error && error.message.includes(\"Extension context invalidated.\")) {\n          location.reload();\n        } else\n          throw error;\n      }\n    }, __CRX_HMR_TIMEOUT__);\n    setInterval(this.initPort, 5 * 60 * 1e3);\n    this.initPort();\n  }\n  initPort = () => {\n    this.port?.disconnect();\n    this.port = chrome.runtime.connect({ name: \"@crx/client\" });\n    this.port.onDisconnect.addListener(this.handleDisconnect.bind(this));\n    this.port.onMessage.addListener(this.handleMessage.bind(this));\n    this.port.postMessage({ type: \"connected\" });\n  };\n  handleDisconnect = () => {\n    if (this.callbacks.has(\"close\"))\n      for (const cb of this.callbacks.get(\"close\")) {\n        cb({ wasClean: true });\n      }\n  };\n  handleMessage = (message) => {\n    const forward = (data) => {\n      if (this.callbacks.has(\"message\"))\n        for (const cb of this.callbacks.get(\"message\")) {\n          cb({ data });\n        }\n    };\n    const payload = JSON.parse(message.data);\n    if (isCrxHMRPayload(payload)) {\n      if (payload.event === \"crx:runtime-reload\") {\n        console.log(\"[crx] runtime reload\");\n        setTimeout(() => location.reload(), 500);\n      } else {\n        forward(JSON.stringify(payload.data));\n      }\n    } else {\n      forward(message.data);\n    }\n  };\n  addEventListener = (event, callback) => {\n    const cbs = this.callbacks.get(event) ?? /* @__PURE__ */ new Set();\n    cbs.add(callback);\n    this.callbacks.set(event, cbs);\n  };\n  send = (data) => {\n    if (this.port)\n      this.port.postMessage({ data });\n    else\n      throw new Error(\"HMRPort is not initialized\");\n  };\n}\n\nexport { HMRPort };\n";
-
-var contentDevLoader = "(function () {\n  'use strict';\n\n  (async () => {\n    if (__PREAMBLE__)\n      await import(\n        /* @vite-ignore */\n        chrome.runtime.getURL(__PREAMBLE__)\n      );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__CLIENT__)\n    );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\n";
-
-var contentProLoader = "(function () {\n  'use strict';\n\n  (async () => {\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\n";
-
-function getScriptId({
-  format,
-  id
+function compileFileResources(fileName, {
+  chunks,
+  files,
+  config
+}, resources = {
+  assets: /* @__PURE__ */ new Set(),
+  css: /* @__PURE__ */ new Set(),
+  imports: /* @__PURE__ */ new Set()
 }) {
-  return createHash$1("sha1").update(format).update(id).digest("base64").replace(/[^A-Za-z0-9]/g, "").slice(0, 8);
-}
-const debug = _debug("content-scripts");
-const dynamicResourcesName = "<dynamic_resource>";
-const pluginResources = ({ contentScripts = {} }) => {
-  const { hmrTimeout = 5e3, injectCss = true } = contentScripts;
-  const dynamicScriptsById = /* @__PURE__ */ new Map();
-  const dynamicScriptsByLoaderRefId = /* @__PURE__ */ new Map();
-  const dynamicScriptsByRefId = /* @__PURE__ */ new Map();
-  const dynamicScriptsByScriptId = /* @__PURE__ */ new Map();
-  function emitDynamicScript(data) {
-    if (data.format === "iife") {
-      throw new Error(`Dynamic script format IIFE is unimplemented (imported in file: ${data.importer})`.trim());
-    } else {
-      data.refId = this.emitFile({ type: "chunk", id: data.id });
-      dynamicScriptsByRefId.set(data.refId, data);
-    }
-    if (data.format === "loader") {
-      data.loaderRefId = this.emitFile({
-        type: "asset",
-        name: `content-script-loader.${parse(data.id).name}.js`,
-        source: JSON.stringify(data)
-      });
-      dynamicScriptsByLoaderRefId.set(data.loaderRefId, data);
-    }
-  }
-  async function resolveDynamicScript(_source, importer) {
-    if (importer && _source.includes("?script")) {
-      const url = new URL(_source, "stub://stub");
-      if (url.searchParams.has("scriptId")) {
-        const scriptId = url.searchParams.get("scriptId");
-        const { finalId } = dynamicScriptsByScriptId.get(scriptId);
-        return finalId;
-      } else if (url.searchParams.has("script")) {
-        const [source] = _source.split("?");
-        const resolved = await this.resolve(source, importer, {
-          skipSelf: true
-        });
-        if (!resolved)
-          throw new Error(`Could not resolve dynamic script: "${_source}" from "${importer}"`);
-        const { id } = resolved;
-        let format = "loader";
-        if (url.searchParams.has("module")) {
-          format = "module";
-        } else if (url.searchParams.has("iife")) {
-          format = "iife";
-        }
-        const scriptId = getScriptId({ format, id });
-        const finalId = `${id}?scriptId=${scriptId}`;
-        const data = dynamicScriptsByScriptId.get(scriptId) ?? {
-          format,
-          id,
-          importer,
-          scriptId,
-          finalId
-        };
-        dynamicScriptsByScriptId.set(scriptId, data);
-        dynamicScriptsById.set(finalId, data);
-        return finalId;
+  const chunk = chunks.get(fileName);
+  if (chunk) {
+    const { modules, facadeModuleId, imports, dynamicImports } = chunk;
+    for (const x of imports)
+      resources.imports.add(x);
+    for (const x of dynamicImports)
+      resources.imports.add(x);
+    for (const x of [...imports, ...dynamicImports])
+      compileFileResources(x, { chunks, files, config }, resources);
+    for (const m of Object.keys(modules))
+      if (m !== facadeModuleId) {
+        const key = prefix$1("/", relative(config.root, m.split("?")[0]));
+        const script = contentScripts.get(key);
+        if (script)
+          if (typeof script.fileName === "undefined") {
+            throw new Error(`Content script fileName for ${m} is undefined`);
+          } else {
+            resources.imports.add(script.fileName);
+            compileFileResources(script.fileName, { chunks, files, config }, resources);
+          }
       }
-    }
   }
-  function loadDynamicScript(id) {
-    const data = dynamicScriptsById.get(id);
-    if (data)
-      return `export default import.meta.CRX_DYNAMIC_SCRIPT_${data.scriptId};`;
+  const file = files.get(fileName);
+  if (file) {
+    const { assets = [], css = [] } = file;
+    for (const x of assets)
+      resources.assets.add(x);
+    for (const x of css)
+      resources.css.add(x);
   }
-  let port;
-  let server;
-  let { preambleCode } = contentScripts;
-  let preambleRefId;
-  let contentClientRefId;
+  return resources;
+}
+
+const defineManifest = (manifest) => manifest;
+const defineDynamicResource = ({
+  matches = ["http://*/*", "https://*/*"],
+  use_dynamic_url = true
+}) => ({
+  matches,
+  resources: [DYNAMIC_RESOURCE],
+  use_dynamic_url
+});
+const DYNAMIC_RESOURCE = "<dynamic_resource>";
+
+_debug("web-acc-res");
+const pluginWebAccessibleResources = () => {
+  let config;
+  let injectCss;
   return [
     {
-      name: "crx:content-scripts-pre",
-      apply: "build",
-      enforce: "pre",
-      async fileWriterStart(_server) {
-        server = _server;
-        port = server.config.server.port.toString();
-        if (process.env.NODE_ENV !== "test" && typeof preambleCode === "undefined" && server.config.plugins.some(({ name }) => name.toLowerCase().includes("react"))) {
-          try {
-            const react = await import('@vitejs/plugin-react');
-            preambleCode = react.default.preambleCode;
-          } catch (error) {
-            preambleCode = false;
-          }
-        }
-      },
-      buildStart() {
-        if (this.meta.watchMode) {
-          if (preambleCode) {
-            preambleRefId = this.emitFile({
-              type: "chunk",
-              id: preambleId,
-              name: "content-script-preamble.js"
-            });
-          }
-          contentClientRefId = this.emitFile({
-            type: "chunk",
-            id: "/@vite/client",
-            name: "content-script-client.js"
-          });
-        }
-      },
-      resolveId(source) {
-        if (source === preambleId)
-          return preambleId;
-        if (source === contentHmrPortId)
-          return contentHmrPortId;
-      },
-      load(id) {
-        if (server && id === preambleId && typeof preambleCode === "string") {
-          const defined = preambleCode.replace(/__BASE__/g, server.config.base);
-          return defined;
-        }
-        if (id === contentHmrPortId) {
-          const defined = contentHmrPort.replace("__CRX_HMR_TIMEOUT__", JSON.stringify(hmrTimeout));
-          return defined;
-        }
-      }
-    },
-    {
-      name: "crx:dynamic-scripts-load",
+      name: "crx:web-accessible-resources",
       apply: "serve",
-      enforce: "pre",
-      resolveId: resolveDynamicScript,
-      load: loadDynamicScript
-    },
-    {
-      name: "crx:dynamic-scripts-load",
-      apply: "build",
-      enforce: "pre",
-      resolveId(id, importer) {
-        if (!this.meta.watchMode)
-          return resolveDynamicScript.call(this, id, importer);
-      },
-      load(id) {
-        if (!this.meta.watchMode)
-          return loadDynamicScript.call(this, id);
+      enforce: "post",
+      renderCrxManifest(manifest) {
+        manifest.web_accessible_resources = manifest.web_accessible_resources ?? [];
+        manifest.web_accessible_resources = manifest.web_accessible_resources.map(({ resources, ...rest }) => ({
+          resources: resources.filter((r) => r !== DYNAMIC_RESOURCE),
+          ...rest
+        })).filter(({ resources }) => resources.length);
+        manifest.web_accessible_resources.push({
+          use_dynamic_url: true,
+          matches: ["<all_urls>"],
+          resources: ["**/*", "*"]
+        });
+        return manifest;
       }
     },
     {
-      name: "crx:dynamic-scripts-build",
+      name: "crx:web-accessible-resources",
       apply: "build",
-      buildStart() {
-        dynamicScriptsByLoaderRefId.clear();
-        dynamicScriptsByRefId.clear();
-        for (const [, data] of dynamicScriptsByScriptId) {
-          emitDynamicScript.call(this, data);
-        }
-      },
-      async transform(code) {
-        if (code.includes("import.meta.CRX_DYNAMIC_SCRIPT_")) {
-          const match = code.match(/import.meta.CRX_DYNAMIC_SCRIPT_(.+?);/);
-          const index = match.index;
-          const [statement, scriptId] = match;
-          const data = dynamicScriptsByScriptId.get(scriptId);
-          if (!data.refId)
-            emitDynamicScript.call(this, data);
-          const magic = new MagicString(code);
-          magic.overwrite(index, index + statement.length, `import.meta.ROLLUP_FILE_URL_${data.loaderRefId ?? data.refId};`);
-          return { code: magic.toString(), map: magic.generateMap() };
-        }
-      },
-      resolveFileUrl({ referenceId, fileName, moduleId }) {
-        if (moduleId && referenceId) {
-          if (dynamicScriptsByRefId.has(referenceId) || dynamicScriptsByLoaderRefId.has(referenceId)) {
-            return `"/${fileName}"`;
-          }
-        }
+      enforce: "post",
+      async config({ build, ...config2 }, { command }) {
+        const { contentScripts: contentScripts2 = {} } = await getOptions(config2);
+        injectCss = contentScripts2.injectCss ?? true;
+        return { ...config2, build: { ...build, manifest: command === "build" } };
       },
-      generateBundle(options, bundle) {
-        const preambleName = this.meta.watchMode && preambleRefId ? this.getFileName(preambleRefId) : "";
-        const contentClientName = this.meta.watchMode && contentClientRefId ? this.getFileName(contentClientRefId) : "";
-        for (const data of dynamicScriptsByScriptId.values()) {
-          if (data.refId && data.loaderRefId) {
-            const scriptName = this.getFileName(data.refId);
-            const loaderName = this.getFileName(data.loaderRefId);
-            const source = this.meta.watchMode ? contentDevLoader.replace(/__PREAMBLE__/g, JSON.stringify(preambleName)).replace(/__CLIENT__/g, JSON.stringify(contentClientName)).replace(/__SCRIPT__/g, JSON.stringify(scriptName)) : contentProLoader.replace(/__SCRIPT__/g, JSON.stringify(scriptName));
-            const asset = bundle[loaderName];
-            if (asset?.type === "asset")
-              asset.source = source;
-          }
-        }
+      configResolved(_config) {
+        config = _config;
       },
-      writeBundle() {
-        for (const [, data] of dynamicScriptsByScriptId) {
-          if (data.refId) {
-            data.fileName = this.getFileName(data.refId);
-            delete data.refId;
-          }
-          if (data.loaderRefId) {
-            data.loaderName = this.getFileName(data.loaderRefId);
-            delete data.loaderRefId;
-          }
-        }
-      }
-    },
-    {
-      name: "crx:dynamic-scripts-serve",
-      apply: "serve",
-      configureServer(server2) {
-        server2.middlewares.use(injector((req) => {
-          return !!req.url?.includes("?scriptId");
-        }, async (content, req, res, callback) => {
-          const code = isString(content) ? content : content.toString();
-          if (code.includes("import.meta.CRX_DYNAMIC_SCRIPT_")) {
-            const matches = Array.from(code.matchAll(/import.meta.CRX_DYNAMIC_SCRIPT_(.+?);/g)).map((m) => ({
-              statement: m[0],
-              index: m.index,
-              data: dynamicScriptsByScriptId.get(m[1])
-            }));
-            if (matches.some(({ data }) => data.refId))
-              await filesReady();
-            if (matches.some(({ data }) => !(data.loaderName ?? data.fileName))) {
-              await rebuildFiles();
-              server2.ws.send(crxRuntimeReload);
-            }
-            const magic = new MagicString(code);
-            for (const { index, statement, data } of matches)
-              if (typeof index === "number") {
-                magic.overwrite(index, index + statement.length, `"/${data.loaderName ?? data.fileName}"`);
-              }
-            callback(null, magic.toString());
-          } else {
-            callback(null, code);
+      async renderCrxManifest(manifest, bundle) {
+        const { web_accessible_resources: _war = [] } = manifest;
+        const dynamicScriptMatches = /* @__PURE__ */ new Set();
+        let dynamicScriptDynamicUrl = false;
+        const web_accessible_resources = [];
+        for (const r of _war) {
+          const i = r.resources.indexOf(DYNAMIC_RESOURCE);
+          if (i > -1 && isResourceByMatch(r)) {
+            r.resources = [...r.resources];
+            r.resources.splice(i, 1);
+            for (const p of r.matches)
+              dynamicScriptMatches.add(p);
+            dynamicScriptDynamicUrl = r.use_dynamic_url ?? false;
           }
-        }));
-      }
-    },
-    {
-      name: "crx:content-script-resources",
-      apply: "build",
-      enforce: "post",
-      config({ build, ...config }, { command }) {
-        return { ...config, build: { ...build, manifest: command === "build" } };
-      },
-      renderCrxManifest(manifest, bundle) {
-        manifest.web_accessible_resources = manifest.web_accessible_resources ?? [];
-        if (manifest.content_scripts?.length || dynamicScriptsByRefId.size)
-          if (this.meta.watchMode) {
-            manifest.web_accessible_resources = manifest.web_accessible_resources.map(({ resources, ...rest }) => ({
-              resources: resources.filter((r) => r !== dynamicResourcesName),
-              ...rest
-            })).filter(({ resources }) => resources.length);
-            manifest.web_accessible_resources.push({
-              use_dynamic_url: true,
-              matches: ["<all_urls>"],
-              resources: ["**/*", "*"]
-            });
-          } else {
-            const vmAsset = bundle["manifest.json"];
-            if (!vmAsset)
-              throw new Error("vite manifest is missing");
-            const viteManifest = JSON.parse(vmAsset.source);
-            debug("vite manifest %O", viteManifest);
-            if (Object.keys(viteManifest).length === 0)
-              return;
-            const filesByName = /* @__PURE__ */ new Map();
-            for (const file of Object.values(viteManifest))
-              filesByName.set(file.file, file);
-            const chunksById = /* @__PURE__ */ new Map();
-            for (const [name, chunk] of Object.entries(bundle))
-              if (chunk.type === "chunk" && chunk.facadeModuleId)
-                chunksById.set(chunk.facadeModuleId, name);
-            const getChunkResources = (chunk) => {
-              const chunks = /* @__PURE__ */ new Set();
-              const assets = /* @__PURE__ */ new Set();
-              if (chunk.type === "asset")
-                return { chunks, assets };
-              const { dynamicImports, imports, modules } = chunk;
-              for (const i of dynamicImports)
-                chunks.add(i);
-              for (const i of imports)
-                chunks.add(i);
-              for (const id of Object.keys(modules))
-                if (dynamicScriptsById.has(id)) {
-                  const data = dynamicScriptsById.get(id);
-                  const fileName = this.getFileName(data.refId);
-                  const chunk2 = bundle[fileName];
-                  if (chunk2.type === "chunk")
-                    chunks.add(fileName);
-                  else
-                    assets.add(fileName);
-                }
-              return { chunks, assets };
-            };
-            const getResources = (name, sets = {
-              assets: /* @__PURE__ */ new Set(),
-              css: /* @__PURE__ */ new Set(),
-              imports: /* @__PURE__ */ new Set()
-            }) => {
-              const {
-                assets = [],
-                css = [],
-                dynamicImports = [],
-                imports = [],
-                file
-              } = filesByName.get(name) ?? viteManifest[name] ?? {};
-              const chunk = bundle[file];
-              if (chunk?.type === "chunk") {
-                const r = getChunkResources(chunk);
-                assets.push(...r.assets);
-                for (const chunk2 of r.chunks) {
-                  sets.imports.add(chunk2);
-                  getResources(chunk2, sets);
-                }
-              }
-              for (const a of assets)
-                sets.assets.add(a);
-              for (const c of css)
-                sets.css.add(c);
-              for (const key of [...dynamicImports, ...imports]) {
-                const i = viteManifest[key].file;
-                sets.imports.add(i);
-                getResources(key, sets);
-              }
-              return sets;
-            };
-            for (const script of manifest.content_scripts ?? [])
-              if (script.js?.length) {
-                for (const name of script.js)
-                  if (script.matches?.length) {
-                    const { assets, css, imports } = getResources(name);
-                    imports.add(name);
-                    const resource = {
-                      matches: script.matches,
-                      resources: [...assets, ...imports],
-                      use_dynamic_url: true
-                    };
-                    if (css.size)
-                      if (injectCss) {
-                        script.css = script.css ?? [];
-                        script.css.push(...css);
-                      } else {
-                        resource.resources.push(...css);
-                      }
-                    if (resource.resources.length) {
-                      resource.matches = resource.matches.map(stubMatchPattern);
-                      manifest.web_accessible_resources.push(resource);
-                    }
+          if (r.resources.length > 0)
+            web_accessible_resources.push(r);
+        }
+        if (dynamicScriptMatches.size === 0) {
+          dynamicScriptMatches.add("http://*/*");
+          dynamicScriptMatches.add("https://*/*");
+        }
+        if (contentScripts.size > 0) {
+          const viteManifest = parseJsonAsset(bundle, "manifest.json");
+          const viteFiles = /* @__PURE__ */ new Map();
+          for (const [, file] of Object.entries(viteManifest))
+            viteFiles.set(file.file, file);
+          if (viteFiles.size === 0)
+            return null;
+          const bundleChunks = /* @__PURE__ */ new Map();
+          for (const chunk of Object.values(bundle))
+            if (chunk.type === "chunk")
+              bundleChunks.set(chunk.fileName, chunk);
+          const moduleScriptResources = /* @__PURE__ */ new Map();
+          for (const [
+            key,
+            { id, fileName, matches, type, isDynamicScript = false }
+          ] of contentScripts)
+            if (key === id) {
+              if (isDynamicScript || matches.length)
+                if (typeof fileName === "undefined") {
+                  throw new Error(`Content script filename is undefined for "${id}"`);
+                } else {
+                  const { assets, css, imports } = compileFileResources(fileName, { chunks: bundleChunks, files: viteFiles, config });
+                  contentScripts.get(key).css = [...css];
+                  if (type === "loader")
+                    imports.add(fileName);
+                  const resource = {
+                    matches: isDynamicScript ? [...dynamicScriptMatches] : matches,
+                    resources: [...assets, ...imports],
+                    use_dynamic_url: isDynamicScript ? dynamicScriptDynamicUrl : true
+                  };
+                  if (isDynamicScript || !injectCss) {
+                    resource.resources.push(...css);
                   }
-              }
-            const dynamicResourceSet = /* @__PURE__ */ new Set();
-            for (const [refId, { format }] of dynamicScriptsByRefId)
-              if (format === "loader") {
-                const name = this.getFileName(refId);
-                const { assets, css, imports } = getResources(name);
-                dynamicResourceSet.add(name);
-                for (const a of assets)
-                  dynamicResourceSet.add(a);
-                for (const c of css)
-                  dynamicResourceSet.add(c);
-                for (const i of imports)
-                  dynamicResourceSet.add(i);
-              }
-            if (dynamicResourceSet.size) {
-              let resource = manifest.web_accessible_resources.find(({ resources: [r] }) => r === dynamicResourcesName);
-              if (!resource) {
-                resource = {
-                  resources: [dynamicResourcesName],
-                  matches: ["http://*/*", "https://*/*"]
-                };
-                manifest.web_accessible_resources.push(resource);
-              }
-              resource.resources = [...dynamicResourceSet];
+                  if (resource.resources.length)
+                    if (type === "module") {
+                      moduleScriptResources.set(fileName, resource);
+                    } else {
+                      resource.matches = resource.matches.map(getMatchPatternOrigin);
+                      web_accessible_resources.push(resource);
+                    }
+                }
             }
+          for (const r of web_accessible_resources)
+            if (isResourceByMatch(r))
+              for (const res of r.resources)
+                moduleScriptResources.delete(res);
+          web_accessible_resources.push(...moduleScriptResources.values());
+        }
+        const hashedResources = /* @__PURE__ */ new Map();
+        const combinedResources = [];
+        for (const r of web_accessible_resources)
+          if (isResourceByMatch(r)) {
+            const { matches, resources, use_dynamic_url = false } = r;
+            const key = JSON.stringify([use_dynamic_url, matches.sort()]);
+            const combined = hashedResources.get(key) ?? /* @__PURE__ */ new Set();
+            for (const res of resources)
+              combined.add(res);
+            hashedResources.set(key, combined);
+          } else {
+            combinedResources.push(r);
           }
-        if (manifest.web_accessible_resources?.length) {
-          const war = manifest.web_accessible_resources;
-          manifest.web_accessible_resources = [];
-          const map = /* @__PURE__ */ new Map();
-          for (const r of war)
-            if (isResourceByMatch(r)) {
-              const { matches, resources, use_dynamic_url = false } = r;
-              const key = [use_dynamic_url, matches.sort()].map((x) => JSON.stringify(x)).join("::");
-              const set = map.get(key) ?? /* @__PURE__ */ new Set();
-              resources.forEach((r2) => set.add(r2));
-              map.set(key, set);
-            } else {
-              manifest.web_accessible_resources.push(r);
-            }
-          for (const [key, set] of map) {
-            const [use_dynamic_url, matches] = key.split("::").map((x) => JSON.parse(x));
-            manifest.web_accessible_resources.push({
+        for (const [key, resources] of hashedResources)
+          if (resources.size > 0) {
+            const [use_dynamic_url, matches] = JSON.parse(key);
+            combinedResources.push({
               matches,
-              resources: [...set],
+              resources: [...resources],
               use_dynamic_url
             });
           }
-        } else {
+        if (combinedResources.length === 0)
           delete manifest.web_accessible_resources;
-        }
-        return manifest;
-      }
-    },
-    {
-      name: "crx:content-scripts-post",
-      apply: "build",
-      enforce: "post",
-      renderCrxManifest(manifest, bundle) {
-        if (this.meta.watchMode && typeof port === "undefined")
-          throw new Error("server port is undefined");
-        const preambleName = this.meta.watchMode && preambleRefId ? this.getFileName(preambleRefId) : "";
-        const contentClientName = this.meta.watchMode && contentClientRefId ? this.getFileName(contentClientRefId) : "";
-        if (!manifest.content_scripts?.length && !dynamicScriptsByRefId.size) {
-          delete bundle[contentClientName];
-          return manifest;
-        }
-        manifest.content_scripts = manifest.content_scripts?.map(({ js, ...rest }) => ({
-          js: js?.map((f) => {
-            const name = `content-script-loader.${parse(f).name}.js`;
-            const source = this.meta.watchMode ? contentDevLoader.replace(/__PREAMBLE__/g, JSON.stringify(preambleName)).replace(/__CLIENT__/g, JSON.stringify(contentClientName)).replace(/__SCRIPT__/g, JSON.stringify(f)).replace(/__TIMESTAMP__/g, JSON.stringify(Date.now())) : contentProLoader.replace(/__SCRIPT__/g, JSON.stringify(f));
-            const refId = this.emitFile({
-              type: "asset",
-              name,
-              source
-            });
-            return this.getFileName(refId);
-          }),
-          ...rest
-        }));
+        else
+          manifest.web_accessible_resources = combinedResources;
         return manifest;
       }
     }
   ];
 };
 
-var workerHmrClient = "const ownOrigin = new URL(chrome.runtime.getURL(\"/\")).origin;\nself.addEventListener(\"fetch\", (fetchEvent) => {\n  const url = new URL(fetchEvent.request.url);\n  if (url.origin === ownOrigin) {\n    fetchEvent.respondWith(sendToServer(url));\n  }\n});\nasync function sendToServer(url) {\n  url.protocol = \"http:\";\n  url.host = \"localhost\";\n  url.port = __SERVER_PORT__;\n  url.searchParams.set(\"t\", Date.now().toString());\n  const response = await fetch(url.href.replace(/=$|=(?=&)/g, \"\"));\n  return new Response(response.body, {\n    headers: {\n      \"Content-Type\": response.headers.get(\"Content-Type\") ?? \"text/javascript\"\n    }\n  });\n}\nconst ports = /* @__PURE__ */ new Set();\nchrome.runtime.onConnect.addListener((port) => {\n  if (port.name === \"@crx/client\") {\n    ports.add(port);\n    port.onDisconnect.addListener((port2) => ports.delete(port2));\n    port.onMessage.addListener((message) => {\n    });\n    port.postMessage({ data: JSON.stringify({ type: \"connected\" }) });\n  }\n});\nfunction notifyContentScripts(payload) {\n  const data = JSON.stringify(payload);\n  for (const port of ports)\n    port.postMessage({ data });\n}\nconsole.log(\"[vite] connecting...\");\nconst socketProtocol = __HMR_PROTOCOL__ || (location.protocol === \"https:\" ? \"wss\" : \"ws\");\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;\nconst socket = new WebSocket(`${socketProtocol}://${socketHost}`, \"vite-hmr\");\nconst base = __BASE__ || \"/\";\nsocket.addEventListener(\"message\", async ({ data }) => {\n  handleSocketMessage(JSON.parse(data));\n});\nfunction isCrxHmrPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nfunction handleSocketMessage(payload) {\n  if (isCrxHmrPayload(payload)) {\n    handleCrxHmrPayload(payload);\n  } else if (payload.type === \"connected\") {\n    console.log(`[vite] connected.`);\n    const interval = setInterval(() => socket.send(\"ping\"), __HMR_TIMEOUT__);\n    socket.addEventListener(\"close\", () => clearInterval(interval));\n  }\n}\nfunction handleCrxHmrPayload(payload) {\n  notifyContentScripts(payload);\n  switch (payload.event) {\n    case \"crx:runtime-reload\":\n      console.log(\"[crx] runtime reload\");\n      chrome.runtime.reload();\n      break;\n  }\n}\nasync function waitForSuccessfulPing(ms = 1e3) {\n  while (true) {\n    try {\n      await fetch(`${base}__vite_ping`);\n      break;\n    } catch (e) {\n      await new Promise((resolve) => setTimeout(resolve, ms));\n    }\n  }\n}\nsocket.addEventListener(\"close\", async ({ wasClean }) => {\n  if (wasClean)\n    return;\n  console.log(`[vite] server connection lost. polling for restart...`);\n  await waitForSuccessfulPing();\n  chrome.runtime.reload();\n});\n";
-
-function defineClientValues(code, config) {
-  let options = config.server.hmr;
-  options = options && typeof options !== "boolean" ? options : {};
-  const host = options.host || null;
-  const protocol = options.protocol || null;
-  const timeout = options.timeout || 3e4;
-  const overlay = options.overlay !== false;
-  let hmrPort;
-  if (isObject(config.server.hmr)) {
-    hmrPort = config.server.hmr.clientPort || config.server.hmr.port;
-  }
-  if (config.server.middlewareMode) {
-    hmrPort = String(hmrPort || 24678);
-  } else {
-    hmrPort = String(hmrPort || options.port || config.server.port);
-  }
-  let hmrBase = config.base;
-  if (options.path) {
-    hmrBase = join(hmrBase, options.path);
-  }
-  if (hmrBase !== "/") {
-    hmrPort = normalize(`${hmrPort}${hmrBase}`);
-  }
-  return code.replace(`__MODE__`, JSON.stringify(config.mode)).replace(`__BASE__`, JSON.stringify(config.base)).replace(`__DEFINES__`, serializeDefine(config.define || {})).replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol)).replace(`__HMR_HOSTNAME__`, JSON.stringify(host)).replace(`__HMR_PORT__`, JSON.stringify(hmrPort)).replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout)).replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay)).replace(`__SERVER_PORT__`, JSON.stringify(config.server.port?.toString()));
-  function serializeDefine(define) {
-    let res = `{`;
-    for (const key in define) {
-      const val = define[key];
-      res += `${JSON.stringify(key)}: ${typeof val === "string" ? `(${val})` : JSON.stringify(val)}, `;
-    }
-    return res + `}`;
-  }
-}
-
-const pluginBackground = () => {
-  let port;
-  let server;
+const crx = (options) => {
   return [
-    {
-      name: "crx:background-client",
-      apply: "serve",
-      configureServer(_server) {
-        server = _server;
-      },
-      resolveId(source) {
-        if (source === `/${workerClientId}`)
-          return workerClientId;
-      },
-      load(id) {
-        if (id === workerClientId) {
-          const base = `http://localhost:${server.config.server.port}/`;
-          return defineClientValues(workerHmrClient.replace("__BASE__", JSON.stringify(base)), server.config);
-        }
-      }
-    },
-    {
-      name: "crx:background-loader-file",
-      apply: "build",
-      enforce: "post",
-      fileWriterStart(server2) {
-        port = server2.config.server.port.toString();
-      },
-      renderCrxManifest(manifest) {
-        const worker = manifest.background?.service_worker;
-        let loader;
-        if (this.meta.watchMode) {
-          if (typeof port === "undefined")
-            throw new Error("server port is undefined in watch mode");
-          loader = `import 'http:/localhost:${port}/@vite/env';
-`;
-          loader += `import 'http://localhost:${port}${workerClientId}';
-`;
-          if (worker)
-            loader += `import 'http://localhost:${port}/${worker}';
-`;
-        } else if (worker) {
-          loader = `import './${worker}';
-`;
-        } else {
-          return null;
-        }
-        const refId = this.emitFile({
-          type: "asset",
-          fileName: "service-worker-loader.js",
-          source: loader
-        });
-        manifest.background = {
-          service_worker: this.getFileName(refId),
-          type: "module"
-        };
-        return manifest;
-      }
-    }
-  ];
-};
-
-const defineManifest = (manifest) => manifest;
-const defineDynamicResource = ({
-  matches = ["http://*/*", "https://*/*"],
-  use_dynamic_url = true
-}) => ({
-  matches,
-  resources: [dynamicResourcesName],
-  use_dynamic_url
-});
-
-function init(options, plugins) {
-  return plugins.map((p) => p?.(options)).flat().filter((p) => !!p && typeof p.name === "string");
-}
-const crx = ({
-  manifest,
-  ...options
-}) => {
-  const plugins = init(options, [
-    pluginHMR,
-    pluginHtmlAuditor,
-    pluginResources,
-    pluginBackground,
-    pluginManifest(manifest)
-  ]);
-  plugins.unshift(...init(options, [pluginFileWriter(plugins)]));
-  return plugins;
+    pluginOptionsProvider(options),
+    pluginBackground(),
+    pluginContentScripts(),
+    pluginDeclaredContentScripts(),
+    pluginDynamicContentScripts(),
+    pluginFileWriter(),
+    pluginFileWriterPublic(),
+    pluginFileWriterPolyfill(),
+    pluginHtmlInlineScripts(),
+    pluginWebAccessibleResources(),
+    pluginContentScriptsCss(),
+    pluginHMR(),
+    pluginManifest()
+  ].flat();
 };
 const chromeExtension = crx;
 
-export { chromeExtension, crx, defineDynamicResource, defineManifest, filesReady, rebuildFiles };
+export { allFilesReady, chromeExtension, crx, defineDynamicResource, defineManifest, fileReady as filesReady };