방법: 브라우저 확장을 사용하여 웹사이트에 UI 삽입

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. css unset 을 수행하는 style 태그로 요소를 렌더링합니다.

A는 종종 광고에 사용되는 것으로 보입니다. 이미지를 렌더링하는 자체 포함된 간단한 구성 요소에 적합합니다. 하지만 스타일을 계승한 디자인 시스템을 활용하기는 매우 어렵습니다. 전용 스타일 삽입 체계가 없으면 사용하기가 매우 어렵고 추가 스타일 태그로 인해 코드가 깔끔하지 않습니다.

B. iframe 내에서 요소를 렌더링합니다.

B는 요소를 잘 분리하며 많은 이전 브라우저 확장 기능의 기본 기술입니다. 그러나 iframe 컨테이너는 삽입된 구성 요소를 웹 사이트에 매끄럽게 혼합하려고 할 때 작업하기 어려울 수 있습니다. Iframe의 요소는 고유한 헤드와 본문이 있는 프레임 내의 내부 문서 안에 중첩됩니다. 이로 인해 iframe 내부 요소의 스타일을 지정하고 제어하는 ​​것은 물론 웹 사이트의 요소와 정렬하는 것이 까다로워집니다.

C. Shadow DOM 내부의 요소를 렌더링합니다.

C는 웹 확장에 가장 적합한 기술입니다. 웹 구성 요소 API의 핵심 부분으로 도입된 아이디어는 Shadow DOM이 기본 DOM에 연결된 별도의 DOM이라는 것입니다. 내부의 어떤 것도 주 세계에 영향을 줄 수 없습니다. Plasmo 프레임워크는 장면 뒤에서 이 기술을 사용하여 모든 웹 페이지에 React 구성 요소를 원활하게 삽입할 수 있습니다. 이 기능을 "콘텐츠 스크립트 UI"라고 합니다.