2020 년 React로 Chrome 확장 프로그램을 만드는 방법

Create React App으로 Chrome 확장 프로그램을 빠르게 시작

Flickr의 russellstreet의 이미지

거의 모든 것에 React를 사용할 수 있습니다. 음, Chrome 확장 프로그램의 경우 생각보다 조금 더 까다로울 수 있으므로이 가이드를 참조하세요.

Create React App은 Chrome 확장 프로그램에서 바로 작동하지 않습니다. 그 이유는 React가 Chrome 보안 지침을 위반하는 인라인 스크립트를 사용하기 때문입니다. 하지만 걱정하지 마세요. 해결 방법을 구현합니다.

1. React 앱 만들기

먼저 React 앱을 만들어야합니다. 새 폴더를 cool-extension만들고 ( 다음과 같이 호출 할 수 있음) VS Code (또는 선호하는 IDE)에서 엽니 다. 터미널을 열고 (폴더에 있는지 확인) 다음 명령을 입력하십시오.

npx create-react-app

그러면 폴더에 새로운 React 애플리케이션이 설정됩니다.

2. manifest.json 파일 생성

일반적으로 Chrome 확장 프로그램을 만들 때 manifest.json파일 을 만들어야 하지만 운이 좋습니다! Create React App은 manifest.json기본적으로 파일을 생성 합니다. 공용 폴더에서 찾을 수 있습니다.

이 파일의 모든 항목을 삭제하고 다음 코드를 붙여 넣으십시오.

{
"short_name": "Your Extension Name",
"name": "Your Extension Name",
"icons": {
"16": "favicon.ico",
"48": "logo192.png",
"128": "logo512.png"
},
"permissions": [],
"manifest_version": 2,
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "Your Extension Name"
}
}

나는 manifest.json진짜 빠른 것을 훑어 볼 것이지만, 심층적 인 다이빙을 원한다면 문서를 참조하십시오 .

  • short_namename 자체 설명해야한다 - 사람들은 확장의 이름을
  • icons Chrome 헤더 표시 줄에 표시되는 아이콘입니다.
  • permissions- 여기서 좀 더 흥미로워집니다. 다른 사용자의 컴퓨터에서 원하는대로 할 수 없습니다. 먼저 허용해야합니다. 따라서 사용자의 Chrome 저장 용량을 변경하려면 권한 배열에 저장해야합니다. 다음과 같이 보일 것 “permissions”: [“storage”]입니다.. 하지만이 튜토리얼에서는 필요하지 않습니다.
  • version 출시 버전 일뿐입니다. Chrome 스토어에서 애플리케이션을 업데이트 할 때 변경해야합니다.
  • browser_action,, default_popupdefault_title 확장 기능이 수행 할 작업을 지정하는 데 필요합니다. default_popup확장 프로그램에서 렌더링 할 페이지를 지정합니다 (이 경우 index.html). default_title확장 아이콘 위로 마우스를 가져 가면 표시되는 제목입니다.

일반적으로 우리는 지금 끝났습니다. React 확장은 완벽하게 작동하지만 앞서 언급했듯이 인라인 스크립트 사용을 해결해야합니다.

3. .env 파일 만들기

이제 기본 폴더 ( cool-extension)에서 .env환경 변수를 저장할 라는 파일을 만들어야 합니다. 다음 코드 줄을 추가합니다.

INLINE_RUNTIME_CHUNK=false

이렇게하면 Chrome에 문제가 없는지 확인할 수 있습니다.

이것이 마지막 단계였습니다. 이제 확장을 시작할 수 있습니다.

4. 확장 구축

이제 명령 줄에서 다음을 실행해야합니다.

npm run build

그러면 폴더에 빌드 폴더가 생성됩니다 cool-extension.

5. Chrome에서 확장 프로그램 열기

Chrome 검색 창에 다음을 입력하세요.

chrome://extensions/

오른쪽 상단에서 개발자 모드를 사용 설정합니다. 그러면 왼쪽 상단 모서리에 두 개의 버튼이 렌더링됩니다. 압축을 푼 확장과 압축 확장을로드합니다.

"Load unpacked extension"을 클릭하고 빌드 폴더를 선택합니다.

이제 확장 프로그램이 브라우저에 표시되고를 사용할 때마다 자동으로 업데이트됩니다 npm run build.

6. (선택 사항) : 일부 CSS 추가

확장 기능이 작동합니다. 축하합니다! 그러나 그것은 약간 작게 보입니다. 이를 변경하려면 CSS를 추가해야합니다.

App.css파일로 이동하여 다음 을 추가하십시오.

.App {
text-align: center;
  min-width: 300px;
  max-width: 300px;
  min-height: 300px;
  max-height: 300px;
}

그리고 그게 다야! 이 가이드를 읽어 주셔서 감사합니다.

Suggested posts

JavaScript의 이벤트 루프

호출 스택, 웹 API, 이벤트 대기열, 마이크로 작업, 매크로 작업

JavaScript의 이벤트 루프

이벤트 루프는 JavaScript의 비동기 프로그래밍의 비밀입니다. JS는 단일 스레드에서 모든 작업을 실행하지만 몇 가지 스마트 데이터 구조를 사용하면 멀티 스레딩의 환상을 얻을 수 있습니다.

N + 1 문제 선택

모든 것은 비용이 있습니다.

N + 1 문제 선택

개발자의 경우 ORM (Object-relational mapping)을 사용하면 삶을 상당히 단순화 할 수 있지만 알아야 할 자체 캐치 세트가 있습니다. 더 심각한 문제 중 하나는 Select N + 1 문제입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.