▲

GN⁺: Show HN: 빌드 구성 없이 웹 확장 프로그램을 생성하는 CLI 도구 제작

 (github.com/cezaraugusto)
2P by neo 15일전 | favorite | 댓글 1개

Extension.js 소개

  • Extension.js는 설정이 필요 없는 플러그 앤 플레이 방식의 크로스 브라우저 확장 개발 도구
  • TypeScript, WebAssembly, React, 모던 JavaScript를 기본으로 지원하여 크로스 브라우저 확장을 만들 수 있음

새로운 확장 만들기

  • 아래 명령어로 새 확장을 쉽게 만들 수 있음 
    npx extension create my-extension
cd my-extension
npm run dev
  • 명령어 실행 후 새 브라우저 인스턴스가 열리면 바로 개발을 시작할 수 있음

Chrome Extension Samples 활용하기

  • Chrome Extension Samples 저장소의 샘플을 활용하여 빠르게 개발 시작 가능
    1. 터미널 열기
    2. 프로젝트를 만들 디렉토리로 이동
    3. 아래 명령어 실행 
      npx extension dev <sample-name>
    • <sample-name>은 Chrome Extension Samples에서 사용할 샘플 이름으로 대체
  • 예시: page-redder 샘플 요청 
    npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Microsoft Edge에서 Chrome Extension Samples 사용하기

  • Extension.js는 Microsoft Edge를 포함한 다양한 브라우저 지원
  • Edge 호환 확장 시작 방법:
    1. 터미널 열기
    2. 원하는 프로젝트 디렉토리로 이동
    3. 아래 명령어 실행 
      npx extension dev <sample-name> --browser=edge
    • <sample-name>은 사용할 샘플 이름으로 대체
  • 예시: magic8ball 샘플을 Edge에서 실행 
    npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Edge에서 Mozilla 부가 기능 실행하기

  • Firefox와 Edge 간 격차를 줄이기 위해 Edge에서 Mozilla 부가 기능 실행 가능
    1. 프로젝트 디렉토리로 이동
    2. 아래 명령어 사용 
      npx extension dev <addon-name> --browser=edge --polyfill=true
    • Mozilla 부가 기능을 가져와 Edge용으로 조정
  • 예시: MDN WebExtensions Examples의 Apply CSS 샘플을 Edge에서 실행 
    npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

기존 확장에 Extension.js 사용하기

  • 기존 확장이 패키지 관리자를 사용 중이라면 Extension.js 패키지 설치 후 스크립트 생성하여 실행 가능
    1. devDependency로 extension 설치 
      npm install extension --save-dev
    2. npm 스크립트와 Extension.js 명령어 연결 
      {
  "scripts": {
    "build": "extension build", 
    "dev": "extension dev",
    "start": "extension start"  
  },
  "devDependencies": {
    "extension": "latest"
  }
}
  • 개발 시 npm run dev, 프로덕션 모드 시각화는 npm run start, 프로덕션 모드 빌드는 npm run build 사용

개발용 특정 브라우저 사용

  • 데스크톱 브라우저 지원 현황

| Brave | Chrome | Edge | Firefox | Opera | Safari | Vivaldi | |---|---|---|---|---|---|---| | ☑️ | ✅ | ✅ | ⛔️ | ☑️ | ⛔️ | ☑️ |

  • ☑️ = 작동 가능성 높으나 브라우저 실행기 미지원
  • 모바일 브라우저 지원 현황

| Firefox Android | iOS Safari | |---|---| | ⛔️ | ⛔️ |

  • 특정 브라우저 대상 시 dev/start 명령에 --browser 플래그 전달
    • 예: npx extension dev path/to/extension --browser=edge
  • 힌트: --browser="all" 전달 시 사용 가능한 모든 브라우저 한번에 로드

GN⁺의 의견

  • Extension.js는 크로스 브라우저 확장 개발을 위한 강력한 도구로 보임. 특히 설정 없이 바로 사용할 수 있고, 여러 브라우저를 손쉽게 지원할 수 있어 개발 시간을 크게 단축시킬 수 있을 것 같음.
  • Chrome Extension Samples나 MDN WebExtensions Examples 등 기존 샘플을 활용할 수 있는 것도 큰 장점. 초보 개발자들도 쉽게 시작할 수 있을 듯.
  • 다만 Firefox나 Safari 등 일부 브라우저는 아직 완벽히 지원되지 않는 것으로 보여 주의가 필요해 보임. 특정 브라우저만 타겟으로 할 경우 해당 브라우저의 전용 개발 도구 사용을 고려해 봐야 할 듯.
  • 기존 Plasmo, WebExtensions API 등 유사 도구들과 비교했을 때의 장단점이 궁금함. 특히 Manifest V3 등 최신 스펙 대응 여부를 확인해 볼 필요가 있어 보임.
▲
neo 15일전  [-]
Hacker News 의견
  • Chrome 확장 프로그램 개발을 위한 유용한 프레임워크인 Extension.js 소개됨
    • 현재 Firefox 지원은 완벽하지 않은 상태
  • 다른 개발자들도 Chrome 확장 프로그램 개발 시 어려움을 겪은 경험 공유
    • 특히 스타일 적용이 까다로웠음
    • Extension.js가 이러한 어려움을 해소해 줄 것으로 기대됨
  • Extension.js의 README 문서도 잘 작성되어 있어 호평받음
  • 구글 플레이의 복잡성 때문에 앱에 확장 프로그램 추가를 주저했던 개발자도 Extension.js 사용을 고려 중
  • 확장 프로그램과 탭 간 통신 기능도 Extension.js에 포함되면 좋겠다는 의견 제시됨
    • DOM에서 읽거나 확장 프로그램에서 활성 탭으로 메시지 전송이 불편했음
  • Plasmo와 같은 유사 프레임워크와의 비교에 대한 질문 제기됨
  • Chrome 확장 프로그램 개발 시 겪는 가짜 증후군(Imposter Syndrome)에 대한 언급
    • 새 프로젝트 생성이 어려움
    • Extension.js가 이를 해소해 줄 것으로 기대됨
  • Safari 지원은 safari-web-extension-converter CLI 도구를 사용하면 비교적 간단할 것이라는 의견 제시됨
  • 기존에 Chrome 확장 프로그램을 개발해 본 경험에 비추어 Extension.js의 장점에 대한 궁금증 표현됨
    • 단순히 파일 복사 이상의 기능이 무엇인지?
    • 크로스 브라우저 지원? 다국어 지원?
  • Chrome 확장 프로그램 개발 시 개발 도구의 부족함을 느꼈던 개발자의 Extension.js에 대한 기대감 표현됨
답변달기