[chrome extension] boilerplate 크롬에서 실행(적용) 해보기

이 글에서는 크롬 확장 프로그램 개발을 처음 시작하려고 할때

예제 소스를 크롬에 적용하여 실행해보는 방법을 소개한다.

 

---

 

원하는 chrome extension bilerplate를 깃허브나 기타 저장소에서 다운로드 한다.

나의 경우 react-chrome-extension-boilerplate 를 다운로드한 후 빌드를 했다.

빌드 과정 까지는 생략하겠다.

빌드를 완료하면 아래와 같은 파일이 구성된다.

 

이제 크롬 브라우저를 열어 옵션 > 도구 더보기 >확장프로그램 탭으로 이동한다.

 

우측 상단에 있는 개발자모드를 ON 한다.

그러면 아래와 같은 버튼이 생성된다.

'압축해제된 확장 프로그램을 로드합니다.' 버튼을 클릭한 후

 

좀 전에 빌드해서 생긴 빌드 폴더를 선택한다.

 

별 문제가 없다면 아래와 같이 확장 프로그램이 나타 날 것이다.

 

background.html을 누르면 개발자도구를 통해 동작을 확인 할 수 있다.

 

잘 실행되는 것을 알 수 있다.