피드로 돌아가기
Dev.toFrontend
원문 읽기
DOM Injection과 MutationObserver를 통한 TVer 재생 제어 구현
I Built a Chrome Extension That Adds Playback Speed and Picture-in-Picture to Japan's Free Streaming Service
AI 요약
Context
표준 HTML5 엘리먼트를 사용함에도 UI 수준에서 playback speed와 Picture-in-Picture 기능을 제한한 TVer 플랫폼의 제약 상황. SPA 구조로 인한 페이지 전환 시 비디오 엘리먼트 교체 및 iframe 기반 광고 격리 구조로 인한 접근성 문제 발생.
Technical Solution
- Content Script를 통한 Floating Control Panel 주입으로 사용자 인터페이스 확장
- iframe 및 Shadow DOM 내 비디오 엘리먼트를 탐색하는 재귀적 querySelector 로직 설계
- MutationObserver를 활용해 SPA 내 비디오 엘리먼트 교체 시점에 설정값을 자동 재적용하는 상태 유지 구조 구현
- loadedmetadata 이벤트 리스너에 { once: true } 옵션을 적용한 메모리 누수 방지 설계
- requestPictureInPicture API 호출 시 NotAllowedError 방지를 위한 User Gesture 기반 핸들러 매핑
- CSS 클래스 및 Data Attribute 분석을 통한 Ad-playing 상태 식별 및 광고 구간 속도 변경 제한 로직 적용
실천 포인트
- SPA 환경에서 동적으로 교체되는 DOM 요소의 상태를 유지하기 위해 MutationObserver 검토 - 외부 사이트의 비디오 엘리먼트 접근 시 Cross-origin iframe 예외 처리를 위한 try-catch 구조 적용 - 브라우저 API(PiP 등) 호출 시 반드시 사용자 인터랙션(Click) 이벤트 체인 내에서 실행하도록 설계