(기록용)chrome 익스텐션 개발전 개발세팅하기(준비단계)

 왜 익스텐션을 개발하려고 하는가?

처음엔 프론트엔드 개발자로써 웹을 개발하려고 했었다. 근데 알아보던중에 익스텐션을통해서도 재밌고 다양한걸 만들어볼수 있을꺼같아서 익스텐션을 개발하는 과정들을 기록을 남기려고한다

 

 라이브러리 선택

익스텐션은 html, css, js 기반이기때문에 프론트엔드에서 접근하기는 좋았다. 하지만 바로 예제에 진입하는 코드들은 순수하게 html, css, js를 활용하기때문에 프레임워크 (vite, next)를 하는 사람으로써 일부 제약사항이 존재하였다. 그렇기에 github에서 라이브러리 서칭을 하였는데 아래와같이 star수가 무려 1천정도가 되는 보일러플레이트가 있는것을 발견하게 되었다. 그래서 해당 기반으로 개발하기로 하였다

 

https://github.com/JohnBra/vite-web-extension

GitHub - JohnBra/vite-web-extension: Web extension template to build Chrome and Firefox extensions quickly. Setup with React 19,

 

사용방법

사용방법은 꽤 간단했다 yarn.lock파일이 있는것으로봐서

yarn install 로 설치를 진행해주고

yarn run dev 를 하면은 chrome을 기본으로 삼고있어서 프로젝트 루트에 dist_chrome폴더를 생성해준다.

이후 일반 개발하듯이 내용을 수정하면 다시 빌드를해서 dist_chrome을 최신화 하는 방식으로 진행하는듯으로 보인다.

 

그리고 나온 dist_chrome 폴더를 압축해제된 확장 프로그램 로드에 넣어주면 개발용 상태는 끝났다고 보면된다.

그럼 새로운작업이 있을때마다 새로 내용이들어가게되고 근데 아직 익숙하지않아서 잘모르는거 일 수 있는데 바뀐 상태를 확인하려면

아래와같이 우측하단의 새로고침을 누르고 웹사이트도 혹시모르니 새로고침을하면서 개발을 할수 있는걸 알게되었다.

폴더구조

아래와같은 폴더구조로 이루어져있는데 우리가 건드릴영역은 보통 src폴더내에 있다. 템플릿이다보니 활용하는것들이 다 들어있는 모습인데 백그라운드로 돌아가는 background폴더랑 popup을 보통 활용하기때문에 두가지를 활용을 많이 할것으로보여 펼쳐놓은 상태이다

 

 마치며

아이디어는 아직 이거다 하는건 없고 해당은 과거에 했던것에대한 기록용이라 다시 복습할겸 작성하게되었는데 무언가 새로 오픈하게되면 그거에대한 기록도 남겨보려고한다

일단 라이브러리 선정은 맞추었고 원했던 프레임워크까지 사용하는것이 확인이 되었다.

 

이후 아이디어가 생길때마다 해당 템플릿으로 시도해보려고 한다.