wxt 0.8.6 → 0.8.7

package/dist/client.d.ts

@@ -1,9 +1,55 @@
 import { B as BackgroundDefinition, C as ContentScriptContext, a as ContentScriptDefinition } from './external-9107db91.js';
+import * as wxt_browser from 'wxt/browser';
 import 'webextension-polyfill';
 
 declare function defineBackground(main: () => void): BackgroundDefinition;
 declare function defineBackground(definition: BackgroundDefinition): BackgroundDefinition;
 
+type ContentScriptOverlayAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type ContentScriptAppendMode = 'last' | 'first' | 'replace' | 'before' | 'after' | ((anchor: Element, ui: Element) => void);
+type ContentScriptPositioningOptions = {
+    type: 'inline';
+} | {
+    type: 'overlay';
+    /**
+     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
+     * content.
+     */
+    zIndex?: number;
+    /**
+     * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
+     * which corner is aligned with that 0x0 pixel space.
+     *
+     * @default "top-left"
+     */
+    alignment?: ContentScriptOverlayAlignment;
+} | {
+    type: 'modal';
+    /**
+     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
+     * content.
+     */
+    zIndex?: number;
+};
+interface ContentScriptAnchoredOptions {
+    /**
+     * 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.
+     */
+    anchor?: string | Element | null | undefined | (() => string | Element | null | undefined);
+    /**
+     * 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
+     */
+    append?: ContentScriptAppendMode | ((anchor: Element, ui: Element) => void);
+}
+
 /**
  * Utility for mounting content script UI's with isolated styles. Automatically removed from the DOM
  * when the content script's context is invalidated.
@@ -61,27 +107,11 @@ interface ContentScriptUi<TApp> {
      */
     remove: () => void;
 }
