chrome.storage.local 기반 상태 유지 및 Google API 연동형 데이터 파이프라인 구축

Context

수동 캡처로 인한 데이터 엔트리 오버헤드와 기존 Scraper의 불안정한 HTML Selector 의존성으로 인한 데이터 오염 발생. 특히 Extension Popup의 Stateless 특성으로 인한 인증 상태 유지 및 Cross-Origin 요청 시 Cookie 전송 제한 문제 직면.

Technical Solution

• Vite + TypeScript 기반 Manifest V3 구조를 채택하여 런타임 안정성 확보
• Monorepo 아키텍처를 통한 Next.js 웹 대시보드와 Extension 간 Auth logic 및 Google API Helper 레이어 공유
• httpOnly Cookie의 cross-origin fetch 제약을 해결하기 위해 chrome.storage.local을 활용한 Token Persistence 전략 구현
• 서버 저장소를 배제하고 Google Drive 및 Sheets를 직접 스토리지로 사용하는 Zero-Server Data Ownership 설계
• DOM 기반 자동 스크래핑과 사용자 의도적 캡처를 결합하여 데이터 노이즈 제거 및 구조적 Metadata 매핑 구현

Impact

• 데이터 캡처 및 저장 프로세스를 기존 수동 방식 대비 5초 내외로 단축
• 구조화된 Metadata 연결을 통해 특정 조건의 데이터 검색 시간을 10초 이내로 단축

Key Takeaway

Extension 환경의 특수한 라이프사이클을 고려하여 인메모리 상태가 아닌 브라우저 전용 스토리지 기반의 상태 복구 메커니즘 설계 필요.