Chrome 확장 콘텐츠 스크립트의 Real Vite-React HMR

A content script is JavaScript from a Chrome Extension that the browser executes on a designated host page. It shares the DOM with the host page but has a separate JavaScript environment.

Chrome 확장 프로그램에 대한 작업을 수행한 경우 콘텐츠 스크립트가 마음대로 사용할 수 있는 필수 도구 중 하나라는 것을 알고 있습니다. 그러나 그들이 개발할 PITA라는 것도 알고 있습니다.

기존 콘텐츠 스크립트 개발자 환경은 다음과 같습니다.

코드 변경

chrome://extensions에서 확장 프로그램을 다시 로드합니다.

호스트 페이지를 다시 로드합니다

.

제대로 작동하는지 확인하십시오

.

반복

단계를 잊어버리면 변경 사항이 표시되지 않습니다. 바라건대 디버깅을 시작하기 전에 무슨 일이 일어나고 있는지 깨닫길 바랍니다. 😂

웹사이트에 DOM 요소를 추가하는 것은 표준 콘텐츠 스크립트 사용 사례입니다. 안타깝게도 콘텐츠 스크립트에서 React 또는 Vue와 같은 프레임워크를 사용하려면 코드를 번들로 묶어야 합니다.

Vite는 브라우저용 코드를 제공하는 훌륭한 작업을 수행하지만 콘텐츠 스크립트는 파일 시스템에서 코드를 로드하므로 Vite의 달콤한 HMR 경험은 즉시 작동하지 않습니다. 지금까지.

Content Script DX를 위한 희소식

콘텐츠 스크립트에 HMR을 포함할 수 있습니다. 그들이 나타내는 지루한 작업 흐름에 작별을 고할 수 있습니다. 제 이름은 Jack Steam이고 rollup-plugin-chrome-extension, 일명 RPCE를 만든 사람입니다. 오늘 RPCE는 처음으로 콘텐츠 스크립트에 진정한 Vite HMR 경험을 제공합니다. 시작하는 방법을 보여 드리겠습니다.

내 첫 번째 기사에서 오는 경우 이미 시작하는 방법을 알고 있습니다. 이 다음 비트를 건너뛸 수 있습니다. 대신 다음 제목"Add a content script"까지 아래로 스크롤합니다.

시작하기

선호하는 패키지 관리자를 사용하여 새 Vite 프로젝트를 초기화합니다. 프롬프트에 따라 프로젝트를 설정합니다. RPCE는 React 및 Vue와 함께 작동하지만 이 가이드에서는 React를 사용합니다.

npm init vite@latest
cd <your-project-name>
npm install
npm i rollup-plugin-chrome-extension@beta -D

열기vite.config.js 및 RPCE 추가:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import { chromeExtension } from 'rollup-plugin-chrome-extension'

export default defineConfig({
- plugins: [react()]
+ plugins: [react(), chromeExtension()]
})

Chrome 확장 프로그램은 manifest.json 파일을 사용하여 리소스를 선언합니다. 다음 필드를 사용하여 vite.config.js 옆에 매니페스트를 생성합니다.

{
  "manifest_version": 3,
  "name": "Vite React Chrome Extension",
  "version": "1.0.0"
}

vite.config.js로 돌아가 매니페스트를 추가합니다.

// other imports...
+ import manifest from './manifest.json'

export default defineConfig({
- plugins: [react(), chromeExtension()]
+ plugins: [react(), chromeExtension({ manifest })]
})

콘텐츠 스크립트 추가

Chrome이 콘텐츠 스크립트를 실행해야 하는 페이지에 대한 JavaScript 파일 및 일치 패턴 목록으로 콘텐츠 스크립트를 선언합니다. manifest.json 에서 객체 배열로 필드content_scripts를 만듭니다.

{
  // other fields...
  "content_scripts": [{
    "js": ["src/main.jsx"],
    "matches": ["https://www.google.com/*"]
  }]
}

여기서는 src/main.jsx 로 시작하는 모든 페이지에서 https://www.google.com 를 실행하도록 Chrome에 지시합니다.

루트 요소 만들기

콘텐츠 스크립트는 HTML 파일을 사용하지 않으므로 React 앱을 마운트하기 전에 루트 요소를 만들고 DOM에 추가해야 합니다. src/main.jsx를 열고 루트 요소를 추가합니다.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

+ const root = document.createElement('div')
+ root.id = 'crx-root'
+ document.body.append(root)

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
- document.getElementById('root')
+ root
)

올바른 URL 가져오기

콘텐츠 스크립트는 호스트 페이지의 원본을 공유합니다. 이미지와 같은 정적 자산에 대한 확장 ID가 있는 URL을 가져와야 합니다. src/App.jsx로 이동하여 지금 실행해 보겠습니다.

<img
- src={logo}
+ src={chrome.runtime.getURL(logo)}
  className="App-logo"
  alt="logo"
/>

이제 콘텐츠 스크립트를 실행할 준비가 되었습니다! 하지만 먼저 Chrome에서 확장 프로그램을 로드해 보겠습니다.

확장 프로그램 로드

터미널에서 Vite를 시작합니다.

npm run dev

URLchrome://extensions에서 확장 대시보드를 열고 오른쪽 상단 모서리에 있는 스위치를 사용하여 개발 모드를 켭니다. 그런 다음 dist 폴더를 확장 대시보드로 드래그하여 확장을 로드합니다.

HMR로 이익

https://www.google.com로 이동하여 페이지 하단으로 스크롤합니다. 친숙한 Vite Hello World가 있습니다!

카운터 버튼이 어떻게 버튼처럼 보이지 않는지 확인하십시오. Google의 스타일이 콘텐츠 스크립트 요소에 영향을 미치기 때문입니다. 반대의 경우도 마찬가지입니다. 우리의 스타일은 Google의 스타일을 바꿉니다.

문제를 해결해 보겠습니다. src/index.css의 모든 항목을 다음으로 바꿉니다.

#crx-root {
  position: fixed;
  top: 3rem;
  left: 50%;
  transform: translate(-50%, 0);
}

#crx-root button {
  background-color: rgb(239, 239, 239);
  border-color: rgb(118, 118, 118);
  border-image: initial;
  border-style: outset;
  border-width: 2px;
  margin: 0;
  padding: 1px 6px;
}

RPCE는 콘텐츠 스크립트를 신속하게 다시 빌드하고 CSS 변경 사항을 적용합니다. 이제 div 위치가 고정되었고 해당 버튼이 버튼처럼 보입니다! 카운트 버튼을 클릭하고 src/App.jsx를 가지고 놀면서 Vite HMR이 작동하는지 확인합니다.

Vite용 RPCE는 아직 베타 버전이며 매주 기능을 추가하고 있습니다. 여러분의 피드백이 필요합니다! 문제가 해결되지 않으면 create an issue .

반대로 RPCE가 도움이 된다면 잠시 시간을 내어 star us on GitHub 또는 .

Chrome 확장 프로그램 구축에 행운을 빕니다!