JS 개발자가 Chrome 확장丑闻에 영감받아 자체 JSON 뷰어를 개발함

Context

JSON Formatter(200만+ 사용자)가 동의 없이 donation 팝업을 삽입하여 신뢰를 잃음. 기존 대안들은 기능 부족, 업데이트 중단, MV3 미호환 등의 문제점이 존재함.

Technical Solution

• Preact + TypeScript: React 45KB 대비 3KB gzipped로 확장 프로그램 번들 크기 최소화함
• Shadow DOM: 호스트 페이지 스타일 격리를 통해 CSS 충돌 문제 완전 해결함
• Dynamic injection: Content-Type 검증 후 JSON/YAML/XML만 탐지하여 불필요한 스크립트 실행 방지함
• Web Workers: 5MB 이상 파일을 메인 스레드 외에서 처리하여 UI 멈춤 현상 제거함
• ExtensionPay + Stripe: 백엔드 없는 서버리스 결제 시스템으로 인프라 운영 부담 경감함

Impact

50MB JSON 파일도 탭 멈춤 없이 렌더링 가능함. JWT, Base64 자동 디코딩, JSONPath 쿼리, LCS diff 엔진 등 고급 기능 제공함.

Key Takeaway

Chrome 확장 프로그램에서 Shadow DOM은 호스트 페이지와의 스타일 격리를 위한 필수 선택이며, Web Workers는 대용량 파일 처리 시 메인 스레드 블로킹을 방지하는 핵심 기술임.