wxt 0.13.4 → 0.14.0

package/dist/{chunk-DHQJ6WF5.js → chunk-4BYWUUR2.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "0.13.4";
+var version = "0.14.0";
 
 // src/core/utils/arrays.ts
 function every(array, predicate) {
@@ -2108,7 +2108,10 @@ function getContentScriptCssWebAccessibleResources(config, contentScripts, conte
     } else {
       resources.push({
         resources: [cssFile],
-        matches: script.options.matches
+        matches: resolvePerBrowserOption(
+          script.options.matches,
+          config.browser
+        ).map((matchPattern) => stripPathFromMatchPattern(matchPattern))
       });
     }
   });
@@ -2138,6 +2141,13 @@ function addHostPermission(manifest, hostPermission) {
     return;
   manifest.host_permissions.push(hostPermission);
 }
+function stripPathFromMatchPattern(pattern) {
+  const protocolSepIndex = pattern.indexOf("://");
+  if (protocolSepIndex === -1)
+    return pattern;
+  const startOfPath = pattern.indexOf("/", protocolSepIndex + 3);
+  return pattern.substring(0, startOfPath) + "/*";
+}
 
 // src/core/utils/building/rebuild.ts
 async function rebuild(config, entrypointGroups, existingOutput = {

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/cli.js

@@ -4,7 +4,7 @@ import "./chunk-VBXJIVYU.js";
 import cac from "cac";
 
 // package.json
-var version = "0.13.4";
+var version = "0.14.0";
 
 // src/core/utils/fs.ts
 import fs from "fs-extra";
@@ -2405,7 +2405,10 @@ function getContentScriptCssWebAccessibleResources(config, contentScripts, conte
     } else {
       resources.push({
         resources: [cssFile],
-        matches: script.options.matches
+        matches: resolvePerBrowserOption(
+          script.options.matches,
+          config.browser
+        ).map((matchPattern) => stripPathFromMatchPattern(matchPattern))
       });
     }
   });
@@ -2435,6 +2438,13 @@ function addHostPermission(manifest, hostPermission) {
     return;
   manifest.host_permissions.push(hostPermission);
 }
