WXT

Appearance

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

Interface: IntegratedContentScriptUiOptions<TMounted> ​

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

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 ​

TMounted

Properties ​

alignment? ​

optional alignment?: ContentScriptOverlayAlignment

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

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'

anchor? ​

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

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

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.

append? ​

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

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

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

onMount ​

onMount: (wrapper) => TMounted

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

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

Returns ​

TMounted

onRemove? ​

optional onRemove?: (mounted) => void

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

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 ​

TMounted | undefined

Returns ​

void

position ​

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

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

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

tag? ​

optional tag?: string

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

Tag used to create the wrapper element.

Default ​

ts
'div'

zIndex? ​

optional zIndex?: number

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

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

Generated using typedoc-plugin-markdown and TypeDoc