Chrome Extension으로 구현한 실시간 크로스 플랫폼 가격 비교 자동화

Context

여러 커머스 플랫폼을 개별 탭으로 열어 가격을 수동 비교하는 비효율적 워크플로우. 수많은 브라우저 탭 생성으로 인한 메모리 낭비 및 인지 부하 발생. 플랫폼별 상이한 HTML 구조로 인한 데이터 추출의 어려움.

Technical Solution

• Manifest V3 기반의 Content Scripts, Service Worker, Side Panel로 분리된 3계층 통신 아키텍처 설계
• 사용자 경험의 연속성 보장을 위해 Popup 대신 상태 유지가 가능한 Side Panel(React + Zustand) 채택
• Amazon의 잦은 DOM 변경에 대응하기 위해 우선순위 기반의 다중 Selector Fallback 로직 구현
• Mercari의 Next.js SPA 구조 해결을 위해 Background Service Worker에서 JSON API 직접 호출 방식 적용
• 검색 정확도 향상을 위해 ASIN, 브랜드명, 모델번호 등 메타데이터를 추출하여 최적화된 쿼리 생성
• Vite의 HMR(Hot Module Replacement)을 도입하여 확장 프로그램 개발 루프 최적화

Key Takeaway

동적인 웹 환경에서 데이터 추출의 안정성을 확보하기 위해 단일 Selector 의존성을 탈피하고 계층적 폴백 전략을 구축하는 설계 원칙.