- Extension.js는 Chrome, Edge, Firefox용 웹 확장 프로그램을 빌드하는 CLI로,
npx extension@latest create my-extension와npm run dev만으로 개발을 시작할 수 있음 - Manifest V3 파편화, 브라우저별 차이, 콘텐츠 스크립트의 핫 리로드 부재, 대상별 별도 빌드 파이프라인을 무설정 개발 흐름으로 줄이는 것을 목표로 함
- 배경, 콘텐츠, 팝업, 옵션 스크립트에 Hot Module Replacement를 제공하며 React, Vue, Svelte, Preact 컴포넌트와 TypeScript를 1급으로 지원함
extension build --zip으로 Chrome Web Store, Edge Add-ons, Firefox AMO 제출용 프로덕션 ZIP을 만들 수 있고,--browser=firefox같은 브라우저별 빌드도 가능함- 기존 확장 프로그램에도
extension@latest를 개발 의존성으로 추가하고build,dev,preview스크립트를 연결하는 방식으로 도입할 수 있음
Extension.js가 해결하려는 문제
- Extension.js는 Chrome, Edge, Firefox 확장 프로그램을 만들기 위한 CLI 도구임
- 기본 사용 흐름은 새 프로젝트 생성 후 개발 서버를 실행하는 방식임
npx extension@latest create my-extensioncd my-extensionnpm run dev
npm,pnpm,yarn,bun과 함께 동작함- 문서와 템플릿, 예제는 각각 Documentation, Templates, Examples에서 제공됨
개발 경험과 핵심 기능
- 브라우저 확장 개발에서 다루는 Manifest V3 파편화, 브라우저별 차이, 콘텐츠 스크립트 핫 리로드 부재, 대상별 빌드 파이프라인 문제를 줄이는 데 초점을 둠
- Hot Module Replacement는 background, content, popup, options 스크립트에 적용됨
- React, Vue, Svelte, Preact 컴포넌트도 포함됨
- Manifest V3를 기본으로 사용하며 Chrome, Edge, Firefox 대상에 대한 자동 어댑터를 제공함
- 하나의 CLI로 Chrome, Edge, Firefox와 Chromium 또는 Gecko 기반 바이너리를 대상으로 실행할 수 있음
- webpack, rollup, 유지보수할 플러그인 없이 zero config를 지향함
- TypeScript, React, Vue, Svelte, Preact를 1급으로 지원함
extension build --zip으로 Chrome Web Store와 Firefox Add-ons 제출에 맞춘 프로덕션 빌드를 만들 수 있음- 기존 확장 프로그램에도 하나의
devDependency로 추가할 수 있음
다른 확장 개발 도구와의 차별점
- Plasmo, WXT, CRXJS를 써본 사용자를 대상으로 Extension.js의 차이를 기능별로 제시함
- GitHub 샘플을 직접 실행할 수 있음
- 예:
extension dev https://github.com/.../sample
- 예:
- 관리형 브라우저 바이너리를 제공함
- 예:
extension install firefox가 격리된 Firefox 빌드를 내려받음
- 예:
- 콘텐츠 스크립트용 크로스 브라우저 HMR이 내장되어 있으며 별도 플러그인 연결이 필요 없음
- 스토어 제출용 프로덕션 ZIP을 만들 수 있음
- 예:
extension build --zip
- 예:
- 프레임워크에 종속되지 않음
- 사용자 지정 Chromium 및 Gecko 바이너리를 지정할 수 있음
--chromium-binary--gecko-binary
지원 프레임워크와 브라우저
- 지원 프레임워크와 실행 예제는 템플릿 또는 예제로 제공됨
extension dev,extension start,extension preview에서 브라우저 관련 플래그를 사용할 수 있음--browser <chrome | edge | firefox>로 브라우저를 선택함--chromium-binary <path-to-binary>로 사용자 지정 Chromium 바이너리를 지정함--gecko-binary <path-to-binary>로 사용자 지정 Gecko 또는 Firefox 바이너리를 지정함
- 지원 브라우저는 Google Chrome, Microsoft Edge, Mozilla Firefox, Chromium 기반, Gecko 기반임
- Apple Safari는
Next로 표시되어 있음
빌드, 패키징, 관리형 브라우저
- 프로덕션 빌드는
npx extension@latest build로 실행함 - 스토어 제출용 ZIP 패키지는
npx extension@latest build --zip으로 생성함 - 브라우저별 빌드도 가능함
- 예:
npx extension@latest build --browser=firefox --zip
- 예:
- 유용한 빌드 플래그가 제공됨
--zip: 스토어 업로드용 ZIP으로 패키징함--zip-source: 스토어의 소스 코드 검토를 위해 소스 파일을 포함함--zip-filename <name>: 출력 파일명을 제어함--polyfill: 크로스 브라우저 webextension polyfill을 활성화함
- Extension.js는 깨끗한 개발 세션을 위해 격리된 브라우저 바이너리를 다운로드하고 관리할 수 있음
npx extension@latest install firefoxnpx extension@latest install --browser=allnpx extension@latest install --where
기존 확장 프로그램과 샘플 실행
- 기존 확장 프로그램에는 개발 의존성으로 설치함
npm install extension@latest --save-dev
package.json스크립트에extension build,extension dev,extension preview를 연결해 사용할 수 있음npm run dev: 개발npm run build: 프로덕션 빌드npm run preview: 프로덕션 출력 확인
- Chrome Extension Samples의 샘플을 직접 가져와 실행할 수 있음
- 예:
npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge
- 예:
- 커뮤니티와 예제는 Discord, GitHub issues, examples에서 제공됨
- 라이선스는 MIT임