피드로 돌아가기
Auto-Block Focus Time in Google Calendar — Building a Schedule-Based Chrome Extension
Dev.toDev.to
Frontend

OAuth 배제한 Pure DOM Overlay 기반 로컬 스케줄링 시스템 구현

Auto-Block Focus Time in Google Calendar — Building a Schedule-Based Chrome Extension

SHOTA2026년 6월 16일4분intermediate

AI 요약

Context

기존 Focus-time 도구들의 과도한 OAuth 권한 요구와 서버 기반 데이터 동기화로 인한 개인정보 노출 위험 존재. 클라우드 의존성을 완전히 제거한 로컬 우선(Local-first) 방식의 시각적 블로킹 도구 필요성 대두.

Technical Solution

  • Google Calendar API 대신 Content Script를 통한 Pure DOM Overlay 방식으로 데이터 외부 유출 차단
  • chrome.storage.local을 활용한 규칙 저장으로 서버 없는 독립적 상태 관리 체계 구축
  • MutationObserver를 통한 SPA 내 뷰 전환 감지 및 Overlay 재주입 로직으로 UI 일관성 유지
  • setInterval 폴링과 subtree: false 옵션 설정을 통한 DOM 하이드레이션 대응 및 렌더링 성능 최적화
  • MV3 Service Worker의 생명주기 제약을 chrome.alarms 1분 주기 알람으로 해결하여 백그라운드 알림 트리거 구현
  • 반투명 레이어 설계를 통한 기존 일정 가시성 확보 및 API 접근 권한 제거라는 Trade-off 최적화

실천 포인트

1. 외부 API 권한 획득 비용이 높을 때 DOM 조작 기반의 Overlay UI 대안 검토

2. MV3 Service Worker의 간헐적 종료를 대비한 `chrome.alarms` 기반의 주기적 Wake-up 전략 적용

3. MutationObserver 사용 시 `subtree: false` 설정을 통해 불필요한 이벤트 트리거를 방지하고 성능 확보

태그

#MutationObserver#Content Script#MV3 Service Worker#DOM Overlay#Local-First
원문 읽기