wxt 0.20.2 → 0.20.4

package/dist/core/builders/vite/plugins/devHtmlPrerender.mjs

@@ -55,11 +55,11 @@ export function devHtmlPrerender(config, server) {
         const inlineScripts = document.querySelectorAll("script:not([src])");
         inlineScripts.forEach((script) => {
           const textContent = script.textContent ?? "";
-          const textHash = hash(textContent);
-          inlineScriptContents[textHash] = textContent;
+          const key = hash(textContent);
+          inlineScriptContents[key] = textContent;
           const virtualScript = document.createElement("script");
           virtualScript.type = "module";
-          virtualScript.src = `${server.origin}/@id/${virtualInlineScript}?${textHash}`;
+          virtualScript.src = `${server.origin}/@id/${virtualInlineScript}?${key}`;
           script.replaceWith(virtualScript);
         });
         const viteClientScript = document.querySelector(
@@ -76,7 +76,7 @@ export function devHtmlPrerender(config, server) {
       }
     },
     {
-      name: "wxt:virtualize-react-refresh",
+      name: "wxt:virtualize-inline-scripts",
       apply: "serve",
       resolveId(id) {
         if (id.startsWith(virtualInlineScript)) {
@@ -88,8 +88,8 @@ export function devHtmlPrerender(config, server) {
       },
       load(id) {
         if (id.startsWith(resolvedVirtualInlineScript)) {
-          const newHash = hash(id.substring(id.indexOf("?")));
-          return inlineScriptContents[newHash];
+          const key = id.substring(id.indexOf("?") + 1);
+          return inlineScriptContents[key];
         }
         if (id === "\0noop") {
           return "";
@@ -100,6 +100,10 @@ export function devHtmlPrerender(config, server) {
 }
 export function pointToDevServer(config, server, id, document, querySelector, attr) {
   document.querySelectorAll(querySelector).forEach((element) => {
+    if (element.hasAttribute("vite-ignore") || element.hasAttribute("wxt-ignore")) {
+      element.removeAttribute("wxt-ignore");
+      return;
+    }
     const src = element.getAttribute(attr);
     if (!src || isUrl(src)) return;
     let resolvedAbsolutePath;

package/dist/core/generate-wxt-dir.mjs

@@ -40,9 +40,13 @@ async function getPathsDeclarationEntry(entrypoints) {
       wxt.config.outDir,
       isHtmlEntrypoint(entry) ? ".html" : ".js"
     )
-  ).concat([""]).concat(await getPublicFiles());
+  ).concat(await getPublicFiles());
   await wxt.hooks.callHook("prepare:publicPaths", wxt, paths);
-  const unions = paths.map(normalizePath).sort().map((path2) => `    | "/${path2}"`).join("\n");
+  const unions = [
+    `    | ""`,
+    `    | "/"`,
+    ...paths.map(normalizePath).sort().map((path2) => `    | "/${path2}"`)
+  ].join("\n");
   const template = `// Generated by wxt
 import "wxt/browser";
 

package/dist/core/utils/building/find-entrypoints.mjs

@@ -44,7 +44,16 @@ export async function findEntrypoints() {
       results.push({ name, inputPath, type });
     }
     return results;
-  }, []);
+  }, []).filter(({ name, inputPath }, _, entrypointInfos2) => {
+    if (inputPath.endsWith(".html")) return true;
+    const isIndexFile = /index\..+$/.test(inputPath);
+    if (!isIndexFile) return true;
+    const hasIndexHtml = entrypointInfos2.some(
+      (entry) => entry.name === name && entry.inputPath.endsWith("index.html")
+    );
+    if (hasIndexHtml) return false;
+    return true;
+  });
   await wxt.hooks.callHook("entrypoints:found", wxt, entrypointInfos);
   preventNoEntrypoints(entrypointInfos);
   preventDuplicateEntrypointNames(entrypointInfos);

package/dist/core/utils/manifest.mjs

@@ -349,7 +349,13 @@ function discoverIcons(buildOutput) {
   return icons.length > 0 ? Object.fromEntries(icons) : void 0;
 }
 function addDevModeCsp(manifest) {
-  const permission = `${wxt.server?.origin ?? ""}/*`;
+  let permissonUrl = wxt.server?.origin;
+  if (permissonUrl) {
+    const permissionUrlInstance = new URL(permissonUrl);
+    permissionUrlInstance.port = "";
+    permissonUrl = permissionUrlInstance.toString();
+  }
+  const permission = `${permissonUrl}*`;
   const allowedCsp = wxt.server?.origin ?? "http://localhost:*";
   if (manifest.manifest_version === 3) {
     addHostPermission(manifest, permission);

package/dist/core/utils/testing/fake-objects.d.ts

@@ -146,8 +146,8 @@ export declare const fakeManifest: (overrides?: {
         persistent?: boolean | undefined | undefined;
     } | undefined;
     content_security_policy?: string | undefined | undefined;
-    optional_permissions?: (string | undefined)[] | undefined;
-    permissions?: (string | undefined)[] | undefined;
+    optional_permissions?: (string | undefined)[] | (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
+    permissions?: (string | undefined)[] | (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
     web_accessible_resources?: (string | undefined)[] | undefined;
     name?: string | undefined;
     version?: string | undefined;
@@ -379,7 +379,7 @@ export declare const fakeManifest: (overrides?: {
         sandbox?: string | undefined;
     } | undefined;
     host_permissions?: (string | undefined)[] | undefined;
-    optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+    optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
     optional_host_permissions?: (string | undefined)[] | undefined;
     permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
     web_accessible_resources?: ({
@@ -594,7 +594,7 @@ export declare const fakeUserManifest: (overrides?: {
         sandbox?: string | undefined;
     } | undefined;
     host_permissions?: (string | undefined)[] | undefined;
-    optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+    optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
     optional_host_permissions?: (string | undefined)[] | undefined;
     name?: string | undefined;
     version?: string | undefined;
@@ -1061,7 +1061,7 @@ export declare const fakeResolvedConfig: (overrides?: {
             sandbox?: string | undefined;
         } | undefined;
         host_permissions?: (string | undefined)[] | undefined;
-        optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+        optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
         optional_host_permissions?: (string | undefined)[] | undefined;
         name?: string | undefined;
         version?: string | undefined;
@@ -1561,7 +1561,7 @@ export declare const fakeResolvedConfig: (overrides?: {
                         sandbox?: string | undefined;
                     } | undefined;
                     host_permissions?: (string | undefined)[] | undefined;
-                    optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+                    optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
                     optional_host_permissions?: (string | undefined)[] | undefined;
                     name?: string | undefined;
                     version?: string | undefined;
@@ -2328,7 +2328,7 @@ export declare const fakeResolvedConfig: (overrides?: {
                             sandbox?: string | undefined;
                         } | undefined;
                         host_permissions?: (string | undefined)[] | undefined;
-                        optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+                        optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
                         optional_host_permissions?: (string | undefined)[] | undefined;
                         name?: string | undefined;
                         version?: string | undefined;
@@ -3122,7 +3122,7 @@ export declare const fakeResolvedConfig: (overrides?: {
                         sandbox?: string | undefined;
                     } | undefined;
                     host_permissions?: (string | undefined)[] | undefined;
-                    optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+                    optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
                     optional_host_permissions?: (string | undefined)[] | undefined;
                     name?: string | undefined;
                     version?: string | undefined;
@@ -4827,7 +4827,7 @@ export declare const fakeWxt: (overrides?: {
                 sandbox?: string | undefined;
             } | undefined;
             host_permissions?: (string | undefined)[] | undefined;
-            optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+            optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
             optional_host_permissions?: (string | undefined)[] | undefined;
             name?: string | undefined;
             version?: string | undefined;
@@ -5327,7 +5327,7 @@ export declare const fakeWxt: (overrides?: {
                             sandbox?: string | undefined;
                         } | undefined;
                         host_permissions?: (string | undefined)[] | undefined;
-                        optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+                        optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
                         optional_host_permissions?: (string | undefined)[] | undefined;
                         name?: string | undefined;
                         version?: string | undefined;
@@ -6094,7 +6094,7 @@ export declare const fakeWxt: (overrides?: {
                                 sandbox?: string | undefined;
                             } | undefined;
                             host_permissions?: (string | undefined)[] | undefined;
-                            optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+                            optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
                             optional_host_permissions?: (string | undefined)[] | undefined;
                             name?: string | undefined;
                             version?: string | undefined;
@@ -6888,7 +6888,7 @@ export declare const fakeWxt: (overrides?: {
                             sandbox?: string | undefined;
                         } | undefined;
                         host_permissions?: (string | undefined)[] | undefined;
-                        optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+                        optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
                         optional_host_permissions?: (string | undefined)[] | undefined;
                         name?: string | undefined;
                         version?: string | undefined;
@@ -8466,8 +8466,8 @@ export declare const fakeWxt: (overrides?: {
                     persistent?: boolean | undefined | undefined;
                 } | undefined;
                 content_security_policy?: string | undefined | undefined;
-                optional_permissions?: (string | undefined)[] | undefined;
-                permissions?: (string | undefined)[] | undefined;
+                optional_permissions?: (string | undefined)[] | (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
+                permissions?: (string | undefined)[] | (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
                 web_accessible_resources?: (string | undefined)[] | undefined;
                 name?: string | undefined;
                 version?: string | undefined;
@@ -8699,7 +8699,7 @@ export declare const fakeWxt: (overrides?: {
                     sandbox?: string | undefined;
                 } | undefined;
                 host_permissions?: (string | undefined)[] | undefined;
-                optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+                optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
                 optional_host_permissions?: (string | undefined)[] | undefined;
                 permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
                 web_accessible_resources?: ({
@@ -9218,8 +9218,8 @@ export declare const fakeWxtDevServer: (overrides?: {
                 persistent?: boolean | undefined | undefined;
             } | undefined;
             content_security_policy?: string | undefined | undefined;
-            optional_permissions?: (string | undefined)[] | undefined;
-            permissions?: (string | undefined)[] | undefined;
+            optional_permissions?: (string | undefined)[] | (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
+            permissions?: (string | undefined)[] | (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
             web_accessible_resources?: (string | undefined)[] | undefined;
             name?: string | undefined;
             version?: string | undefined;
@@ -9451,7 +9451,7 @@ export declare const fakeWxtDevServer: (overrides?: {
                 sandbox?: string | undefined;
             } | undefined;
             host_permissions?: (string | undefined)[] | undefined;
-            optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+            optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
             optional_host_permissions?: (string | undefined)[] | undefined;
             permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
             web_accessible_resources?: ({
@@ -9961,8 +9961,8 @@ export declare const fakeBuildOutput: (overrides?: {
             persistent?: boolean | undefined | undefined;
         } | undefined;
         content_security_policy?: string | undefined | undefined;
-        optional_permissions?: (string | undefined)[] | undefined;
-        permissions?: (string | undefined)[] | undefined;
+        optional_permissions?: (string | undefined)[] | (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
+        permissions?: (string | undefined)[] | (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
         web_accessible_resources?: (string | undefined)[] | undefined;
         name?: string | undefined;
         version?: string | undefined;
@@ -10194,7 +10194,7 @@ export declare const fakeBuildOutput: (overrides?: {
             sandbox?: string | undefined;
         } | undefined;
         host_permissions?: (string | undefined)[] | undefined;
-        optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+        optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
         optional_host_permissions?: (string | undefined)[] | undefined;
         permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
         web_accessible_resources?: ({
@@ -10799,8 +10799,8 @@ export declare const fakeDevServer: (overrides?: {
                 persistent?: boolean | undefined | undefined;
             } | undefined;
             content_security_policy?: string | undefined | undefined;
-            optional_permissions?: (string | undefined)[] | undefined;
-            permissions?: (string | undefined)[] | undefined;
+            optional_permissions?: (string | undefined)[] | (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
+            permissions?: (string | undefined)[] | (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
             web_accessible_resources?: (string | undefined)[] | undefined;
             name?: string | undefined;
             version?: string | undefined;
@@ -11032,7 +11032,7 @@ export declare const fakeDevServer: (overrides?: {
                 sandbox?: string | undefined;
             } | undefined;
             host_permissions?: (string | undefined)[] | undefined;
-            optional_permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
+            optional_permissions?: (Browser.runtime.ManifestOptionalPermissions | undefined)[] | undefined;
             optional_host_permissions?: (string | undefined)[] | undefined;
             permissions?: (Browser.runtime.ManifestPermissions | undefined)[] | undefined;
             web_accessible_resources?: ({

package/dist/core/zip.mjs

@@ -17,13 +17,12 @@ export async function zip(config) {
   const start = Date.now();
   wxt.logger.info("Zipping extension...");
   const zipFiles = [];
-  const projectName = wxt.config.zip.name ?? safeFilename(
-    (await getPackageJson())?.name || path.basename(process.cwd())
-  );
+  const packageJson = await getPackageJson();
+  const projectName = wxt.config.zip.name ?? safeFilename(packageJson?.name || path.basename(process.cwd()));
   const applyTemplate = (template) => template.replaceAll("{{name}}", projectName).replaceAll("{{browser}}", wxt.config.browser).replaceAll(
     "{{version}}",
     output.manifest.version_name ?? output.manifest.version
-  ).replaceAll("{{mode}}", wxt.config.mode).replaceAll("{{manifestVersion}}", `mv${wxt.config.manifestVersion}`);
+  ).replaceAll("{{packageVersion}}", packageJson?.version).replaceAll("{{mode}}", wxt.config.mode).replaceAll("{{manifestVersion}}", `mv${wxt.config.manifestVersion}`);
   await fs.ensureDir(wxt.config.outBaseDir);
   await wxt.hooks.callHook("zip:extension:start", wxt);
   const outZipFilename = applyTemplate(wxt.config.zip.artifactTemplate);

package/dist/types.d.ts

@@ -146,6 +146,7 @@ export interface InlineConfig {
          *
          * - <span v-pre>`{{name}}`</span> - The project's name converted to kebab-case
          * - <span v-pre>`{{version}}`</span> - The version_name or version from the manifest
+         * - <span v-pre>`{{packageVersion}}`</span> - The version from the package.json
          * - <span v-pre>`{{browser}}`</span> - The target browser from the `--browser` CLI flag
          * - <span v-pre>`{{mode}}`</span> - The current mode
          * - <span v-pre>`{{manifestVersion}}`</span> - Either "2" or "3"
@@ -170,6 +171,7 @@ export interface InlineConfig {
          *
          * - <span v-pre>`{{name}}`</span> - The project's name converted to kebab-case
          * - <span v-pre>`{{version}}`</span> - The version_name or version from the manifest
+         * - <span v-pre>`{{packageVersion}}`</span> - The version from the package.json
          * - <span v-pre>`{{browser}}`</span> - The target browser from the `--browser` CLI flag
          * - <span v-pre>`{{mode}}`</span> - The current mode
          * - <span v-pre>`{{manifestVersion}}`</span> - Either "2" or "3"

package/dist/utils/content-script-ui/shadow-root.mjs

@@ -2,7 +2,9 @@ import { browser } from "wxt/browser";
 import { createIsolatedElement } from "@webext-core/isolated-element";
 import { applyPosition, createMountFunctions, mountUi } from "./shared.mjs";
 import { logger } from "../internal/logger.mjs";
+import { splitShadowRootCss } from "../split-shadow-root-css.mjs";
 export async function createShadowRootUi(ctx, options) {
+  const instanceId = crypto.randomUUID();
   const css = [];
   if (!options.inheritStyles) {
     css.push(`/* WXT Shadow Root Reset */ body{all:initial;}`);
@@ -14,6 +16,7 @@ export async function createShadowRootUi(ctx, options) {
     const entryCss = await loadCss();
     css.push(entryCss.replaceAll(":root", ":host"));
   }
+  const { shadowCss, documentCss } = splitShadowRootCss(css.join("\n").trim());
   const {
     isolatedElement: uiContainer,
     parentElement: shadowHost,
@@ -21,7 +24,7 @@ export async function createShadowRootUi(ctx, options) {
   } = await createIsolatedElement({
     name: options.name,
     css: {
-      textContent: css.join("\n").trim()
+      textContent: shadowCss
     },
     mode: options.mode ?? "open",
     isolateEvents: options.isolateEvents
@@ -31,11 +34,23 @@ export async function createShadowRootUi(ctx, options) {
   const mount = () => {
     mountUi(shadowHost, options);
     applyPosition(shadowHost, shadow.querySelector("html"), options);
+    if (documentCss && !document.querySelector(
+      `style[wxt-shadow-root-document-styles="${instanceId}"]`
+    )) {
+      const style = document.createElement("style");
+      style.textContent = documentCss;
+      style.setAttribute("wxt-shadow-root-document-styles", instanceId);
+      (document.head ?? document.body).append(style);
+    }
     mounted = options.onMount(uiContainer, shadow, shadowHost);
   };
   const remove = () => {
     options.onRemove?.(mounted);
     shadowHost.remove();
+    const documentStyle = document.querySelector(
+      `style[wxt-shadow-root-document-styles="${instanceId}"]`
+    );
+    documentStyle?.remove();
     while (uiContainer.lastChild)
       uiContainer.removeChild(uiContainer.lastChild);
     mounted = void 0;

package/dist/utils/content-script-ui/types.d.ts

@@ -6,6 +6,9 @@ export type ContentScriptUiOptions<TMounted> = ContentScriptPositioningOptions &
     /**
      * Callback called before the UI is removed from the webpage. Use to cleanup your UI, like
      * unmounting your Vue or React apps.
+     *
+     * Note that this callback is called only when `ui.remove` is called - that means it is
+     * not called automatically when the anchor is removed, unless you use `autoMount`.
      */
     onRemove?: (mounted: TMounted | undefined) => void;
 };

package/dist/utils/split-shadow-root-css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Given a CSS string that will be loaded into a shadow root, split it into two parts:
+ * - `documentCss`: CSS that needs to be applied to the document (like `@property`)
+ * - `shadowCss`: CSS that needs to be applied to the shadow root
+ * @param css
+ */
+export declare function splitShadowRootCss(css: string): {
+    documentCss: string;
+    shadowCss: string;
+};

package/dist/utils/split-shadow-root-css.mjs

@@ -0,0 +1,14 @@
+export function splitShadowRootCss(css) {
+  let shadowCss = css;
+  let documentCss = "";
+  const rulesRegex = /(\s*@property[\s\S]*?{[\s\S]*?})/gm;
+  let match;
+  while ((match = rulesRegex.exec(css)) !== null) {
+    documentCss += match[1];
+    shadowCss = shadowCss.replace(match[1], "");
+  }
+  return {
+    documentCss: documentCss.trim(),
+    shadowCss: shadowCss.trim()
+  };
+}

package/dist/version.mjs

@@ -1 +1 @@
-export const version = "0.20.2";
+export const version = "0.20.4";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.20.2",
+  "version": "0.20.4",
   "description": "⚡ Next-gen Web Extension Framework",
   "license": "MIT",
   "dependencies": {
@@ -49,7 +49,7 @@
     "vite": "^5.4.17 || ^6.2.5",
     "vite-node": "^2.1.4 || ^3.0.0",
     "web-ext-run": "^0.2.2",
-    "@wxt-dev/browser": "0.0.315"
+    "@wxt-dev/browser": "0.0.317"
   },
   "devDependencies": {
     "@aklinker1/check": "^1.4.5",
@@ -156,6 +156,10 @@
       "types": "./dist/utils/match-patterns.d.ts",
       "default": "./dist/utils/match-patterns.mjs"
     },
+    "./utils/split-shadow-root-css": {
+      "types": "./dist/utils/split-shadow-root-css.d.ts",
+      "default": "./dist/utils/split-shadow-root-css.mjs"
+    },
     "./utils/storage": {
       "types": "./dist/utils/storage.d.ts",
       "default": "./dist/utils/storage.mjs"