+function stripPathFromMatchPattern(pattern) {
+  const protocolSepIndex = pattern.indexOf("://");
+  if (protocolSepIndex === -1)
+    return pattern;
+  const startOfPath = pattern.indexOf("/", protocolSepIndex + 3);
+  return pattern.substring(0, startOfPath) + "/*";
+}
 
 // src/core/utils/building/rebuild.ts
 async function rebuild(config, entrypointGroups, existingOutput = {

package/dist/client.d.ts

@@ -1,95 +1,23 @@
 import { a as ContentScriptContext } from './external-TYmXqKVq.js';
-import * as wxt_browser from 'wxt/browser';
 import 'webextension-polyfill';
 
-type ContentScriptOverlayAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-/**
- * ![Visualization of different append modes](https://wxt.dev/content-script-ui-append.png)
- */
-type ContentScriptAppendMode = 'last' | 'first' | 'replace' | 'before' | 'after' | ((anchor: Element, ui: Element) => void);
-interface ContentScriptInlinePositioningOptions {
-    type: 'inline';
-}
-interface ContentScriptOverlayPositioningOptions {
-    type: 'overlay';
-    /**
-     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
-     * content.
-     */
-    zIndex?: number;
+interface IntegratedContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
     /**
-     * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
-     * which corner is aligned with that 0x0 pixel space.
-     *
-     * ![Visualization of alignment options](https://wxt.dev/content-script-ui-alignment.png)
-     *
-     * @default "top-left"
-     */
-    alignment?: ContentScriptOverlayAlignment;
-}
-interface ContentScriptModalPositioningOptions {
-    type: 'modal';
-    /**
-     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
-     * content.
+     * A wrapper div that assists in positioning.
      */
-    zIndex?: number;
+    wrapper: HTMLElement;
 }
-/**
- * Choose between `"inline"`, `"overlay"`, or `"modal" `types.
- *
- * ![Visualization of different types](https://wxt.dev/content-script-ui-type.png)
- */
-type ContentScriptPositioningOptions = ContentScriptInlinePositioningOptions | ContentScriptOverlayPositioningOptions | ContentScriptModalPositioningOptions;
-interface ContentScriptAnchoredOptions {
+interface IframeContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
     /**
-     * A CSS selector, element, or function that returns one of the two. Along with `append`, the
-     * `anchor` dictates where in the page the UI will be added.
+     * The iframe added to the DOM.
      */
-    anchor?: string | Element | null | undefined | (() => string | Element | null | undefined);
+    iframe: HTMLIFrameElement;
     /**
-     * In combination with `anchor`, decide how to add the UI to the DOM.
-     *
-     * - `"last"` (default) - Add the UI as the last child of the `anchor` element
-     * - `"first"` - Add the UI as the last child of the `anchor` element
-     * - `"replace"` - Replace the `anchor` element with the UI.
-     * - `"before"` - Add the UI as the sibling before the `anchor` element
-     * - `"after"` - Add the UI as the sibling after the `anchor` element
-     * - `(anchor, ui) => void` - Customizable function that let's you add the UI to the DOM
+     * A wrapper div that assists in positioning.
      */
-    append?: ContentScriptAppendMode | ((anchor: Element, ui: Element) => void);
+    wrapper: HTMLDivElement;
 }
-
-/**
- * Utility for mounting content script UI's with isolated styles and controlled event bubbling.
- * Automatically removed from the DOM when the content script's context is invalidated.
- *
- * See https://wxt.dev/guide/content-script-ui.html for full documentation.
- *
- * @example
- * // entrypoints/example-ui.content/index.ts
- * import "./style.css"
- *
- * export default defineContentScript({
- *   matches: ["*://*.google.com/*"],
- *   cssInjectionMode: "ui",
- *
- *   async main(ctx) {
- *     const ui = await createContentScriptUi(ctx, {
- *       name: "example-overlay",
- *       type: "modal",
- *       mount(container) {
- *         const app = document.createElement("div");
- *         app.textContent = "Content Script UI";
- *         container.append(app);
- *       },
- *     })
- *     ui.mount();
- *   }
- * })
- */
-declare function createContentScriptUi<TApp>(ctx: ContentScriptContext, options: ContentScriptUiOptions<TApp>): Promise<ContentScriptUi<TApp>>;
-interface ContentScriptUi<TApp> {
+interface ShadowRootContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
     /**
      * The `HTMLElement` hosting the shadow root used to isolate the UI's styles. This is the element
      * that get's added to the DOM. This element's style is not isolated from the webpage.
@@ -104,10 +32,8 @@ interface ContentScriptUi<TApp> {
      * The shadow root performing the isolation.
      */
     shadow: ShadowRoot;
-    /**
-     * Custom data returned from the `options.mount` function.
-     */
-    mounted: TApp;
+}
+interface ContentScriptUi<TMounted> {
     /**
      * Function that mounts or remounts the UI on the page.
      */
@@ -116,32 +42,65 @@ interface ContentScriptUi<TApp> {
      * Function that removes the UI from the webpage.
      */
     remove: () => void;
+    /**>
+     * Custom data returned from the `options.mount` function.
+     */
+    mounted: TMounted | undefined;
 }
-type ContentScriptUiOptions<TApp> = ContentScriptPositioningOptions & ContentScriptAnchoredOptions & {
+type ContentScriptUiOptions<TMounted> = ContentScriptPositioningOptions & ContentScriptAnchoredOptions & {
     /**
-     * The name of the custom component used to host the ShadowRoot. Must be kebab-case.
+     * Callback called before the UI is removed from the webpage. Use to cleanup your UI, like
+     * unmounting your Vue or React apps.
      */
-    name: string;
+    onRemove?: (mounted: TMounted | undefined) => void;
+};
+type IntegratedContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+    /**
+     * Tag used to create the wrapper element.
+     *
+     * @default "div"
+     */
+    tag?: string;
     /**
      * Callback executed when mounting the UI. This function should create and append the UI to the
-     * `container` element. It is called every time `ui.mount()` is called
+     * `wrapper` element. It is called every time `ui.mount()` is called.
      *
      * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
      */
-    mount: (container: Element) => TApp;
+    onMount: (wrapper: HTMLElement) => TMounted;
+};
+type IframeContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
     /**
-     * Callback called when the UI is removed from the webpage. Use to cleanup your UI, like
-     * unmounting your vue or react apps.
+     * The path to the HTML page that will be shown in the iframe. This string is passed into
+     * `browser.runtime.getURL`.
      */
-    onRemove?: (mounted: TApp) => void;
+    page: PublicPath;
+    /**
+     * Callback executed when mounting the UI. Use this function to customize the iframe or wrapper
+     * element's appearance. It is called every time `ui.mount()` is called.
+     *
+     * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
+     */
+    onMount?: (wrapper: HTMLElement, iframe: HTMLIFrameElement) => TMounted;
+};
+type ShadowRootContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+    /**
+     * The name of the custom component used to host the ShadowRoot. Must be kebab-case.
+     */
+    name: string;
     /**
      * Custom CSS text to apply to the UI. If your content script imports/generates CSS and you've
      * set `cssInjectionMode: "ui"`, the imported CSS will be included automatically. You do not need
      * to pass those styles in here. This is for any additional styles not in the imported CSS.
-     *
-     * See https://wxt.dev/guide/content-script-ui.html for more info.
      */
     css?: string;
+    /**
+     * ShadowRoot's mode.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode
+     * @default "open"
+     */
+    mode?: 'open' | 'closed';
     /**
      * When enabled, `event.stopPropagation` will be called on events trying to bubble out of the
      * shadow root.
@@ -151,51 +110,91 @@ type ContentScriptUiOptions<TApp> = ContentScriptPositioningOptions & ContentScr
      * - Set to an array of event names to stop the propagation of a custom list of events
      */
     isolateEvents?: boolean | string[];
+    /**
+     * Callback executed when mounting the UI. This function should create and append the UI to the
+     * `uiContainer` element. It is called every time `ui.mount()` is called.
+     *
+     * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
+     */
+    onMount: (uiContainer: HTMLElement, shadow: ShadowRoot, shadowHost: HTMLElement) => TMounted;
 };
-
+type ContentScriptOverlayAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 /**
- * Utility for mounting a content script UI inside an iframe. Automatically removed from the DOM
- * when the content script's context is invalidated.
- *
- * See https://wxt.dev/entrypoints/content-scripts.html#iframe for full documentation.
- *
- * @example
- * export default defineContentScript({
- *   matches: ["*://*.google.com/*"],
- *
- *   main(ctx) {
- *     const ui = await createContentScriptIframe(ctx, {
- *       page: "/content-script-overlay.html",
- *       type: "modal",
- *     })
- *     ui.mount();
- *   }
- * })
+ * ![Visualization of different append modes](https://wxt.dev/content-script-ui-append.png)
  */
-declare function createContentScriptIframe(ctx: ContentScriptContext, options: ContentScriptIframeOptions): ContentScriptIframe;
-interface ContentScriptIframe {
+type ContentScriptAppendMode = 'last' | 'first' | 'replace' | 'before' | 'after' | ((anchor: Element, ui: Element) => void);
+interface ContentScriptInlinePositioningOptions {
+    position: 'inline';
+}
+interface ContentScriptOverlayPositioningOptions {
+    position: 'overlay';
     /**
-     * The iframe added to the DOM.
+     * The `z-index` used on the `wrapper` element. Set to a positive number to show your UI over website
+     * content.
      */
-    iframe: HTMLIFrameElement;
+    zIndex?: number;
     /**
-     * A wrapper div that assists in positioning.
+     * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
+     * which corner is aligned with that 0x0 pixel space.
+     *
+     * ![Visualization of alignment options](https://wxt.dev/content-script-ui-alignment.png)
+     *
+     * @default "top-left"
      */
-    wrapper: HTMLDivElement;
+    alignment?: ContentScriptOverlayAlignment;
+}
+interface ContentScriptModalPositioningOptions {
+    position: 'modal';
     /**
-     * Function that mounts or remounts the UI on the page.
+     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
+     * content.
      */
-    mount: () => void;
+    zIndex?: number;
+}
+/**
+ * Choose between `"inline"`, `"overlay"`, or `"modal" `types.
+ *
+ * ![Visualization of different types](https://wxt.dev/content-script-ui-type.png)
+ */
+type ContentScriptPositioningOptions = ContentScriptInlinePositioningOptions | ContentScriptOverlayPositioningOptions | ContentScriptModalPositioningOptions;
+interface ContentScriptAnchoredOptions {
     /**
-     * Function that removes the UI from the webpage.
+     * A CSS selector, element, or function that returns one of the two. Along with `append`, the
+     * `anchor` dictates where in the page the UI will be added.
      */
-    remove: () => void;
-}
-type ContentScriptIframeOptions = ContentScriptPositioningOptions & ContentScriptAnchoredOptions & {
+    anchor?: string | Element | null | undefined | (() => string | Element | null | undefined);
     /**
-     * The path to the unlisted HTML file to display in the iframe.
+     * In combination with `anchor`, decide how to add the UI to the DOM.
+     *
+     * - `"last"` (default) - Add the UI as the last child of the `anchor` element
+     * - `"first"` - Add the UI as the last child of the `anchor` element
+     * - `"replace"` - Replace the `anchor` element with the UI.
+     * - `"before"` - Add the UI as the sibling before the `anchor` element
+     * - `"after"` - Add the UI as the sibling after the `anchor` element
+     * - `(anchor, ui) => void` - Customizable function that let's you add the UI to the DOM
      */
-    page: wxt_browser.PublicPath;
-};
+    append?: ContentScriptAppendMode | ((anchor: Element, ui: Element) => void);
+}
+
+/**
+ * Create a content script UI without any isolation.
+ *
+ * @see https://wxt.dev/guide/content-script-ui.html#integrated
+ */
+declare function createIntegratedUi<TMounted>(ctx: ContentScriptContext, options: IntegratedContentScriptUiOptions<TMounted>): IntegratedContentScriptUi<TMounted>;
+/**
+ * Create a content script UI using an iframe.
+ *
+ * @see https://wxt.dev/guide/content-script-ui.html#iframe
+ */
+declare function createIframeUi<TMounted>(ctx: ContentScriptContext, options: IframeContentScriptUiOptions<TMounted>): IframeContentScriptUi<TMounted>;
+/**
+ * Create a content script UI inside a [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot).
+ *
+ * > This function is async because it has to load the CSS via a network call.
+ *
+ * @see https://wxt.dev/guide/content-script-ui.html#shadowroot
+ */
+declare function createShadowRootUi<TMounted>(ctx: ContentScriptContext, options: ShadowRootContentScriptUiOptions<TMounted>): Promise<ShadowRootContentScriptUi<TMounted>>;
 
-export { type ContentScriptAnchoredOptions, type ContentScriptAppendMode, ContentScriptContext, type ContentScriptIframe, type ContentScriptIframeOptions, type ContentScriptInlinePositioningOptions, type ContentScriptModalPositioningOptions, type ContentScriptOverlayAlignment, type ContentScriptOverlayPositioningOptions, type ContentScriptPositioningOptions, type ContentScriptUi, type ContentScriptUiOptions, createContentScriptIframe, createContentScriptUi };
+export { type ContentScriptAnchoredOptions, type ContentScriptAppendMode, ContentScriptContext, type ContentScriptInlinePositioningOptions, type ContentScriptModalPositioningOptions, type ContentScriptOverlayAlignment, type ContentScriptOverlayPositioningOptions, type ContentScriptPositioningOptions, type ContentScriptUi, type ContentScriptUiOptions, type IframeContentScriptUi, type IframeContentScriptUiOptions, type IntegratedContentScriptUi, type IntegratedContentScriptUiOptions, type ShadowRootContentScriptUi, type ShadowRootContentScriptUiOptions, createIframeUi, createIntegratedUi, createShadowRootUi };

package/dist/client.js

@@ -230,86 +230,59 @@ var ContentScriptContext = class _ContentScriptContext {
   }
 };
 