-interface BaseContentScriptUiOptions<TApp> {
+type ContentScriptUiOptions<TApp> = ContentScriptPositioningOptions & ContentScriptAnchoredOptions & {
     /**
      * The name of the custom component used to host the ShadowRoot. Must be kebab-case.
      */
     name: string;
-    /**
-     * 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
-     */
-    append?: ContentScriptAppendMode | ((anchor: Element, ui: Element) => void);
-    /**
-     * 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.
-     */
-    anchor?: string | Element | null | undefined | (() => string | Element | null | undefined);
     /**
      * 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
@@ -102,37 +132,53 @@ interface BaseContentScriptUiOptions<TApp> {
      * See https://wxt.dev/entrypoints/content-scripts.html#ui for more info.
      */
     css?: string;
-}
-type OverlayContentScriptUiOptions<TApp> = BaseContentScriptUiOptions<TApp> & {
-    type: 'overlay';
+};
+
+/**
+ * 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();
+ *   }
+ * })
+ */
+declare function createContentScriptIframe(ctx: ContentScriptContext, options: ContentScriptIframeOptions): ContentScriptIframe;
+interface ContentScriptIframe {
     /**
-     * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
-     * which corner is aligned with that 0x0 pixel space.
-     *
-     * @default "top-left"
+     * The iframe added to the DOM.
      */
-    alignment?: ContentScriptUiOverlayAlignment;
+    iframe: HTMLIFrameElement;
     /**
-     * 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;
-};
-type ModalContentScriptUiOptions<TApp> = BaseContentScriptUiOptions<TApp> & {
-    type: 'modal';
+    wrapper: HTMLDivElement;
     /**
-     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
-     * content.
+     * Function that mounts or remounts the UI on the page.
      */
-    zIndex?: number;
-};
-type InlineContentScriptUiOptions<TApp> = BaseContentScriptUiOptions<TApp> & {
-    type: 'inline';
+    mount: () => void;
+    /**
+     * Function that removes the UI from the webpage.
+     */
+    remove: () => void;
+}
+type ContentScriptIframeOptions = ContentScriptPositioningOptions & ContentScriptAnchoredOptions & {
+    /**
+     * The path to the unlisted HTML file to display in the iframe.
+     */
+    page: wxt_browser.PublicPath;
 };
-type ContentScriptUiOverlayAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type ContentScriptAppendMode = 'last' | 'first' | 'replace' | 'before' | 'after';
-type ContentScriptUiOptions<TApp> = OverlayContentScriptUiOptions<TApp> | ModalContentScriptUiOptions<TApp> | InlineContentScriptUiOptions<TApp>;
 
 declare function defineContentScript(definition: ContentScriptDefinition): ContentScriptDefinition;
 
-export { BaseContentScriptUiOptions, ContentScriptAppendMode, ContentScriptContext, ContentScriptUi, ContentScriptUiOptions, ContentScriptUiOverlayAlignment, InlineContentScriptUiOptions, ModalContentScriptUiOptions, OverlayContentScriptUiOptions, createContentScriptUi, defineBackground, defineContentScript };
+export { ContentScriptContext, ContentScriptIframe, ContentScriptIframeOptions, ContentScriptUi, ContentScriptUiOptions, createContentScriptIframe, createContentScriptUi, defineBackground, defineContentScript };

package/dist/client.js

@@ -185,6 +185,80 @@ var ContentScriptContext = class _ContentScriptContext {
 
 // src/client/content-scripts/content-script-ui.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 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;
+}
+
+// src/client/content-scripts/content-script-ui.ts
 async function createContentScriptUi(ctx, options) {
   const css = [options.css ?? ""];
   if (ctx.options?.cssInjectionMode === "ui") {
@@ -201,74 +275,15 @@ async function createContentScriptUi(ctx, options) {
     },
     mode: "open"
   });
-  const getAnchor = () => {
-    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;
-  };
   let mounted;
   const mount = () => {
-    const anchor = getAnchor();
-    if (anchor == null)
-      throw Error(
-        "Failed to mount content script ui: could not find anchor element"
-      );
     mounted = options.mount(uiContainer);
-    switch (options.append) {
-      case void 0:
-      case "last":
-        anchor.append(shadowHost);
-        break;
-      case "first":
-        if (anchor.firstChild) {
-          anchor.insertBefore(shadowHost, anchor.firstChild);
-        } else {
-          anchor.append(shadowHost);
-        }
-        break;
-      case "replace":
-        anchor.replaceWith(shadowHost);
-        break;
-      case "after":
-        anchor.replaceWith(anchor, shadowHost);
-        break;
-      case "before":
-        anchor.replaceWith(shadowHost, anchor);
-        break;
-      default:
-        options.append(anchor, shadowHost);
-        break;
-    }
-    if (options.type !== "inline") {
-      if (options.zIndex != null)
-        shadowHost.style.zIndex = String(options.zIndex);
-      shadowHost.style.overflow = "visible";
-      shadowHost.style.position = "relative";
-      shadowHost.style.width = "0";
-      shadowHost.style.height = "0";
-      shadowHost.style.display = "block";
-      const html = shadow.querySelector("html");
-      if (options.type === "overlay") {
-        html.style.position = "absolute";
-        if (options.alignment?.startsWith("bottom-"))
-          html.style.bottom = "0";
-        else
-          html.style.top = "0";
-        if (options.alignment?.endsWith("-right"))
-          html.style.right = "0";
-        else
-          html.style.left = "0";
-      } else {
-        html.style.position = "fixed";
-        html.style.top = "0";
-        html.style.bottom = "0";
-        html.style.left = "0";
-        html.style.right = "0";
-      }
-    }
+    mountContentScriptUiRoot(shadowHost, options);
+    applyContentScriptUiPosition(
+      shadowHost,
+      shadow.querySelector("html"),
+      options
+    );
   };
   const remove = () => {
     shadowHost.remove();
@@ -301,12 +316,37 @@ async function loadCss() {
   }
 }
 
+// src/client/content-scripts/content-script-iframe.ts
+import browser2 from "webextension-polyfill";
+function createContentScriptIframe(ctx, options) {
+  const wrapper = document.createElement("div");
+  wrapper.classList.add("wxt-iframe-wrapper");
+  const iframe = document.createElement("iframe");
+  iframe.src = browser2.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
+  };
+}
+
 // src/client/content-scripts/define-content-script.ts
 function defineContentScript(definition) {
   return definition;
 }
 export {
   ContentScriptContext,
+  createContentScriptIframe,
   createContentScriptUi,
   defineBackground,
   defineContentScript