TL,DR:
pnpm create plasmo inject-ui
cd inject-ui
touch content.tsx
content.tsx
const Overlay = () => (<h1>HELLO WORLD</h1>)
export default Overlay
pnpm dev
Загрузите расширение в Chrome, обновите, и вы увидите HELLO WORLD в верхней части веб-страницы.
Пояснения
Браузерные расширения могут внедрять элементы DOM на веб-сайт с помощью скрипта содержимого. Однако внедренный элемент может наследовать стиль сайта без надлежащей инкапсуляции. Это часто нежелательно для любого расширения браузера, не зависящего от сайта.
Существует 3 решения вышеуказанной проблемы:
A. Оформить элемент тегом style, который делает css unset.
A часто встречается в рекламе. Он хорошо работает для автономных, простых компонентов, которые рендерят изображения. Однако, очень трудно использовать систему дизайна с унаследованным стилем, так как разгруппировка каскадируется вниз. Если у вас нет специальной схемы внедрения стиля, его очень трудно использовать, а дополнительный тег style делает код не очень чистым.
B. Рендерить элемент внутри iframe.
B хорошо изолирует элемент и используется во многих старых расширениях браузера. Однако с контейнером iframe может быть трудно работать, если пытаться органично вписать внедренный компонент в веб-сайт. Элементы iframe вложены во внутренний документ внутри его рамки, со своей головой и телом. Это затрудняет стилизацию и управление элементами внутри iframe, а также их выравнивание по элементам сайта.
C. Рендеринг элемента внутри теневого DOM.
C — лучшая техника для веб-расширения. Представленная как ключевая часть API веб-компонентов, идея заключается в том, что теневой DOM — это отдельный DOM, присоединенный к основному DOM. Ничто внутри него не может повлиять на основной DOM. Фреймворк Plasmo использует эту технику за сценой, чтобы обеспечить бесшовное внедрение компонента React в любую веб-страницу. Мы называем эту возможность «контент-скрипт UI».