WXT

Appearance

API > wxt/utils/content-script-ui/integrated > IntegratedContentScriptUiOptions

Interface: IntegratedContentScriptUiOptions<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

onMount ​

onMount: (wrapper) => TMounted

Callback executed when mounting the UI. This function should create and append the UI to the 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.

Parameters ​

▪ wrapper: HTMLElement

Source ​

packages/wxt/src/utils/content-script-ui/integrated.ts:84

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

position ​

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

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

Source ​

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

tag ​

tag?: string

Tag used to create the wrapper element.

Default ​

ts
'div'

Source ​

packages/wxt/src/utils/content-script-ui/integrated.ts:75

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