Dynamic UI mounting in WXT

createDynamicUI.ts

import type {
	ContentScriptContext,
	ContentScriptUi,
	ShadowRootContentScriptUiOptions,
} from "wxt/client";
import domObserver from "./dom-observer";

export function createShadowRootDynamicUI(
	ctx: ContentScriptContext,
	options: ShadowRootContentScriptUiOptions<unknown> & { anchor: string }
) {
	const elementUiMap = new WeakMap<Element, ContentScriptUi<unknown>>();

	const mountUI = async (elm: Element) => {
		const ui = await createShadowRootUi(ctx, { ...options, anchor: elm });
		elementUiMap.set(elm, ui);
		ui.mount();
	};
	const removeUI = (elm: Element) => {
		const ui = elementUiMap.get(elm);
		if (ui !== undefined) {
			ui.remove();
			elementUiMap.delete(ui);
		}
	};

	domObserver.added(options.anchor, mountUI);
	domObserver.removed(options.anchor, removeUI);
}