Extension
크롬 확장프로그램 react로 개발하기 (WXT: Web Extension Framework)
curious week
2025. 3. 24. 20:39
React로 크롬이나 웨일 확장 프로그램을 작성할 수 있을까? 찾아보다가 CRXjs를 사용하려고 했지만 2025년 5월에 업데이트를 멈출수도 있다는 공지를 확인하고 WTX를 이용해서 만들기로 했다.
WXT는 크롬 확장 프로그램을 React + TypeScript로 빠르게, 편하게 만들기 위한 최신 개발도구이다.
Next-gen Web Extension Framework – WXT
WXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.
wxt.dev
npx로 설치가 가능하지만 bun도 가능하다.
// 설치
bunx wxt@latest init
WXT 0.19.29 오후 12:57:31
ℹ Initializing new project 오후 12:57:31
// 선택
✔ Project Directory … ./
✔ Choose a template › react
✔ Package Manager › bun
✔ Downloading template일단 설치된 파일을 테스트 빌드 해본다.
1. 'chrome://extensions/'으로 접속해서 아래 '개발자 모드' 토글을 클릭해서 개발자 모드를 활성화 한다.
2. 그리고 '압축해제된 확장 프로그램을 로드합니다.'를 클릭한다.
3. 내 wxt가 설치된 디렉토리 중 ./.output/chrome-mv3 폴더를 선택한다. .output(숨김파일)이기 때문에 드래그해서 넣으면 경로가 잡힌다.
4. 아래 화면이 나오면 wxt를 사용할 준비가 완료된 것이다.
5. package.json을 보면 bun run zip으로 zip 파일을 생성해서 배포를 할 수 있도록 설정돼 있는 걸 확인할 수 있다. [배포 시 bun run zip]
