[Chrome Extension] 유튜브 외국어 댓글 필터링 익스텐션 개발기(2) - boilerplate 분석

리액트를 이용한 크롬 익스텐션 개발을 위해 react-chrome-extension-boilerplate 레포지토리를 Fork해 왔습니다.

 

fork한 레포지토리의 경우 Webpack3, React 15로 구성되어있고 page context에 script를 inject 하는것이 불가능한 https://github.com/jhen0409/react-chrome-extension-boilerplate 이 레포지토리를 기반으로 제작된 보일러 플레이트로  Webpack 4, React 16으로 업데이트하고, page context script inject를 지원하도록 개발환경을 변경해 둔 버전이라고 할 수 있습니다.

 

그렇기 때문에 해당 레포지토리의 디렉토리 구조에 대해서 간단한 분석을 해보겠습니다.

우선 분석에 앞서 해당 레포지토리는 TODO Application 코드가 작성되어 있다는 점을 염두해 두시면 될 것 같습니다.

 

 

레포지토리를 클론하면 위와 같이 디렉토리가 분리되어져 있습니다.

Readme 파일에 적혀있는 내용이 아닌 개인적으로 파일 내용을 뜯어 보며 파악한바로는

우선 신경써야 할 디렉토리는 크게 "app"과 "chrome" 디렉토리 입니다.

 

1. chrome 디렉토리

 

chrome 디렉토리를 열어보면 위 이미지처럼 파일이 존재하는데 익스텐션을 위한 여러 설정 파일들과 큰 틀(?)을 구성하는 파일들이 위치해 있다.

 

우선 최상단에는 extension 관련해 권한, 이름, 아이콘 이미지 등을 설정할 수 있는 manifest 파일이 위치한다.

그 아래 assets 디렉토리에는 다국어 지원을 위한 locales와 아이콘 이미지등을 저장할 수 있는 img 디렉토리가 위치한다.

그리고 extension에는 background, common, content, page 디렉토리와 여러 js파일이 위치하는데,

content에는 스타일 설정, page에는 브라우저 페이지에 injection 될 injection script가 위치한다

 

 

 

views에는 pug 파일들이 위치하는데 pug로 ui를 구현하는 방식이 아닌 위와 같이 pug로 script를 삽입(?)하는 역할만 한다.

 

 

2. App 디렉토리

 

 

Chrome 디렉토리에서 큰 틀을 짰다면 App디렉토리는 그 틀에 배치할 여러 컴포넌트, 파일이 위치하는 것을 알 수 있다.

app내 에 todoapp.js를 시작으로 여러 모듈들이 import 되어지는 것을 확인할 수 있었고, 해당 보일러 플레이트에서 redux가 쓰인만큼 reducer와 action이 존재하는 것을 확인할 수 있다.