Show HN: 빌드 설정 없이 웹 확장 프로그램을 제작하는 CLI 도구를 만들었습니다

Chrome, Edge, Firefox용 확장 프로그램을 제작하세요. 빌드 설정(build config)이 필요하지 않습니다.

npx extension@latest create my-extension
cd my-extension
npm run dev

npm, pnpm, yarn, bun과 함께 작동합니다.

문서(Documentation) · 템플릿(Templates) · 예제(Examples) · Discord

브라우저 확장 프로그램은 현대 웹에서 최악의 개발 경험(dev experience)을 제공합니다. Manifest V3 파편화, 브라우저별 특이 사항, 컨텐츠 스크립트(content scripts)를 위한 핫 리로드(hot reload) 부재, 그리고 각 타겟마다 별도의 빌드 파이프라인(build pipeline)이 필요합니다. Extension.js가 이를 해결합니다.

핫 모듈 교체 (Hot Module Replacement): background, content, popup, options 스크립트를 지원하며, React, Vue, Svelte, Preact 컴포넌트를 포함합니다.
기본적으로 Manifest V3 지원: Chrome, Edge, Firefox 타겟을 위한 자동 어댑터(adapters)를 제공합니다.
단일 CLI: Chrome, Edge, Firefox 및 모든 Chromium 또는 Gecko 바이너리를 지원합니다.
제로 설정 (Zero config): webpack, rollup, 유지 관리해야 할 플러그인이 없습니다.
최상급 지원 (First-class support): TypeScript, React, Vue, Svelte, Preact를 지원합니다.
프로덕션 빌드 (Production builds): extension build --zip을 통해 Chrome 웹 스토어 및 Firefox Add-ons에 바로 배포 가능한 상태로 빌드합니다.
기존 확장 프로그램에 즉시 적용 (Drop-in): 하나의 devDependency만으로 기존 확장 프로그램에 적용 가능합니다.

create-a-new-extension.mp4

또는 설치를 건너뛰고 브라우저에서 라이브 템플릿을 시도해 보세요.

만약 Plasmo, WXT, 또는 CRXJS를 사용해 본 적이 있다면, Extension.js가 다른 도구들과 차별화되는 점은 다음과 같습니다:

기능	Extension.js
모든 GitHub 샘플을 직접 실행	extension dev https://github.com/.../sample
...

extension dev, extension start, 또는 extension preview 명령 시 다음 플래그(flags)를 사용하세요:

• 브라우저 선택:
  --browser <chrome | edge | firefox>

• 사용자 정의 Chromium 바이너리:
  --chromium-binary <path-to-binary>

• 사용자 정의 Gecko (Firefox) 바이너리:
  --gecko-binary <path-to-binary>

# Chrome (시스템 기본값)
npx extension@latest dev --browser=chrome
# Edge
...

| Google Chrome ✅ 지원됨 |
| Microsoft Edge ✅ 지원됨 |
| Mozilla Firefox ✅ 지원됨 |
| Apple Safari 🚙 다음 예정 |
| Chromium 기반 ✅ 지원됨 |
| Gecko 기반 ✅ 지원됨 |

Chrome Web Store, Edge Add-ons 또는 Firefox AMO에 제출할 수 있도록 프로덕션용 번들 (production-ready bundle)을 빌드하고 ZIP 파일로 압축하세요:

# 프로덕션 빌드 (Production build)
npx extension@latest build
# ZIP으로 패키징된 프로덕션 빌드 (Production build packaged as a ZIP)
...

유용한 플래그 (flags):

--zip
빌드 결과물을 스토어 업로드 가능한 ZIP 파일로 패키징합니다.

--zip-source
스토어의 소스 코드 리뷰를 위해 소스 파일 (source files)을 포함합니다.

--zip-filename <name>
출력 파일 이름을 제어합니다.

--polyfill
크로스 브라우저 웹 확장 프로그램 폴리필 (cross-browser webextension polyfill)을 활성화합니다.

복잡한 시스템 설치 과정을 건너뛰세요. Extension.js는 깨끗한 개발 세션을 위해 격리된 브라우저 바이너리 (isolated browser binaries)를 다운로드하고 관리할 수 있습니다:

# 관리형 Firefox 빌드 설치
npx extension@latest install firefox
# Chrome과 Edge를 한 번에 설치
...

Extension.js를 개발 의존성 (dev dependency)으로 설치하고 스크립트를 연결하세요.

npm install extension@latest --save-dev

{
"scripts": {
"build": "extension build",
...

개발할 때는 npm run dev를, 프로덕션용 빌드에는 npm run build를, 그리고 프로덕션 결과물을 검사하려면 npm run preview를 실행하세요. 실제 작동 모습을 확인해 보세요.

Chrome Extension Samples에서 원하는 샘플을 가져와 직접 실행할 수 있습니다:

npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge

chrome-extension-sample-page-redder-on-edge.mp4

• Extension.js가 더 빠른 배포에 도움이 되었다면 저장소 (repo)에 Star를 눌러주세요
• 도움말과 피드백을 위해 Discord에 참여하세요
• GitHub에서 이슈 (issues) 및 기능 요청 (feature requests)을 남겨주세요
• 프로덕션용 예제들을 살펴보세요

MIT (c) Cezar Augusto 및 Extension.js 저자들.