wxt 0.18.15 → 0.19.0

package/dist/client/content-scripts/custom-events.d.ts

@@ -0,0 +1,10 @@
+export declare class WxtLocationChangeEvent extends Event {
+    readonly newUrl: URL;
+    readonly oldUrl: URL;
+    static EVENT_NAME: string;
+    constructor(newUrl: URL, oldUrl: URL);
+}
+/**
+ * Returns an event name unique to the extension and content script that's running.
+ */
+export declare function getUniqueEventName(eventName: string): string;

package/dist/client/content-scripts/custom-events.mjs

@@ -0,0 +1,13 @@
+import { browser } from "wxt/browser";
+export class WxtLocationChangeEvent extends Event {
+  constructor(newUrl, oldUrl) {
+    super(WxtLocationChangeEvent.EVENT_NAME, {});
+    this.newUrl = newUrl;
+    this.oldUrl = oldUrl;
+  }
+  static EVENT_NAME = getUniqueEventName("wxt:locationchange");
+}
+export function getUniqueEventName(eventName) {
+  const entrypointName = typeof import.meta.env === "undefined" ? "build" : import.meta.env.ENTRYPOINT;
+  return `${browser?.runtime?.id}:${entrypointName}:${eventName}`;
+}

package/dist/client/content-scripts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './content-script-context';
+export * from './ui';

package/dist/client/content-scripts/index.mjs

@@ -0,0 +1,2 @@
+export * from "./content-script-context.mjs";
+export * from "./ui/index.mjs";

package/dist/client/content-scripts/location-watcher.d.ts

@@ -0,0 +1,12 @@
+import { ContentScriptContext } from '.';
+/**
+ * Create a util that watches for URL changes, dispatching the custom event when detected. Stops
+ * watching when content script is invalidated.
+ */
+export declare function createLocationWatcher(ctx: ContentScriptContext): {
+    /**
+     * Ensure the location watcher is actively looking for URL changes. If it's already watching,
+     * this is a noop.
+     */
+    run(): void;
+};

package/dist/client/content-scripts/location-watcher.mjs

@@ -0,0 +1,22 @@
+import { WxtLocationChangeEvent } from "./custom-events.mjs";
+export function createLocationWatcher(ctx) {
+  let interval;
+  let oldUrl;
+  return {
+    /**
+     * Ensure the location watcher is actively looking for URL changes. If it's already watching,
+     * this is a noop.
+     */
+    run() {
+      if (interval != null) return;
+      oldUrl = new URL(location.href);
+      interval = ctx.setInterval(() => {
+        let newUrl = new URL(location.href);
+        if (newUrl.href !== oldUrl.href) {
+          window.dispatchEvent(new WxtLocationChangeEvent(newUrl, oldUrl));
+          oldUrl = newUrl;
+        }
+      }, 1e3);
+    }
+  };
+}

package/dist/client/content-scripts/ui/index.d.ts

@@ -0,0 +1,23 @@
+import { ContentScriptContext } from '..';
+import { IframeContentScriptUi, IframeContentScriptUiOptions, IntegratedContentScriptUi, IntegratedContentScriptUiOptions, ShadowRootContentScriptUi, ShadowRootContentScriptUiOptions } from './types';
+export * from './types';
+/**
+ * Create a content script UI without any isolation.
+ *
+ * @see https://wxt.dev/guide/key-concepts/content-script-ui.html#integrated
+ */
+export declare function createIntegratedUi<TMounted>(ctx: ContentScriptContext, options: IntegratedContentScriptUiOptions<TMounted>): IntegratedContentScriptUi<TMounted>;
+/**
+ * Create a content script UI using an iframe.
+ *
+ * @see https://wxt.dev/guide/key-concepts/content-script-ui.html#iframe
+ */
+export 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/key-concepts/content-script-ui.html#shadowroot
+ */
+export declare function createShadowRootUi<TMounted>(ctx: ContentScriptContext, options: ShadowRootContentScriptUiOptions<TMounted>): Promise<ShadowRootContentScriptUi<TMounted>>;

package/dist/client/content-scripts/ui/index.mjs

