피드로 돌아가기
Dev.toFrontend
원문 읽기
Manifest V3 기반 로컬 스토리지 활용 실시간 탭 체류 시간 트래킹 시스템 구현
I Built a Chrome Extension to Track How Long You Actually Spend on Each Tab
AI 요약
Context
브라우저 히스토리는 방문 기록만 제공할 뿐 실제 체류 시간을 측정하지 못하는 한계 존재. 리서치 및 업무 세션 중 발생하는 시간 소모를 정밀하게 추적하기 위한 실시간 모니터링 도구 필요성 대두.
Technical Solution
- Manifest V3 기반의 Service Worker를 활용하여 백그라운드에서 타이머 상태를 지속적으로 추적하는 구조 설계
- Chrome Storage API를 통한 로컬 데이터 저장으로 서버 통신 없는 Zero-latency 데이터 지속성 확보
- Content Scripts를 통해 페이지 내 Floating Widget을 주입하여 사용자 인터랙션 없이 실시간 시각화 구현
- 활성 탭 변경 시 타 탭의 타이머를 자동 정지시키는 Focus Mode 로직으로 실제 체류 시간 측정 정밀도 향상
- 페이지 새로고침 시 데이터 초기화를 방지하는 Lock Timer 메커니즘을 통해 세션 연속성 유지
- 외부 프레임워크 없이 Plain JS, HTML, CSS만으로 구현하여 확장 프로그램의 런타임 오버헤드 최소화
실천 포인트
1. 브라우저 확장 프로그램 개발 시 Manifest V3의 Service Worker 생명주기를 고려한 상태 관리 설계 검토
2. 민감한 사용자 데이터를 다룰 때 서버 전송 없이 Chrome Storage API를 활용한 Local-first 아키텍처 적용 고려
3. 탭 전환 이벤트와 타이머 상태를 동기화하여 실제 사용자 활동 시간(Active Time)을 정밀하게 측정하는 로직 구현