-// src/client/content-scripts/content-script-ui.ts
+// src/client/content-scripts/ui/index.ts
 import { createIsolatedElement } from "@webext-core/isolated-element";
-
-// src/client/utils/content-script-ui.ts
-function mountContentScriptUiRoot(root, options) {
-  const anchor = getAnchor(options);
-  if (anchor == null)
-    throw Error(
-      "Failed to mount content script UI: could not find anchor element"
-    );
-  switch (options.append) {
-    case void 0:
-    case "last":
-      anchor.append(root);
-      break;
-    case "first":
-      if (anchor.firstChild) {
-        anchor.insertBefore(root, anchor.firstChild);
-      } else {
-        anchor.append(root);
-      }
-      break;
-    case "replace":
-      anchor.replaceWith(root);
-      break;
-    case "after":
-      anchor.replaceWith(anchor, root);
-      break;
-    case "before":
-      anchor.replaceWith(root, anchor);
-      break;
-    default:
-      options.append(anchor, root);
-      break;
-  }
-}
-function applyContentScriptUiPosition(root, positionedElement, options) {
-  if (options.type !== "inline") {
-    if (options.zIndex != null)
-      root.style.zIndex = String(options.zIndex);
-    root.style.overflow = "visible";
-    root.style.position = "relative";
-    root.style.width = "0";
-    root.style.height = "0";
-    root.style.display = "block";
-    if (positionedElement) {
-      if (options.type === "overlay") {
-        positionedElement.style.position = "absolute";
-        if (options.alignment?.startsWith("bottom-"))
-          positionedElement.style.bottom = "0";
-        else
-          positionedElement.style.top = "0";
-        if (options.alignment?.endsWith("-right"))
-          positionedElement.style.right = "0";
-        else
-          positionedElement.style.left = "0";
-      } else {
-        positionedElement.style.position = "fixed";
-        positionedElement.style.top = "0";
-        positionedElement.style.bottom = "0";
-        positionedElement.style.left = "0";
-        positionedElement.style.right = "0";
-      }
-    }
-  }
+function createIntegratedUi(ctx, options) {
+  const wrapper = document.createElement(options.tag || "div");
+  wrapper.setAttribute("data-wxt-integrated", "");
+  let mounted = void 0;
+  const mount = () => {
+    applyPosition(wrapper, void 0, options);
+    mountUi(wrapper, options);
+    mounted = options.onMount?.(wrapper);
+  };
+  const remove = () => {
+    options.onRemove?.(mounted);
+    wrapper.remove();
+  };
+  ctx.onInvalidated(remove);
+  return {
+    mounted,
+    wrapper,
+    mount,
+    remove
+  };
 }
-function getAnchor(options) {
-  if (options.anchor == null)
-    return document.body;
-  let resolved = typeof options.anchor === "function" ? options.anchor() : options.anchor;
-  if (typeof resolved === "string")
-    return document.querySelector(resolved) ?? void 0;
-  return resolved ?? void 0;
+function createIframeUi(ctx, options) {
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute("data-wxt-iframe", "");
+  const iframe = document.createElement("iframe");
+  iframe.src = browser.runtime.getURL(options.page);
+  wrapper.appendChild(iframe);
+  let mounted = void 0;
+  const mount = () => {
+    applyPosition(wrapper, iframe, options);
+    mountUi(wrapper, options);
+    mounted = options.onMount?.(wrapper, iframe);
+  };
+  const remove = () => {
+    options.onRemove?.(mounted);
+    wrapper.remove();
+  };
+  ctx.onInvalidated(remove);
+  return {
+    mounted,
+    iframe,
+    wrapper,
+    mount,
+    remove
+  };
 }
-
-// src/client/content-scripts/content-script-ui.ts
-async function createContentScriptUi(ctx, options) {
+async function createShadowRootUi(ctx, options) {
   const css = [options.css ?? ""];
   if (ctx.options?.cssInjectionMode === "ui") {
-    css.push(await loadCss());
+    const entryCss = await loadCss();
+    css.push(entryCss.replaceAll(":root", ":host"));
   }
   const {
     isolatedElement: uiContainer,
@@ -320,18 +293,15 @@ async function createContentScriptUi(ctx, options) {
     css: {
       textContent: css.join("\n").trim()
     },
-    mode: "open",
+    mode: options.mode ?? "open",
     isolateEvents: options.isolateEvents
   });
+  shadowHost.setAttribute("data-wxt-shadow-root", "");
   let mounted;
   const mount = () => {
-    mounted = options.mount(uiContainer);
-    mountContentScriptUiRoot(shadowHost, options);
-    applyContentScriptUiPosition(
-      shadowHost,
-      shadow.querySelector("html"),
-      options
-    );
+    mounted = options.onMount(uiContainer, shadow, shadowHost);
+    mountUi(shadowHost, options);
+    applyPosition(shadowHost, shadow.querySelector("html"), options);
   };
   const remove = () => {
     shadowHost.remove();
@@ -349,12 +319,81 @@ async function createContentScriptUi(ctx, options) {
     mounted
   };
 }
+function applyPosition(root, positionedElement, options) {
+  if (options.position === "inline")
+    return;
+  if (options.zIndex != null)
+    root.style.zIndex = String(options.zIndex);
+  root.style.overflow = "visible";
+  root.style.position = "relative";
+  root.style.width = "0";
+  root.style.height = "0";
+  root.style.display = "block";
+  if (positionedElement) {
+    if (options.position === "overlay") {
+      positionedElement.style.position = "absolute";
+      if (options.alignment?.startsWith("bottom-"))
+        positionedElement.style.bottom = "0";
+      else
+        positionedElement.style.top = "0";
+      if (options.alignment?.endsWith("-right"))
+        positionedElement.style.right = "0";
+      else
+        positionedElement.style.left = "0";
+    } else {
+      positionedElement.style.position = "fixed";
+      positionedElement.style.top = "0";
+      positionedElement.style.bottom = "0";
+      positionedElement.style.left = "0";
+      positionedElement.style.right = "0";
+    }
+  }
+}
+function getAnchor(options) {
+  if (options.anchor == null)
+    return document.body;
+  let resolved = typeof options.anchor === "function" ? options.anchor() : options.anchor;
+  if (typeof resolved === "string")
+    return document.querySelector(resolved) ?? void 0;
+  return resolved ?? void 0;
+}
+function mountUi(root, options) {
+  const anchor = getAnchor(options);
+  if (anchor == null)
+    throw Error(
+      "Failed to mount content script UI: could not find anchor element"
+    );
+  switch (options.append) {
+    case void 0:
+    case "last":
+      anchor.append(root);
+      break;
+    case "first":
+      if (anchor.firstChild) {
+        anchor.insertBefore(root, anchor.firstChild);
+      } else {
+        anchor.append(root);
+      }
+      break;
+    case "replace":
+      anchor.replaceWith(root);
+      break;
+    case "after":
+      anchor.replaceWith(anchor, root);
+      break;
+    case "before":
+      anchor.replaceWith(root, anchor);
+      break;
+    default:
+      options.append(anchor, root);
+      break;
+  }
+}
 async function loadCss() {
   const url = browser.runtime.getURL(`/content-scripts/${__ENTRYPOINT__}.css`);
   try {
     const res = await fetch(url);
-    const css = await res.text();
-    return css.replaceAll(":root", ":host");
+    return await res.text();
   } catch (err) {
     logger.warn(
       `Failed to load styles @ ${url}. Did you forget to import the stylesheet in your entrypoint?`,
@@ -363,31 +402,9 @@ async function loadCss() {
     return "";
   }
 }
-
-// src/client/content-scripts/content-script-iframe.ts
-function createContentScriptIframe(ctx, options) {
-  const wrapper = document.createElement("div");
-  wrapper.classList.add("wxt-iframe-wrapper");
-  const iframe = document.createElement("iframe");
-  iframe.src = browser.runtime.getURL(options.page);
-  wrapper.appendChild(iframe);
-  const mount = () => {
-    applyContentScriptUiPosition(wrapper, iframe, options);
-    mountContentScriptUiRoot(wrapper, options);
-  };
-  const remove = () => {
-    wrapper.remove();
-  };
-  ctx.onInvalidated(remove);
-  return {
-    iframe,
-    wrapper,
-    mount,
-    remove
-  };
-}
 export {
   ContentScriptContext,
-  createContentScriptIframe,
-  createContentScriptUi
+  createIframeUi,
+  createIntegratedUi,
+  createShadowRootUi
 };

package/dist/index.cjs

@@ -4337,7 +4337,7 @@ function getChunkSortWeight(filename) {
 var import_picocolors3 = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "0.13.4";
+var version = "0.14.0";
 
 // src/core/utils/log/printHeader.ts
 var import_consola2 = require("consola");
@@ -4831,7 +4831,10 @@ function getContentScriptCssWebAccessibleResources(config, contentScripts, conte
     } else {
       resources.push({
         resources: [cssFile],
-        matches: script.options.matches
+        matches: resolvePerBrowserOption(
+          script.options.matches,
+          config.browser
+        ).map((matchPattern) => stripPathFromMatchPattern(matchPattern))
       });
     }
   });
@@ -4861,6 +4864,13 @@ function addHostPermission(manifest, hostPermission) {
     return;
   manifest.host_permissions.push(hostPermission);
 }
+function stripPathFromMatchPattern(pattern) {
+  const protocolSepIndex = pattern.indexOf("://");
+  if (protocolSepIndex === -1)
+    return pattern;
+  const startOfPath = pattern.indexOf("/", protocolSepIndex + 3);
+  return pattern.substring(0, startOfPath) + "/*";
+}
 
 // src/core/utils/building/rebuild.ts
 async function rebuild(config, entrypointGroups, existingOutput = {

package/dist/index.d.cts

@@ -62,6 +62,6 @@ declare function prepare(config: InlineConfig): Promise<void>;
  */
 declare function zip(config?: InlineConfig): Promise<string[]>;
 
-var version = "0.13.4";
+var version = "0.14.0";
 
 export { BuildOutput, ExtensionRunnerConfig, InlineConfig, UserConfig, WxtDevServer, build, clean, createServer, defineConfig, defineRunnerConfig, initialize, prepare, version, zip };

package/dist/index.d.ts

@@ -62,6 +62,6 @@ declare function prepare(config: InlineConfig): Promise<void>;
  */
 declare function zip(config?: InlineConfig): Promise<string[]>;
 
-var version = "0.13.4";
+var version = "0.14.0";
 
 export { BuildOutput, ExtensionRunnerConfig, InlineConfig, UserConfig, WxtDevServer, build, clean, createServer, defineConfig, defineRunnerConfig, initialize, prepare, version, zip };

package/dist/index.js

@@ -15,7 +15,7 @@ import {
   rebuild,
   resolvePerBrowserOption,
   version
-} from "./chunk-DHQJ6WF5.js";
+} from "./chunk-4BYWUUR2.js";
 import "./chunk-VBXJIVYU.js";
 
 // src/core/build.ts

package/dist/testing.js

@@ -5,7 +5,7 @@ import {
   tsconfigPaths,
   unimport,
   webextensionPolyfillMock
-} from "./chunk-DHQJ6WF5.js";
+} from "./chunk-4BYWUUR2.js";
 import "./chunk-VBXJIVYU.js";
 
 // src/testing/fake-browser.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.13.4",
+  "version": "0.14.0",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",