@@ -0,0 +1,188 @@
+import { browser } from "wxt/browser";
+import { logger } from "../../../sandbox/utils/logger.mjs";
+import { createIsolatedElement } from "@webext-core/isolated-element";
+export * from "./types.mjs";
+export 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();
+    mounted = void 0;
+  };
+  ctx.onInvalidated(remove);
+  return {
+    get mounted() {
+      return mounted;
+    },
+    wrapper,
+    mount,
+    remove
+  };
+}
+export 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();
+    mounted = void 0;
+  };
+  ctx.onInvalidated(remove);
+  return {
+    get mounted() {
+      return mounted;
+    },
+    iframe,
+    wrapper,
+    mount,
+    remove
+  };
+}
+export async function createShadowRootUi(ctx, options) {
+  const css = [options.css ?? ""];
+  if (ctx.options?.cssInjectionMode === "ui") {
+    const entryCss = await loadCss();
+    css.push(entryCss.replaceAll(":root", ":host"));
+  }
+  const {
+    isolatedElement: uiContainer,
+    parentElement: shadowHost,
+    shadow
+  } = await createIsolatedElement({
+    name: options.name,
+    css: {
+      textContent: css.join("\n").trim()
+    },
+    mode: options.mode ?? "open",
+    isolateEvents: options.isolateEvents
+  });
+  shadowHost.setAttribute("data-wxt-shadow-root", "");
+  let mounted;
+  const mount = () => {
+    mountUi(shadowHost, options);
+    applyPosition(shadowHost, shadow.querySelector("html"), options);
+    mounted = options.onMount(uiContainer, shadow, shadowHost);
+  };
+  const remove = () => {
+    options.onRemove?.(mounted);
+    shadowHost.remove();
+    while (uiContainer.lastChild)
+      uiContainer.removeChild(uiContainer.lastChild);
+    mounted = void 0;
+  };
+  ctx.onInvalidated(remove);
+  return {
+    shadow,
+    shadowHost,
+    uiContainer,
+    mount,
+    remove,
+    get mounted() {
+      return 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") {
+    if (resolved.startsWith("/")) {
+      const result = document.evaluate(
+        resolved,
+        document,
+        null,
+        XPathResult.FIRST_ORDERED_NODE_TYPE,
+        null
+      );
+      return result.singleNodeValue ?? void 0;
+    } else {
+      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":
+      anchor.prepend(root);
+      break;
+    case "replace":
+      anchor.replaceWith(root);
+      break;
+    case "after":
+      anchor.parentElement?.insertBefore(root, anchor.nextElementSibling);
+      break;
+    case "before":
+      anchor.parentElement?.insertBefore(root, anchor);
+      break;
+    default:
+      options.append(anchor, root);
+      break;
+  }
+}
+async function loadCss() {
+  const url = browser.runtime.getURL(
+    `/content-scripts/${import.meta.env.ENTRYPOINT}.css`
+  );
+  try {
+    const res = await fetch(url);
+    return await res.text();
+  } catch (err) {
+    logger.warn(
+      `Failed to load styles @ ${url}. Did you forget to import the stylesheet in your entrypoint?`,
+      err
+    );
+    return "";
+  }
+}

package/dist/{client.d.ts → client/content-scripts/ui/types.d.ts}

@@ -1,13 +1,10 @@
-import { b as ContentScriptContext, a as WxtAppConfig } from './define-app-config-bg54F_lV.js';
-import 'webextension-polyfill';
-
-interface IntegratedContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+export interface IntegratedContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
     /**
      * A wrapper div that assists in positioning.
      */
     wrapper: HTMLElement;
 }
-interface IframeContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+export interface IframeContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
     /**
      * The iframe added to the DOM.
      */
@@ -17,7 +14,7 @@ interface IframeContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
      */
     wrapper: HTMLDivElement;
 }
-interface ShadowRootContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+export 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.
@@ -33,7 +30,7 @@ interface ShadowRootContentScriptUi<TMounted> extends ContentScriptUi<TMounted>
      */
     shadow: ShadowRoot;
 }
-interface ContentScriptUi<TMounted> {
+export interface ContentScriptUi<TMounted> {
     /**
      * Function that mounts or remounts the UI on the page.
      */
@@ -47,14 +44,14 @@ interface ContentScriptUi<TMounted> {
      */
     mounted: TMounted | undefined;
 }
-type ContentScriptUiOptions<TMounted> = ContentScriptPositioningOptions & ContentScriptAnchoredOptions & {
+export type ContentScriptUiOptions<TMounted> = ContentScriptPositioningOptions & ContentScriptAnchoredOptions & {
     /**
      * Callback called before the UI is removed from the webpage. Use to cleanup your UI, like
      * unmounting your Vue or React apps.
      */
     onRemove?: (mounted: TMounted | undefined) => void;
 };
-type IntegratedContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+export type IntegratedContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
     /**
      * Tag used to create the wrapper element.
      *
@@ -69,7 +66,7 @@ type IntegratedContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounte
      */
     onMount: (wrapper: HTMLElement) => TMounted;
 };
-type IframeContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+export type IframeContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
     /**
      * The path to the HTML page that will be shown in the iframe. This string is passed into
      * `browser.runtime.getURL`.
@@ -83,7 +80,7 @@ type IframeContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> &
      */
     onMount?: (wrapper: HTMLElement, iframe: HTMLIFrameElement) => TMounted;
 };
-type ShadowRootContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+export type ShadowRootContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
     /**
      * The name of the custom component used to host the ShadowRoot. Must be kebab-case.
      */
@@ -118,15 +115,15 @@ type ShadowRootContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounte
      */
     onMount: (uiContainer: HTMLElement, shadow: ShadowRoot, shadowHost: HTMLElement) => TMounted;
 };
