피드로 돌아가기
Dev.toFrontend
원문 읽기
YouTube SPA 환경 내 DOM 지속성 확보를 통한 실시간 종료 시간 계산 확장 프로그램 구현
I Built a Safari Extension That Shows When Your YouTube Video Ends
AI 요약
Context
YouTube의 기본 플레이어는 영상의 종료 시각을 제공하지 않는 제약이 있음. 특히 YouTube가 Single Page Application(SPA) 구조로 설계되어 페이지 전환 시 DOM이 동적으로 재구성됨에 따라, 단순 주입 방식으로는 UI 요소의 지속성을 유지하기 어려운 환경임.
Technical Solution
- playbackRate를 반영한 잔여 시간 계산 로직 구현으로 배속 재생 시에도 정확한 종료 시각 산출
- .ytp-time-duration 요소 뒤에 을 삽입하는 전략을 통해 별도 CSS 정의 없이 YouTube 네이티브 스타일 상속
- yt-navigate-finish 등 YouTube 전용 Navigation Event 리스너 등록을 통한 페이지 전환 시 재주입 트리거 확보
- MutationObserver를 활용한 Fallback 메커니즘 구축으로 DOM 변경 사항을 감시하여 주입 누락 방지
- Safari Web Extension Converter를 이용해 Web Extension을 macOS App 형태로 래핑하여 배포 구조 최적화
실천 포인트
1. SPA 환경에서 외부 스크립트 주입 시, 단순 load 이벤트가 아닌 프레임워크 전용 내비게이션 이벤트 확인
2. DOM 변경이 빈번한 요소에 접근할 때 MutationObserver를 통한 상태 감시 및 재주입 로직 설계
3. 네이티브 UI와의 일관성을 위해 스타일 하드코딩 대신 기존 클래스 계층 구조 내 삽입 전략 검토