피드로 돌아가기
Dev.toFrontend
원문 읽기
Preact 기반 63KB 경량 설계 및 Manifest V3 Clipboard 전략 구현
I Built TabScribe: A Free Chrome Extension to Copy All Browser Tabs as Markdown (Under 100KB, 12 Languages)
AI 요약
Context
기존 Chrome Extension들의 과도한 기능 포함으로 인한 Bloatware 현상과 단순 텍스트 중심의 제한적 출력 형식 분석. Manifest V3의 Service Worker 도입에 따른 DOM 부재로 인한 Clipboard API 접근 불가 제약 발생.
Technical Solution
- 런타임 의존성 제로 및 Preact 채택을 통한 React 대비 번들 사이즈 획기적 절감
- Clipboard API, execCommand, Offscreen Document를 연계한 3단계 Double-fallback 전략 설계
- Service Worker의 DOM 부재 문제를 해결하기 위해 chrome.offscreen API를 통한 쓰기 권한 우회 구현
- chrome.i18n API와 Locale JSON 구조를 활용한 12개 언어 확장성 확보
- chrome.storage.local 기반의 로컬 데이터 저장 구조로 Zero-server-request 개인정보 보호 설계
Impact
- Preact 도입으로 React(40KB+) 대비 3KB 수준의 풋프린트 달성 및 전체 번들 크기 63KB(gzipped 17KB) 구현
실천 포인트
1. Chrome Extension 개발 시 번들 크기 최적화를 위해 React 대신 Preact 검토
2. Manifest V3 환경에서 Clipboard 접근 필요 시 Offscreen Document 활용 전략 수립
3. 외부 서버 없이 chrome.storage.local을 활용한 Privacy-first 아키텍처 설계 적용