-type ContentScriptOverlayAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export 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 {
+export type ContentScriptAppendMode = 'last' | 'first' | 'replace' | 'before' | 'after' | ((anchor: Element, ui: Element) => void);
+export interface ContentScriptInlinePositioningOptions {
     position: 'inline';
 }
-interface ContentScriptOverlayPositioningOptions {
+export interface ContentScriptOverlayPositioningOptions {
     position: 'overlay';
     /**
      * The `z-index` used on the `wrapper` element. Set to a positive number to show your UI over website
@@ -143,7 +140,7 @@ interface ContentScriptOverlayPositioningOptions {
      */
     alignment?: ContentScriptOverlayAlignment;
 }
-interface ContentScriptModalPositioningOptions {
+export interface ContentScriptModalPositioningOptions {
     position: 'modal';
     /**
      * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
@@ -152,12 +149,12 @@ interface ContentScriptModalPositioningOptions {
     zIndex?: number;
 }
 /**
- * Choose between `"inline"`, `"overlay"`, or `"modal" `types.
+ * Choose between `"inline"`, `"overlay"`, or `"modal"` positions.
  *
- * ![Visualization of different types](https://wxt.dev/content-script-ui-type.png)
+ * ![Visualization of different types](https://wxt.dev/content-script-ui-position.png)
  */
-type ContentScriptPositioningOptions = ContentScriptInlinePositioningOptions | ContentScriptOverlayPositioningOptions | ContentScriptModalPositioningOptions;
-interface ContentScriptAnchoredOptions {
+export type ContentScriptPositioningOptions = ContentScriptInlinePositioningOptions | ContentScriptOverlayPositioningOptions | ContentScriptModalPositioningOptions;
+export interface ContentScriptAnchoredOptions {
     /**
      * A CSS selector, XPath expression, element, or function that returns one of the three. Along with `append`, the
      * `anchor` dictates where in the page the UI will be added.
@@ -175,28 +172,3 @@ interface ContentScriptAnchoredOptions {
      */
     append?: ContentScriptAppendMode | ((anchor: Element, ui: Element) => void);
 }
-
-/**
- * Create a content script UI without any isolation.
- *
- * @see https://wxt.dev/guide/key-concepts/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/key-concepts/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/key-concepts/content-script-ui.html#shadowroot
- */
-declare function createShadowRootUi<TMounted>(ctx: ContentScriptContext, options: ShadowRootContentScriptUiOptions<TMounted>): Promise<ShadowRootContentScriptUi<TMounted>>;
-
-declare function useAppConfig(): WxtAppConfig;
-
-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, useAppConfig };

package/dist/client/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Any runtime APIs that use the web extension APIs.
+ *
+ * @module wxt/client
+ */
+export * from './content-scripts';
+export * from './app-config';

package/dist/client/index.mjs

@@ -0,0 +1,2 @@
+export * from "./content-scripts/index.mjs";
+export * from "./app-config.mjs";

package/dist/core/build.d.ts

@@ -0,0 +1,15 @@
+import { BuildOutput, InlineConfig } from '../types';
+/**
+ * Bundles the extension for production. Returns a promise of the build result. Discovers the `wxt.config.ts` file in
+ * the root directory, and merges that config with what is passed in.
+ *
+ * @example
+ * // Use config from `wxt.config.ts`
+ * const res = await build()
+ *
+ * // or override config `from wxt.config.ts`
+ * const res = await build({
+ *   // Override config...
+ * })
+ */
+export declare function build(config?: InlineConfig): Promise<BuildOutput>;

package/dist/core/build.mjs

@@ -0,0 +1,6 @@
+import { internalBuild } from "./utils/building/index.mjs";
+import { registerWxt } from "./wxt.mjs";
+export async function build(config) {
+  await registerWxt("build", config);
+  return await internalBuild();
+}

package/dist/core/builders/vite/index.d.ts

@@ -0,0 +1,3 @@
+import { ResolvedConfig, WxtBuilder, WxtDevServer, WxtHooks } from '../../../types';
+import { Hookable } from 'hookable';
+export declare function createViteBuilder(wxtConfig: ResolvedConfig, hooks: Hookable<WxtHooks>, server?: WxtDevServer): Promise<WxtBuilder>;