wxt 0.3.1 → 0.4.0

package/dist/index.cjs

@@ -49,11 +49,11 @@ var import_node_path2 = __toESM(require("path"), 1);
 // src/core/utils/paths.ts
 var import_node_path = __toESM(require("path"), 1);
 var vite = __toESM(require("vite"), 1);
-function normalizePath2(path5) {
-  return vite.normalizePath(path5);
+function normalizePath2(path6) {
+  return vite.normalizePath(path6);
 }
-function unnormalizePath(path5) {
-  return import_node_path.default.normalize(path5);
+function unnormalizePath(path6) {
+  return import_node_path.default.normalize(path6);
 }
 var CSS_EXTENSIONS = ["css", "scss", "sass", "less", "styl", "stylus"];
 var CSS_EXTENSIONS_PATTERN = `+(${CSS_EXTENSIONS.join("|")})`;
@@ -235,7 +235,9 @@ function multipageMove(entrypoints, config) {
           (entry) => !!normalizePath2(entry.inputPath).endsWith(oldBundlePath)
         );
         if (entrypoint == null) {
-          config.logger.debug("No entrypoint found for", oldBundlePath);
+          config.logger.debug(
+            `No entrypoint found for ${oldBundlePath}, leaving in chunks directory`
+          );
           continue;
         }
         const newBundlePath = getEntrypointBundlePath(
@@ -276,7 +278,7 @@ function getUnimportOptions(config) {
     imports: [{ name: "defineConfig", from: "wxt" }],
     presets: [{ package: "wxt/client" }, { package: "wxt/browser" }],
     warn: config.logger.warn,
-    dirs: ["./components/*", "./composables/*", "./hooks/*", "./utils/*"]
+    dirs: ["components", "composables", "hooks", "utils"]
   };
   return (0, import_vite.mergeConfig)(
     defaultOptions,
@@ -342,12 +344,22 @@ function virtualEntrypoin(type, config) {
 }
 
 // src/core/vite-plugins/tsconfigPaths.ts
-var import_vite_tsconfig_paths = __toESM(require("vite-tsconfig-paths"), 1);
 function tsconfigPaths(config) {
-  const fn = typeof import_vite_tsconfig_paths.default === "function" ? import_vite_tsconfig_paths.default : import_vite_tsconfig_paths.default.default;
-  return fn({
-    root: config.root
-  });
+  return {
+    name: "wxt:aliases",
+    async config() {
+      return {
+        resolve: {
+          alias: {
+            "@@": config.root,
+            "~~": config.root,
+            "@": config.srcDir,
+            "~": config.srcDir
+          }
+        }
+      };
+    }
+  };
 }
 
 // src/core/vite-plugins/noopBackground.ts
@@ -401,14 +413,14 @@ function createFsCache(wxtDir) {
   const getPath = (key) => (0, import_path4.resolve)(wxtDir, "cache", encodeURIComponent(key));
   return {
     async set(key, value) {
-      const path5 = getPath(key);
-      await (0, import_fs_extra3.ensureDir)((0, import_path4.dirname)(path5));
-      await import_fs_extra3.default.writeFile(path5, value, "utf-8");
+      const path6 = getPath(key);
+      await (0, import_fs_extra3.ensureDir)((0, import_path4.dirname)(path6));
+      await import_fs_extra3.default.writeFile(path6, value, "utf-8");
     },
     async get(key) {
-      const path5 = getPath(key);
+      const path6 = getPath(key);
       try {
-        return await import_fs_extra3.default.readFile(path5, "utf-8");
+        return await import_fs_extra3.default.readFile(path6, "utf-8");
       } catch {
         return void 0;
       }
@@ -472,6 +484,9 @@ async function getInternalConfig(config, command) {
   const outBaseDir = import_node_path4.default.resolve(root, ".output");
   const outDir = import_node_path4.default.resolve(outBaseDir, `${browser}-mv${manifestVersion}`);
   const logger = config.logger ?? import_consola.consola;
+  const debug = !!config.debug;
+  if (debug)
+    logger.level = import_consola.LogLevels.debug;
   const baseConfig = {
     root,
     outDir,
@@ -481,6 +496,7 @@ async function getInternalConfig(config, command) {
     manifestVersion,
     mode,
     command,
+    debug,
     logger,
     vite: config.vite ?? {},
     imports: config.imports ?? {},
@@ -513,7 +529,7 @@ async function getInternalConfig(config, command) {
     userConfig.entrypointsDir ?? "entrypoints"
   );
   const publicDir = (0, import_node_path4.resolve)(root, userConfig.publicDir ?? "public");
-  const wxtDir = (0, import_node_path4.resolve)(srcDir, ".wxt");
+  const wxtDir = (0, import_node_path4.resolve)(root, ".wxt");
   const typesDir = (0, import_node_path4.resolve)(wxtDir, "types");
   const env = { mode, browser, manifestVersion, command };
   const userManifest = await resolveManifestConfig(env, userConfig.manifest);
@@ -677,7 +693,7 @@ function findEffectedSteps(changedFile, currentOutput) {
 // src/index.ts
 var import_async_mutex = require("async-mutex");
 var import_consola2 = require("consola");
-var import_node_path7 = require("path");
+var import_node_path8 = require("path");
 
 // src/core/build/buildEntrypoints.ts
 var vite3 = __toESM(require("vite"), 1);
@@ -849,16 +865,16 @@ function removeImportStatements(text) {
 }
 
 // src/core/utils/importTsFile.ts
-async function importTsFile(path5, config) {
-  config.logger.debug("Loading file metadata:", path5);
-  const normalPath = normalizePath2(path5);
+async function importTsFile(path6, config) {
+  config.logger.debug("Loading file metadata:", path6);
+  const normalPath = normalizePath2(path6);
   const unimport2 = (0, import_unimport2.createUnimport)({
     ...getUnimportOptions(config),
     // Only allow specific imports, not all from the project
     dirs: []
   });
   await unimport2.init();
-  const text = await import_fs_extra7.default.readFile(path5, "utf-8");
+  const text = await import_fs_extra7.default.readFile(path6, "utf-8");
   const textNoImports = removeImportStatements(text);
   const { code } = await unimport2.injectImports(textNoImports);
   config.logger.debug(
@@ -882,7 +898,7 @@ async function importTsFile(path5, config) {
     }
   });
   try {
-    return await jiti(path5);
+    return await jiti(path6);
   } catch (err) {
     config.logger.error(err);
     throw err;
@@ -902,7 +918,7 @@ async function findEntrypoints(config) {
   let hasBackground = false;
   await Promise.all(
     relativePaths.map(async (relativePath) => {
-      const path5 = (0, import_path8.resolve)(config.entrypointsDir, relativePath);
+      const path6 = (0, import_path8.resolve)(config.entrypointsDir, relativePath);
       const matchingGlob = pathGlobs.find(
         (glob3) => (0, import_minimatch.minimatch)(relativePath, glob3)
       );
@@ -922,35 +938,35 @@ ${JSON.stringify(
       let entrypoint;
       switch (type) {
         case "popup":
-          entrypoint = await getPopupEntrypoint(config, path5);
+          entrypoint = await getPopupEntrypoint(config, path6);
           break;
         case "options":
-          entrypoint = await getOptionsEntrypoint(config, path5);
+          entrypoint = await getOptionsEntrypoint(config, path6);
           break;
         case "background":
-          entrypoint = await getBackgroundEntrypoint(config, path5);
+          entrypoint = await getBackgroundEntrypoint(config, path6);
           hasBackground = true;
           break;
         case "content-script":
           entrypoint = await getContentScriptEntrypoint(
             config,
-            getEntrypointName(config.entrypointsDir, path5),
-            path5
+            getEntrypointName(config.entrypointsDir, path6),
+            path6
           );
           break;
         case "content-script-style":
           entrypoint = {
             type,
-            name: getEntrypointName(config.entrypointsDir, path5),
-            inputPath: path5,
+            name: getEntrypointName(config.entrypointsDir, path6),
+            inputPath: path6,
             outputDir: (0, import_path8.resolve)(config.outDir, CONTENT_SCRIPT_OUT_DIR)
           };
           break;
         default:
           entrypoint = {
             type,
-            name: getEntrypointName(config.entrypointsDir, path5),
-            inputPath: path5,
+            name: getEntrypointName(config.entrypointsDir, path6),
+            inputPath: path6,
             outputDir: config.outDir
           };
       }
@@ -974,9 +990,9 @@ ${JSON.stringify(
   }
   return entrypoints;
 }
-async function getPopupEntrypoint(config, path5) {
+async function getPopupEntrypoint(config, path6) {
   const options = {};
-  const content = await import_fs_extra8.default.readFile(path5, "utf-8");
+  const content = await import_fs_extra8.default.readFile(path6, "utf-8");
   const { document } = (0, import_linkedom2.parseHTML)(content);
   const title = document.querySelector("title");
   if (title != null)
@@ -1000,13 +1016,13 @@ async function getPopupEntrypoint(config, path5) {
     type: "popup",
     name: "popup",
     options,
-    inputPath: path5,
+    inputPath: path6,
     outputDir: config.outDir
   };
 }
-async function getOptionsEntrypoint(config, path5) {
+async function getOptionsEntrypoint(config, path6) {
   const options = {};
-  const content = await import_fs_extra8.default.readFile(path5, "utf-8");
+  const content = await import_fs_extra8.default.readFile(path6, "utf-8");
   const { document } = (0, import_linkedom2.parseHTML)(content);
   const openInTabContent = document.querySelector("meta[name='manifest.open_in_tab']")?.getAttribute("content");
   if (openInTabContent) {
@@ -1024,15 +1040,15 @@ async function getOptionsEntrypoint(config, path5) {
     type: "options",
     name: "options",
     options,
-    inputPath: path5,
+    inputPath: path6,
     outputDir: config.outDir
   };
 }
-async function getBackgroundEntrypoint(config, path5) {
+async function getBackgroundEntrypoint(config, path6) {
   let options = {};
-  if (path5 !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
+  if (path6 !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
     const defaultExport = await importTsFile(
-      path5,
+      path6,
       config
     );
     if (defaultExport == null) {
@@ -1044,14 +1060,14 @@ async function getBackgroundEntrypoint(config, path5) {
   return {
     type: "background",
     name: "background",
-    inputPath: path5,
+    inputPath: path6,
     outputDir: config.outDir,
     options
   };
 }
-async function getContentScriptEntrypoint(config, name, path5) {
+async function getContentScriptEntrypoint(config, name, path6) {
   const { main: _, ...options } = await importTsFile(
-    path5,
+    path6,
     config
   );
   if (options == null) {
@@ -1059,8 +1075,8 @@ async function getContentScriptEntrypoint(config, name, path5) {
   }
   return {
     type: "content-script",
-    name: getEntrypointName(config.entrypointsDir, path5),
-    inputPath: path5,
+    name: getEntrypointName(config.entrypointsDir, path6),
+    inputPath: path6,
     outputDir: (0, import_path8.resolve)(config.outDir, CONTENT_SCRIPT_OUT_DIR),
     options
   };
@@ -1111,11 +1127,52 @@ var CONTENT_SCRIPT_OUT_DIR = "content-scripts";
 var import_unimport3 = require("unimport");
 var import_fs_extra9 = __toESM(require("fs-extra"), 1);
 var import_path9 = require("path");
+var import_node_path5 = __toESM(require("path"), 1);
+
+// src/core/utils/i18n.ts
+var predefinedMessages = {
+  "@@extension_id": {
+    message: "<browser.runtime.id>",
+    description: "The extension or app ID; you might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.\nNote: You can't use this message in a manifest file."
+  },
+  "@@ui_locale": {
+    message: "<browser.i18n.getUiLocale()>",
+    description: ""
+  },
+  "@@bidi_dir": {
+    message: "<ltr|rtl>",
+    description: 'The text direction for the current locale, either "ltr" for left-to-right languages such as English or "rtl" for right-to-left languages such as Japanese.'
+  },
+  "@@bidi_reversed_dir": {
+    message: "<rtl|ltr>",
+    description: `If the @@bidi_dir is "ltr", then this is "rtl"; otherwise, it's "ltr".`
+  },
+  "@@bidi_start_edge": {
+    message: "<left|right>",
+    description: `If the @@bidi_dir is "ltr", then this is "left"; otherwise, it's "right".`
+  },
+  "@@bidi_end_edge": {
+    message: "<right|left>",
+    description: `If the @@bidi_dir is "ltr", then this is "right"; otherwise, it's "left".`
+  }
+};
+function parseI18nMessages(messagesJson) {
+  return Object.entries({
+    ...predefinedMessages,
+    ...messagesJson
+  }).map(([name, details]) => ({
+    name,
+    ...details
+  }));
+}
+
+// src/core/build/generateTypesDir.ts
 async function generateTypesDir(entrypoints, config) {
   await import_fs_extra9.default.ensureDir(config.typesDir);
   const references = [];
   references.push(await writeImportsDeclarationFile(config));
   references.push(await writePathsDeclarationFile(entrypoints, config));
+  references.push(await writeI18nDeclarationFile(config));
   references.push(await writeGlobalsDeclarationFile(config));
   const mainReference = await writeMainDeclarationFile(references, config);
   await writeTsConfigFile(mainReference, config);
@@ -1140,14 +1197,14 @@ async function writePathsDeclarationFile(entrypoints, config) {
       config.outDir,
       entry.inputPath.endsWith(".html") ? ".html" : ".js"
     )
-  ).concat(await getPublicFiles(config)).map(normalizePath2).map((path5) => `    | "/${path5}"`).sort().join("\n");
+  ).concat(await getPublicFiles(config)).map(normalizePath2).map((path6) => `    | "/${path6}"`).sort().join("\n");
   const template = `// Generated by wxt
 import "wxt/browser";
 
 declare module "wxt/browser" {
   type PublicPath =
 {{ union }}
-  export interface ProjectRuntime extends Runtime.Static {
+  export interface WxtRuntime extends Runtime.Static {
     getURL(path: PublicPath): string;
   }
 }
@@ -1158,6 +1215,59 @@ declare module "wxt/browser" {
   );
   return filePath;
 }
+async function writeI18nDeclarationFile(config) {
+  const filePath = (0, import_path9.resolve)(config.typesDir, "i18n.d.ts");
+  const defaultLocale = config.manifest.default_locale;
+  const template = `// Generated by wxt
+import "wxt/browser";
+
+declare module "wxt/browser" {
+  /**
+   * See https://developer.chrome.com/docs/extensions/reference/i18n/#method-getMessage
+   */
+  interface GetMessageOptions {
+    /**
+     * See https://developer.chrome.com/docs/extensions/reference/i18n/#method-getMessage
+     */
+    escapeLt?: boolean
+  }
+
+  export interface WxtI18n extends I18n.Static {
+{{ overrides }}
+  }
+}
+`;
+  let messages;
+  if (defaultLocale) {
+    const defaultLocalePath = import_node_path5.default.resolve(
+      config.publicDir,
+      "_locales",
+      defaultLocale,
+      "messages.json"
+    );
+    const content = JSON.parse(await import_fs_extra9.default.readFile(defaultLocalePath, "utf-8"));
+    messages = parseI18nMessages(content);
+  } else {
+    messages = parseI18nMessages({});
+  }
+  const overrides = messages.map((message) => {
+    return `    /**
+     * ${message.description ?? "No message description."}
+     * 
+     * "${message.message}"
+     */
+    getMessage(
+      messageName: "${message.name}",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;`;
+  });
+  await import_fs_extra9.default.writeFile(
+    filePath,
+    template.replace("{{ overrides }}", overrides.join("\n"))
+  );
+  return filePath;
+}
 async function writeGlobalsDeclarationFile(config) {
   const filePath = (0, import_path9.resolve)(config.typesDir, "globals.d.ts");
   const globals = getGlobals(config);
@@ -1191,6 +1301,8 @@ async function writeMainDeclarationFile(references, config) {
 }
 async function writeTsConfigFile(mainReference, config) {
   const dir = config.wxtDir;
+  const rootPath = normalizePath2((0, import_path9.relative)(dir, config.root));
+  const srcPath = normalizePath2((0, import_path9.relative)(dir, config.srcDir));
   await import_fs_extra9.default.writeFile(
     (0, import_path9.resolve)(dir, "tsconfig.json"),
     `{
@@ -1205,16 +1317,15 @@ async function writeTsConfigFile(mainReference, config) {
     "strict": true,
     "lib": ["DOM", "WebWorker"],
     "skipLibCheck": true,
-    "baseUrl": "${normalizePath2((0, import_path9.relative)(dir, config.root))}",
     "paths": {
-      "@@": ["."],
-      "@@/*": ["./*"],
-      "~~": ["."],
-      "~~/*": ["./*"],
-      "@": ["${normalizePath2((0, import_path9.relative)(config.root, config.srcDir))}"],
-      "@/*": ["${normalizePath2((0, import_path9.relative)(config.root, config.srcDir))}/*"],
-      "~": ["${normalizePath2((0, import_path9.relative)(config.root, config.srcDir))}"],
-      "~/*": ["${normalizePath2((0, import_path9.relative)(config.root, config.srcDir))}/*"]
+      "@@": ["${rootPath}"],
+      "@@/*": ["${rootPath}/*"],
+      "~~": ["${rootPath}"],
+      "~~/*": ["${rootPath}/*"],
+      "@": ["${srcPath}"],
+      "@/*": ["${srcPath}/*"],
+      "~": ["${srcPath}"],
+      "~/*": ["${srcPath}/*"]
     }
   },
   "include": [
@@ -1312,10 +1423,10 @@ function mapWxtOptionsToContentScript(options) {
 }
 
 // src/core/utils/package.ts
-var import_node_path5 = require("path");
+var import_node_path6 = require("path");
 var import_fs_extra10 = __toESM(require("fs-extra"), 1);
 async function getPackageJson(config) {
-  const file = (0, import_node_path5.resolve)(config.root, "package.json");
+  const file = (0, import_node_path6.resolve)(config.root, "package.json");
   try {
     return await import_fs_extra10.default.readJson(file);
   } catch (err) {
@@ -1349,7 +1460,8 @@ async function generateMainfest(entrypoints, buildOutput, config) {
       version: pkg?.version && simplifyVersion(pkg.version),
       // Only add the version name to chromium and if the user hasn't specified a custom version.
       version_name: config.browser !== "firefox" && !config.manifest.version ? pkg?.version : void 0,
-      short_name: pkg?.shortName
+      short_name: pkg?.shortName,
+      icons: discoverIcons(buildOutput)
     },
     config.manifest
   );
@@ -1539,7 +1651,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
           map.set(hash, [script]);
         return map;
       }, /* @__PURE__ */ new Map());
-      manifest.content_scripts = Array.from(hashToEntrypointsMap.entries()).map(
+      const newContentScripts = Array.from(hashToEntrypointsMap.entries()).map(
         ([, scripts]) => ({
           ...mapWxtOptionsToContentScript(scripts[0].options),
           // TOOD: Sorting css and js arrays here so we get consistent test results... but we
@@ -1550,9 +1662,46 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
           ).sort()
         })
       );
+      if (newContentScripts.length >= 0) {
+        manifest.content_scripts ??= [];
+        manifest.content_scripts.push(...newContentScripts);
+      }
     }
   }
 }
+function discoverIcons(buildOutput) {
+  const icons = [];
+  const iconRegex = [
+    /^icon-([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon-16.png
+    /^icon-([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon-16x16.png
+    /^icon@([0-9]+)w\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon@16w.png
+    /^icon@([0-9]+)h\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon@16h.png
+    /^icon@([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon@16.png
+    /^icon[\/\\]([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon/16.png
+    /^icon[\/\\]([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/
+    // icon/16x16.png
+  ];
+  buildOutput.publicAssets.forEach((asset) => {
+    let size;
+    for (const regex of iconRegex) {
+      const match = asset.fileName.match(regex);
+      if (match?.[1] != null) {
+        size = match[1];
+        break;
+      }
+    }
+    if (size == null)
+      return;
+    icons.push([size, normalizePath2(asset.fileName)]);
+  });
+  return icons.length > 0 ? Object.fromEntries(icons) : void 0;
+}
 function addDevModeCsp(manifest, config) {
   const permission = `http://${config.server?.hostname ?? ""}/*`;
   const allowedCsp = config.server?.origin ?? "http://localhost:*";
@@ -1665,13 +1814,13 @@ function formatDuration(duration) {
 var import_path11 = require("path");
 
 // src/core/log/printFileList.ts
-var import_node_path6 = __toESM(require("path"), 1);
+var import_node_path7 = __toESM(require("path"), 1);
 var import_picocolors = __toESM(require("picocolors"), 1);
 var import_fs_extra12 = __toESM(require("fs-extra"), 1);
 var import_filesize = require("filesize");
 
 // src/core/log/printTable.ts
-function printTable(log, rows, gap = 2) {
+function printTable(log, header, rows, gap = 2) {
   if (rows.length === 0)
     return;
   const columnWidths = rows.reduce(
@@ -1693,17 +1842,18 @@ function printTable(log, rows, gap = 2) {
     if (i !== rows.length - 1)
       str += "\n";
   });
-  log(str);
+  log(`${header}
+${str}`);
 }
 
 // src/core/log/printFileList.ts
-async function printFileList(log, baseDir, files) {
+async function printFileList(log, header, baseDir, files) {
   let totalSize = 0;
   const fileRows = await Promise.all(
     files.map(async (file, i) => {
       const parts = [
-        import_node_path6.default.relative(process.cwd(), baseDir) + import_node_path6.default.sep,
-        import_node_path6.default.relative(baseDir, file)
+        import_node_path7.default.relative(process.cwd(), baseDir) + import_node_path7.default.sep,
+        import_node_path7.default.relative(baseDir, file)
       ];
       const prefix = i === files.length - 1 ? "  \u2514\u2500" : "  \u251C\u2500";
       const color = getChunkColor(file);
@@ -1716,8 +1866,8 @@ async function printFileList(log, baseDir, files) {
       ];
     })
   );
-  printTable(log, fileRows);
-  log(`${import_picocolors.default.cyan("\u03A3 Total size:")} ${String((0, import_filesize.filesize)(totalSize))}`);
+  fileRows.push([`${import_picocolors.default.cyan("\u03A3 Total size:")} ${String((0, import_filesize.filesize)(totalSize))}`]);
+  printTable(log, header, fileRows);
 }
 var DEFAULT_COLOR = import_picocolors.default.blue;
 var CHUNK_COLORS = {
@@ -1732,7 +1882,7 @@ function getChunkColor(filename) {
 }
 
 // src/core/log/printBuildSummary.ts
-async function printBuildSummary(output, config) {
+async function printBuildSummary(log, header, output, config) {
   const chunks = [
     ...output.steps.flatMap((step) => step.chunks),
     ...output.publicAssets
@@ -1745,7 +1895,7 @@ async function printBuildSummary(output, config) {
     return l.fileName.localeCompare(r.fileName);
   });
   const files = chunks.map((chunk) => (0, import_path11.resolve)(config.outDir, chunk.fileName));
-  await printFileList(config.logger.log, config.outDir, files);
+  await printFileList(log, header, config.outDir, files);
 }
 var DEFAULT_SORT_WEIGHT = 100;
 var CHUNK_SORT_WEIGHTS = {
@@ -1776,10 +1926,12 @@ async function buildInternal(config) {
   const entrypoints = await findEntrypoints(config);
   const groups = groupEntrypoints(entrypoints);
   const { output } = await rebuild(config, groups, void 0);
-  config.logger.success(
-    `Built extension in ${formatDuration(Date.now() - startTime)}`
+  await printBuildSummary(
+    config.logger.success,
+    `Built extension in ${formatDuration(Date.now() - startTime)}`,
+    output,
+    config
   );
-  await printBuildSummary(output, config);
   return output;
 }
 async function rebuild(config, entrypointGroups, existingOutput = {
@@ -1832,7 +1984,7 @@ function createWebExtRunner() {
         config.logger.warn("Cannot open safari automatically.");
         return;
       }
-      const webExtLogger = await import("web-ext/util/logger");
+      const webExtLogger = await import("web-ext-run/util/logger");
       webExtLogger.consoleStream.write = ({ level, msg, name }) => {
         if (level >= ERROR_LOG_LEVEL)
           config.logger.error(name, msg);
@@ -1869,7 +2021,7 @@ function createWebExtRunner() {
       };
       config.logger.debug("web-ext config:", finalConfig);
       config.logger.debug("web-ext options:", options);
-      const webExt = await import("web-ext");
+      const webExt = await import("web-ext-run");
       runner = await webExt.default.cmd.run(finalConfig, options);
     },
     async closeBrowser() {
@@ -1914,8 +2066,8 @@ async function setupServer(serverInfo, config) {
   const reloadExtension = () => {
     viteServer.ws.send("wxt:reload-extension");
   };
-  const reloadPage = (path5) => {
-    viteServer.ws.send("wxt:reload-page", path5);
+  const reloadPage = (path6) => {
+    viteServer.ws.send("wxt:reload-page", path6);
   };
   const reloadContentScript = (contentScript) => {
     viteServer.ws.send("wxt:reload-content-script", contentScript);
@@ -1961,13 +2113,13 @@ function reloadContentScripts(steps, config, server) {
 }
 function reloadHtmlPages(groups, server, config) {
   groups.flat().forEach((entry) => {
-    const path5 = getEntrypointBundlePath(entry, config.outDir, ".html");
-    server.reloadPage(path5);
+    const path6 = getEntrypointBundlePath(entry, config.outDir, ".html");
+    server.reloadPage(path6);
   });
 }
 
 // package.json
-var version2 = "0.3.1";
+var version2 = "0.4.0";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {
@@ -2001,10 +2153,10 @@ async function createServer2(config) {
   server.ws.on("wxt:background-initialized", () => {
     reloadContentScripts(server.currentOutput.steps, internalConfig, server);
   });
-  server.watcher.on("all", async (event, path5, _stats) => {
-    if (path5.startsWith(internalConfig.outBaseDir))
+  server.watcher.on("all", async (event, path6, _stats) => {
+    if (path6.startsWith(internalConfig.outBaseDir))
       return;
-    changeQueue.push([event, path5]);
+    changeQueue.push([event, path6]);
     await fileChangedMutex.runExclusive(async () => {
       const fileChanges = changeQueue.splice(0, changeQueue.length);
       if (fileChanges.length === 0)
@@ -2013,11 +2165,11 @@ async function createServer2(config) {
       if (changes.type === "no-change")
         return;
       internalConfig.logger.info(
-        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1]))).map((file) => import_picocolors3.default.dim((0, import_node_path7.relative)(internalConfig.root, file))).join(", ")}`
+        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1]))).map((file) => import_picocolors3.default.dim((0, import_node_path8.relative)(internalConfig.root, file))).join(", ")}`
       );
       const rebuiltNames = changes.rebuildGroups.flat().map((entry) => {
         return import_picocolors3.default.cyan(
-          (0, import_node_path7.relative)(internalConfig.outDir, getEntrypointOutputFile(entry, ""))
+          (0, import_node_path8.relative)(internalConfig.outDir, getEntrypointOutputFile(entry, ""))
         );
       }).join(import_picocolors3.default.dim(", "));
       internalConfig = await getLatestInternalConfig();