DOM Helpers

Find host-page elements reliably from a content script, including pages that render or replace content after initial load.

Select an element

Use the typed selector when the element already exists. It returns null instead of waiting.

import { selectElement } from "@/shared/dom";

const title = selectElement<HTMLHeadingElement>("h1")?.innerText ?? "";

Wait for an element

Wait for delayed UI on SPAs, hydrated pages, and infinite feeds. The promise rejects after the timeout instead of hanging forever.

import { waitForElement } from "@/shared/dom";

const button = await waitForElement<HTMLButtonElement>("button[type='submit']", 5000);

Create a vanilla DOM node

Use a plain node for tiny, dependency-free additions. Use mountInjectedUi() for React, shadcn components, theme, and localization.

import { ensureRoot, removeElement } from "@/shared/dom";

const root = ensureRoot("chromeship-overlay-root", "chromeship-overlay");
root.textContent = "Hello from the extension";

removeElement("chromeship-overlay-root");

ContentAnchor

For positioning React UI next to a page element, use ContentAnchor — it handles scroll, resize, SPA navigation, and target replacement automatically.