DOM Helpers

Helpers for reading and manipulating the host page from a content script. Import from @/shared/dom — never use these in popup, side panel, or background code.

Select an element

Typed wrapper around document.querySelector. Returns null if not found.

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

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

Wait for an element

Polls until the element appears or the timeout elapses. Essential for SPAs, hydration, and infinite scroll where content renders after page load.

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

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

Create a vanilla DOM node

For lightweight non-React UI. For React components, use mountInjectedUi() instead — it sets up the Shadow DOM, theme, and i18n.

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.