Chrome Extension Typescript Boiler Plate , 크롬 익스텐션 typescript 로 개발하기

 

최근 크롬 익스텐션으로 만들고 싶은 것들이 꽤 생겨서, 타입스크립트로 프로젝트를 하려고 한다.

그런데, 매번 초기 세팅을 하기가 정말 귀찮고.. 매번 하는 거지만 할때마다 찾아보게 되어서,

내가 사용하기 편하게 최소한의 세팅으로 boiler-plate 로 만들어보았다.

 

https://github.com/daehwan2/chrome-extension-typescript-boilerplate

GitHub - daehwan2/chrome-extension-typescript-boilerplate: chrome-extension-typescript-boilerplate

chrome extension typescript boiler plate

 

 

레포를 보면

public 아래 파일들은 그대로 빌드되고, src 아래 ts 파일들은 build 디렉토리에 js 파일로 컴파일되는 환경이다.

 

사용법은

 

1. fork 

fork 버튼을 눌러 본인의 git 에 가져온다.

 

2. git clone (repo)

위에서 가져온 레포를 로컬에 clone 한다.

 

3. build

npm run build 를 통해 build 디렉토리를 생성한다.

( 추후 개발을 진행할때는 npm run watch를 사용하면 된다. )

 

4. chrome://extensions/ 으로 가서 build 디렉토리를 업로드한다.

 

 

5. 개발 시작!

익스텐션이 정상적으로 설치되었다면 이제 개발을 시작하면 된다!

 

---

 

 

boiler plate 를 만든건 처음인데 많은 사람들이 편하게 사용해줬으면 좋겠다 !