wxt 0.7.3 → 0.7.5

package/dist/index.d.cts

@@ -391,6 +391,7 @@ interface PopupEntrypoint extends BaseEntrypoint {
         mv2Key?: 'browser_action' | 'page_action';
         defaultIcon?: Record<string, string>;
         defaultTitle?: string;
+        browserStyle?: boolean;
     } & BaseEntrypointOptions;
 }
 interface OptionsEntrypoint extends BaseEntrypoint {
@@ -453,6 +454,8 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      * - `"manual"` - Exclude the CSS from the manifest. You are responsible for manually loading it
      *   onto the page. Use `browser.runtime.getURL("content-scripts/<name>.css")` to get the file's
      *   URL
+     * - `"ui"` - Exclude the CSS from the manifest. CSS will be automatically added to your UI when
+     *   calling `createContentScriptUi`
      *
      * @default "manifest"
      */
@@ -565,7 +568,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.3";
+var version = "0.7.5";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.d.ts

@@ -391,6 +391,7 @@ interface PopupEntrypoint extends BaseEntrypoint {
         mv2Key?: 'browser_action' | 'page_action';
         defaultIcon?: Record<string, string>;
         defaultTitle?: string;
+        browserStyle?: boolean;
     } & BaseEntrypointOptions;
 }
 interface OptionsEntrypoint extends BaseEntrypoint {
@@ -453,6 +454,8 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      * - `"manual"` - Exclude the CSS from the manifest. You are responsible for manually loading it
      *   onto the page. Use `browser.runtime.getURL("content-scripts/<name>.css")` to get the file's
      *   URL
+     * - `"ui"` - Exclude the CSS from the manifest. CSS will be automatically added to your UI when
+     *   calling `createContentScriptUi`
      *
      * @default "manifest"
      */
@@ -565,7 +568,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.3";
+var version = "0.7.5";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.js

@@ -949,62 +949,119 @@ function resolvePerBrowserOption(option, browser) {
 // src/core/vite-plugins/devHtmlPrerender.ts
 import { parseHTML } from "linkedom";
 import { dirname as dirname2, isAbsolute, relative as relative2, resolve as resolve3 } from "path";
+var reactRefreshPreamble = "";
 function devHtmlPrerender(config) {
-  return {
-    apply: "build",
-    name: "wxt:dev-html-prerender",
-    config() {
-      return {
-        resolve: {
-          alias: {
-            "@wxt/reload-html": resolve3(
-              config.root,
-              "node_modules/wxt/dist/virtual-modules/reload-html.js"
-            )
+  const htmlReloadId = "@wxt/reload-html";
+  const resolvedHtmlReloadId = resolve3(
+    config.root,
+    "node_modules/wxt/dist/virtual-modules/reload-html.js"
+  );
+  const virtualReactRefreshId = "@wxt/virtual-react-refresh";
+  const resolvedVirtualReactRefreshId = "\0" + virtualReactRefreshId;
+  return [
+    {
+      apply: "build",
+      name: "wxt:dev-html-prerender",
+      config() {
+        return {
+          resolve: {
+            alias: {
+              [htmlReloadId]: resolvedHtmlReloadId
+            }
           }
+        };
+      },
+      // Convert scripts like src="./main.tsx" -> src="http://localhost:3000/entrypoints/popup/main.tsx"
+      // before the paths are replaced with their bundled path
+      transform(code, id) {
+        const server = config.server;
+        if (config.command !== "serve" || server == null || !id.endsWith(".html"))
+          return;
+        const { document } = parseHTML(code);
+        const pointToDevServer = (querySelector, attr) => {
+          document.querySelectorAll(querySelector).forEach((element) => {
+            const src = element.getAttribute(attr);
+            if (!src)
+              return;
+            if (isAbsolute(src)) {
+              element.setAttribute(attr, server.origin + src);
+            } else if (src.startsWith(".")) {
+              const abs = resolve3(dirname2(id), src);
+              const pathname = relative2(config.root, abs);
+              element.setAttribute(attr, `${server.origin}/${pathname}`);
+            }
+          });
+        };
+        pointToDevServer("script[type=module]", "src");
+        pointToDevServer("link[rel=stylesheet]", "href");
+        const reloader = document.createElement("script");
+        reloader.src = htmlReloadId;
+        reloader.type = "module";
+        document.head.appendChild(reloader);
+        const newHtml = document.toString();
+        config.logger.debug("transform " + id);
+        config.logger.debug("Old HTML:\n" + code);
+        config.logger.debug("New HTML:\n" + newHtml);
+        return newHtml;
+      },
+      // Pass the HTML through the dev server to add dev-mode specific code
+      async transformIndexHtml(html, ctx) {
+        const server = config.server;
+        if (config.command !== "serve" || server == null)
+          return;
+        const originalUrl = `${server.origin}${ctx.path}`;
+        const name = getEntrypointName(config.entrypointsDir, ctx.filename);
+        const url2 = `${server.origin}/${name}.html`;
+        const serverHtml = await server.transformIndexHtml(
+          url2,
+          html,
+          originalUrl
+        );
+        const { document } = parseHTML(serverHtml);
+        const reactRefreshScript = Array.from(
+          document.querySelectorAll("script[type=module]")
+        ).find((script) => script.innerHTML.includes("@react-refresh"));
+        if (reactRefreshScript) {
+          reactRefreshPreamble = reactRefreshScript.innerHTML;
+          const virtualScript = document.createElement("script");
+          virtualScript.type = "module";
+          virtualScript.src = `${server.origin}/${virtualReactRefreshId}`;
+          reactRefreshScript.replaceWith(virtualScript);
         }
-      };
+        const viteClientScript = document.querySelector(
+          "script[src='/@vite/client']"
+        );
+        if (viteClientScript) {
+          viteClientScript.src = `${server.origin}${viteClientScript.src}`;
+        }
+        const newHtml = document.toString();
+        config.logger.debug("transformIndexHtml " + ctx.filename);
+        config.logger.debug("Old HTML:\n" + html);
+        config.logger.debug("New HTML:\n" + newHtml);
+        return newHtml;
+      }
     },
-    async transform(html, id) {
-      const server = config.server;
-      if (config.command !== "serve" || server == null || !id.endsWith(".html"))
-        return;
-      const originalUrl = `${server.origin}${id}`;
-      const name = getEntrypointName(config.entrypointsDir, id);
-      const url2 = `${server.origin}/${name}.html`;
-      const serverHtml = await server.transformIndexHtml(
-        url2,
-        html,
-        originalUrl
-      );
-      const { document } = parseHTML(serverHtml);
-      const pointToDevServer = (querySelector, attr) => {
-        document.querySelectorAll(querySelector).forEach((element) => {
-          const src = element.getAttribute(attr);
-          if (!src)
-            return;
-          if (isAbsolute(src)) {
-            element.setAttribute(attr, server.origin + src);
-          } else if (src.startsWith(".")) {
-            const abs = resolve3(dirname2(id), src);
-            const pathname = relative2(config.root, abs);
-            element.setAttribute(attr, `${server.origin}/${pathname}`);
-          }
-        });
-      };
-      pointToDevServer("script[type=module]", "src");
-      pointToDevServer("link[rel=stylesheet]", "href");
-      const reloader = document.createElement("script");
-      reloader.src = "@wxt/reload-html";
-      reloader.type = "module";
-      document.head.appendChild(reloader);
-      const newHtml = document.toString();
-      config.logger.debug("Transformed " + id);
-      config.logger.debug("Old HTML:\n" + html);
-      config.logger.debug("New HTML:\n" + newHtml);
-      return newHtml;
+    {
+      name: "wxt:virtualize-react-refresh",
+      apply: "serve",
+      resolveId(id) {
+        if (id === `/${virtualReactRefreshId}`) {
+          return resolvedVirtualReactRefreshId;
+        }
+        if (id.startsWith("/chunks/")) {
+          return "\0noop";
+        }
+      },
+      load(id) {
+        if (id === resolvedVirtualReactRefreshId) {
+          return reactRefreshPreamble;
+        }
+        if (id === "\0noop") {
+          return "";
+        }
+      }
     }
-  };
+  ];
 }
 
 // src/core/vite-plugins/devServerGlobals.ts
@@ -2027,9 +2084,13 @@ async function getPopupEntrypoint(config, path9) {
       );
     }
   }
-  const mv2KeyContent = document.querySelector("meta[name='manifest.type']")?.getAttribute("content");
-  if (mv2KeyContent) {
-    options.mv2Key = mv2KeyContent === "page_action" ? "page_action" : "browser_action";
+  const mv2TypeContent = document.querySelector("meta[name='manifest.type']")?.getAttribute("content");
+  if (mv2TypeContent) {
+    options.mv2Key = mv2TypeContent === "page_action" ? "page_action" : "browser_action";
+  }
+  const browserStyleContent = document.querySelector("meta[name='manifest.browser_style']")?.getAttribute("content");
+  if (browserStyleContent) {
+    options.browserStyle = browserStyleContent === "true";
   }
   return {
     type: "popup",
@@ -2416,18 +2477,23 @@ var ContentSecurityPolicy = class _ContentSecurityPolicy {
 };
 
 // src/core/utils/content-scripts.ts
-function hashContentScriptOptions(options) {
+function hashContentScriptOptions(options, config) {
+  const simplifiedOptions = mapWxtOptionsToContentScript(options, config);
+  Object.keys(simplifiedOptions).forEach((key) => {
+    if (simplifiedOptions[key] == null)
+      delete simplifiedOptions[key];
+  });
   const withDefaults = {
-    excludeGlobs: [],
-    excludeMatches: [],
-    includeGlobs: [],
-    matchAboutBlank: false,
-    matchOriginAsFallback: false,
-    runAt: "document_idle",
-    allFrames: false,
+    exclude_globs: [],
+    exclude_matches: [],
+    include_globs: [],
+    match_about_blank: false,
+    run_at: "document_idle",
+    all_frames: false,
+    // @ts-expect-error - not in type
+    match_origin_as_fallback: false,
     world: "ISOLATED",
-    // TODO: strip undefined fields from options object to improve content script grouping.
-    ...options
+    ...simplifiedOptions
   };
   return JSON.stringify(
     Object.entries(withDefaults).map(([key, value]) => {
@@ -2500,13 +2566,17 @@ async function writeManifest(manifest, output, config) {
 }
 async function generateMainfest(entrypoints, buildOutput, config) {
   const pkg = await getPackageJson(config);
+  const versionName = config.manifest.version_name ?? pkg?.version;
+  const version3 = config.manifest.version ?? simplifyVersion(pkg?.version);
   const baseManifest = {
     manifest_version: config.manifestVersion,
     name: pkg?.name,
     description: pkg?.description,
-    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,
+    version: version3,
+    version_name: (
+      // Firefox doesn't support version_name
+      config.browser === "firefox" || versionName === version3 ? void 0 : versionName
+    ),
     short_name: pkg?.shortName,
     icons: discoverIcons(buildOutput)
   };
@@ -2700,7 +2770,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
       );
     } else {
       const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
-        const hash = hashContentScriptOptions(script.options);
+        const hash = hashContentScriptOptions(script.options, config);
         if (map.has(hash))
           map.get(hash)?.push(script);
         else
@@ -4496,7 +4566,7 @@ async function clean(root = process.cwd()) {
 }
 
 // package.json
-var version2 = "0.7.3";
+var version2 = "0.7.5";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {