React로 ChromeExtension에 빌드하기

React를  ChromeExtension에 빌드하기 

예전에 스포츠 정보 알림 같은 Chrome Extension등을 만들어 본적이 있는데 혹시 create-react-app을 사용해서 개발하면 더 편하게 개발 할 수 있지 않을까 해서 찾아보니 진짜로 가능했다. 그래서 온갖 삽질을 하던 중 드디어 만들게 되어서 포스팅 한다. 

 

react를 시작하기 위해 create react-app을 사용한다. 

혹시나 몰라서 github 주소를 올려놓는다. 

https://github.com/facebook/create-react-app

이런식으로 폴더를 만들고 vsCode를 켜보면 아래와 같은 폴더 구조가 완성됩니다. 

create-react-app 폴더 구조

 

public 폴더에 들어가보면 저희는 여기서 manifest만 수정할 것이다. 

public 폴더 안

public 폴더 안 mainfest 파일안을 아래와 같이 바꾸어준다. 

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "permissions": [],
  "content_security_policy": "script-src 'self' 'sha256-5As4+3YpY62...'; object-src 'self'"
}

 위사이트에 들어가면 다양한 manifest 옵션들을 확인 할 수 있습니다. 

https://developer.chrome.com/extensions/manifest

 

작성 후

 

yarn build

 yarn build를 명령어로 작성해줍니다. 그럼 폴더안에 build라는 폴더가 생깁니다. 이제 거의 모든 설정이 끝났습니다.

 

아래사이트에 접속 후 

chrome://extensions/

1번을 눌러서 개발자 모드로 변경 후 2번을 눌러서 build 폴더를 로드 해줍니다. 

 

로드해주면 확장 프로그램있는 창에 자기가 추가한 프로그램이 생겼습니다. 눌러주면 오류가 발생합니다...... manifest 버전 2가되면서 csp라는 목록을 manifest에 추가해야 하는데 없어서 오류가 발생한 것 입니다. 이거때문에 엄청 삽질 많이 했습니다.....

제일 마지막 줄에 sha256-hash값을 manifest에 추가후 다시 yarn build를 해주면 react가 확장프로그램에서 실행되는 것을 볼 수 있습니다. 만약에 csp hash값을 바로 확인할 수 있는 방법을 아시는 분은 댓글 달아주세요 저도 진짜 궁금해요 ...... 

Summary

위와 같이 react를 이용하여 chrome extension을 만드는 방법을 알아보았다. 기존의 리액트와 다르게 코드를 고치면 바로 디버깅이 되는 것이 아니라 코드를 고친 후 yarn build 후 reload 버튼을 눌러 주어서 chrome extension을 개발해야합니다.