브라우저 확장 프로그램 개발 시작하기

브라우저 확장 프로그램 개발은 프론트엔드 기술을 사용하지만, API와 작동 방식이 웹 페이지와는 다르기 때문에 개발 프레임워크를 사용하면 효율성을 크게 높일 수 있습니다. 브라우저 확장 프로그램 개발은 웹과 앱 개발에 비해 아직 틈새 분야이며, 개발자 커뮤니티도 확실히 덜 활발합니다. 다행히도 필요한 개발 도구는 모두 갖춰져 있습니다. 제가 사용한 것들을 정리해보겠습니다.

현재 주요 브라우저들은 모두 확장 프로그램 개발을 위한 통일된 표준인 manifest v3를 따르고 있어서, 개발 과정과 기술 스택이 비슷합니다. 세부사항에서 차이가 있을 수 있는데, 제가 겪은 부분들은 표시해두겠습니다.

개발 프레임워크

적절한 개발 프레임워크는 최소한 저장소 구조 설정, 핫 리로드 디버깅 지원, 브라우저 확장 프로그램 인터페이스 타입 힌트 지원 등을 제공해야 합니다. 다음 기술 스택 중 하나를 선택할 수 있습니다.

코드 저장소 템플릿

React + typescript + vite + monorepo: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

정확히 말하면, 이것은 프레임워크가 아닌 템플릿입니다. 개발 프레임워크가 가져야 할 기능을 모두 포함하고 있습니다. 인터페이스가 그리 복잡하지 않은 브라우저 확장 프로그램 개발에서는, 구현 세부사항을 숨기는 프레임워크보다 모든 세부사항을 보여주는 저장소 템플릿을 개인적으로 선호합니다.

• HMR, sourcemap 등 지원
• pnpm + turbo를 사용하여 monorepo 관리
• 탭 홈페이지, 개발자 도구, 사이드바 등 Chrome 확장 프로그램의 모든 기능 구현을 제공하여 참조와 교체가 용이
• Chrome, Firefox 및 기타 주요 브라우저용 패키징. Firefox 기본 호환성
• 숨겨진 세부사항 없이 모든 코드가 표시되어 이해와 수정이 용이

Plasmo

위의 템플릿이 마음에 들지 않는다면 Plasmo 프레임워크를 고려해볼 수 있습니다

• React, Vue, Angular 등 주류 프레임워크 지원
• HMR 등 디버깅 기능 지원
• 번들링에 Parcel 사용 (vite 아님)
• 일부 세부사항(매니페스트 생성, 콘텐츠 UI 렌더링 프로세스 등)이 캡슐화되어 있어 이해하기 어려움

디버깅

• 확장 프로그램 로드
  • 저장소에서 npm dev 실행
  • Chrome에서 확장 프로그램 열기: chrome://extensions/
  • “개발자 모드” 활성화 -> “압축해제된 확장 프로그램을 로드합니다” 클릭 -> 컴파일된 출력 폴더 선택
• 디버깅은 Chrome DevTools를 통해 구현
  • 콘텐츠 스크립트: “소스” 탭에서 “Content Scripts”를 선택하여 코드 디버그
  • 백그라운드 스크립트는 서비스 워커에서 실행되므로, chrome://extensions/ 열기 -> 확장 프로그램 찾기 -> 서비스 워커 클릭하여 코드 디버그