Manifest V3 기반 Local Storage 활용 탭 체류 시간 추적 시스템 구현

I Built a Chrome Extension to Track How Long You Actually Spend on Each Tab

I_See_You2026년 5월 11일2분beginner

AI 요약

Context

브라우저 히스토리가 방문 기록만 제공하고 실제 체류 시간을 기록하지 못하는 한계 존재. 사용자의 실제 집중 시간 측정과 데이터 프라이버시 보장을 위한 로컬 기반 추적 아키텍처 필요.

Technical Solution

Manifest V3 기반 Service Worker 도입을 통한 백그라운드 타이머 트래킹 구조 설계
Content Scripts를 활용한 DOM 주입 방식으로 실시간 상태를 표시하는 Floating Widget 구현
Focus Mode 로직을 통한 활성 탭 전환 시 이전 탭의 타이머를 자동 일시정지하는 상태 제어 메커니즘 적용
Chrome Storage API 기반의 로컬 데이터 저장으로 서버 전송 없는 Privacy-First 데이터 아키텍처 채택
페이지 리로드 시 타이머 초기화 방지를 위한 Lock 기능 및 Persistence 레이어 설계
외부 프레임워크 배제 및 Plain JS/HTML/CSS 사용으로 런타임 오버헤드 최소화

실천 포인트

- Manifest V3 환경에서 Service Worker와 Content Script 간의 상태 동기화 전략 검토 - 서버리스 로컬 저장소(Local Storage)를 활용한 사용자 개인정보 보호 설계 적용 - 탭 전환 및 페이지 새로고침과 같은 브라우저 라이프사이클 이벤트에 따른 상태 유지 전략 수립

태그

#Chrome Storage API #Manifest V3 #Service Worker #Content Scripts #Local Storage

원문 읽기