React가 포함된 Chrome 확장 프로그램

Google 크롬 확장 프로그램이란 무엇입니까?

Chrome 확장 프로그램은 브라우저의 기능을 수정합니다. 여기에는 새로운 Chrome 기능을 도입하거나 프로그램의 동작을 보다 사용자 친화적으로 변경하는 것이 포함됩니다.

1.리액트 앱 만들기

먼저 typescript를 사용하여 반응 애플리케이션을 생성해야 합니다.

npx create-react-app chrome-test-extension --template typescript

2.React 앱을 Google 확장 프로그램으로 변환

이 단계에서는 manifest.js를 구성해야 합니다. 이 파일은 공용 폴더에 있습니다. 기본적으로 확장 이름, 설명, 버전, manifest_version, 작업 및 아이콘을 업데이트할 수 있습니다.

이 코드에서는 프로젝트에 매니페스트 버전 3을 사용합니다.

{
   "name": "Chrome React Test Extension",
   "description": "Test Chrome extensions",
   "version": "0.1",
   "manifest_version": 3,
   "action": {
       "default_popup": "index.html",
       "default_title": "Open the popup"
   },
   "icons": {
       "16": "logo192.png",
       "48": "logo192.png",
       "128": "logo192.png"
   }
}

3.팝업 아키텍처

index.html.Default 본문 크기에 대한 이 프로젝트 작업에서 index.css의 팝업 크기를 늘릴 수 있습니다. 그러나 최대 너비: 800px 및 최대 높이: 600px를 사용할 수 있습니다.

body {
 width: 600px;
 height: 400px;
 ...
}

4. 애플리케이션 구축

해당 프로젝트를 빌드하기 전에 해당 프로젝트의 일부를 변경해야 합니다. 일반적인 빌드 파일 구조는 좋아 보이지만 Chrome을 사용하면 CSP(콘텐츠 보안 정책) 문제가 발생합니다. 추가 JavaScript 파일을 추가하지 않기 위해 CRA는 애플리케이션을 구축하는 동안 HTML 페이지에 바로 인라인 JavaScript 코드를 삽입합니다. 이것은 웹 사이트에서 작동하지만 확장 프로그램에서는 작동하지 않습니다.

따라서 우리는 package.json 스크립트 섹션 빌드 부분을 다음으로 업데이트할 것입니다.

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",

프로젝트에 대해 index.html을 빌드하면 인라인 JavaScript 코드에 대한 참조가 포함되지 않습니다.

INLINE_RUNTIME_CHUNK 없이 = false



INLINE_RUNTIME_CHUNK=거짓



이제 프로젝트를 빌드할 수 있습니다.

yarn build

5. 브라우저에 확장 프로그램 추가

chrome://extensions를 연결하는 크롬 사용의 관리 확장 프로그램으로 쉽게 이동합니다.

빌드 파일을 추가하기 전에 크롬 확장 프로그램에서 개발자 모드를 활성화하려고 합니다.



압축을 푼 로드에서 빌드 폴더를 선택합니다. 확장 프로그램이 로드되었으며 이제 나열됩니다. 이렇게:







반응이 있는 Chrome 확장 프로그램으로 가는 길입니다. 새로운 튜토리얼( .

고맙습니다,
J-Sandaruwan.