피드로 돌아가기
YouTube: Make the Video Timer Always Visible
Dev.toDev.to
Frontend

DevTools Local Overrides로 구현하는 YouTube 타이머 상시 노출 전략

YouTube: Make the Video Timer Always Visible

Andrew Elans2026년 4월 4일2intermediate

Context

YouTube 플레이어 컨트롤러의 자동 숨김 기능으로 인한 타임스탬프 확인 제약. 컨트롤러가 사라지면 타이머 갱신이 중단되는 구조적 한계. 지속적인 시간 확인을 위해 반복적인 마우스 호버 및 재생/일시정지 조작 필요.

Technical Solution

  • ytp-time-current 클래스 요소와 video 엘리먼트의 currentTime 속성을 통한 시간 데이터 식별
  • 플레이어 컨트롤러 숨김을 트리거하는 autohideupdate 이벤트 발행 로직 분석
  • Chrome DevTools의 Search 패널을 이용해 base.js 내 이벤트 발행 지점 탐색
  • Local Overrides 기능을 활용하여 브라우저 수준에서 서버 스크립트의 동작을 로컬 파일로 대체
  • Q.publish("autohideupdate", U) 호출부를 주석 처리하여 자동 숨김 로직을 무효화하는 런타임 패치 적용
  • 캐시 삭제 및 강력한 재로드(Hard Reload)를 통한 수정된 JS 파일의 즉시 반영

Key Takeaway

클라이언트 사이드에서 실행되는 미니파이된 JS 코드의 실행 흐름을 분석하고 로컬 오버라이드를 통해 런타임 동작을 제어하는 리버스 엔지니어링 기법의 활용.


특정 웹 서비스의 UI/UX 제약을 해결하기 위해 DevTools Local Overrides를 통한 런타임 스크립트 패치를 검토할 것

원문 읽기