WXT

Appearance

API > wxt/utils/content-script-ui/iframe > IframeContentScriptUiOptions

Interface: IframeContentScriptUiOptions<TMounted> ​

Options shared by integrated, shadow root, and iframe UIs.

position selects "inline", "overlay", or "modal" positioning. zIndex controls the positioning element's stacking level for overlays and modals. alignment is available for overlays.

Contents ​

Type parameters ​

▪ TMounted

Properties ​

alignment ​

alignment?: ContentScriptOverlayAlignment

When using position: "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

Default ​

ts
'top-left'

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:52

anchor ​

anchor?: null | string | Element | () => undefined | null | string | Element

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.

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:105

append ​

append?: ContentScriptAppendMode | (anchor, ui) => void

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 first 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

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:122

onBeforeMount ​

onBeforeMount?: (wrapper, iframe) => void

Callback executed before mounting the UI. Use this function to customize the iframe or wrapper elements before they are injected into the DOM. It is called every time ui.mount() is called.

Parameters ​

▪ wrapper: HTMLElement

▪ iframe: HTMLIFrameElement

Source ​

packages/wxt/src/utils/content-script-ui/iframe.ts:87

onMount ​

onMount?: (wrapper, iframe) => TMounted

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.

Parameters ​

▪ wrapper: HTMLElement

▪ iframe: HTMLIFrameElement

Source ​

packages/wxt/src/utils/content-script-ui/iframe.ts:81

onRemove ​

onRemove?: (mounted) => void

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.

Parameters ​

▪ mounted: undefined | TMounted

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:24

page ​

page: any

The path to the HTML page that will be shown in the iframe. This string is passed into browser.runtime.getURL.

Source ​

packages/wxt/src/utils/content-script-ui/iframe.ts:72

position ​

position: "inline" | "overlay" | "modal"

Choose between "inline", "overlay", or "modal" positioning.

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:50

zIndex ​

zIndex?: number

The z-index used on the positioning element. Set to a positive number to show your UI over website content.

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:51

Generated using typedoc-plugin-markdown and TypeDoc