@webext-core/isolated-element

Isolate content script UI's styles from the parent page and control event bubbling to the host page. Supports all browsers (Chrome, Firefox, Safari).

``bash
pnpm i @webext-core/isolated-element
`

`ts
import { createIsolatedElement } from '@webext-core/isolated-element';
import browser from 'webextension-polyfill';

function mountUI(root: HtmlElement) {
const text = document.createElement('p');
text.textContent = 'Isolated text';
root.appendChild(text);
}

const { parentElement, isolatedElement } = await createIsolatedElement({
name: 'some-name',
css: {
url: browser.runtime.getURL('/path/to/styles.css'),
},
isolateEvents: true, // or array of event names to isolate, e.g., ['click', 'keydown']
});

mountUi(isolatedElement);
document.body.appendChild(parentElement);
``

Get Started

See documentation to get started!