유튜브 영상 종료 시점을 알려주는 사파리 확장 프로그램을 만들었습니다
출처: Dev.to
유튜브 영상을 틀어놓고, 떠나야 하거나, 잠들어야 하거나, 다시 일을 시작해야 할 때 영상을 끝까지 볼 수 있을지 궁금해 본 적 있나요? 저도 그런 생각을 너무 많이 했기에, 이를 해결하기 위해 작은 Safari 확장 프로그램을 만들었습니다.
이 확장은 유튜브 기본 시간 표시 버블 안에 종료 시간을 바로 추가합니다:
0:20 / 7:23 · ends 11:44pm
그게 전부입니다. 간단하지만 의외로 유용합니다.
작동 원리
핵심 로직은 세 줄 정도입니다:
const remainingSec = (video.duration - video.currentTime) / video.playbackRate;
const endDate = new Date(Date.now() + remainingSec * 1000);남은 초를 구하고 재생 속도로 나눈 뒤(0.5×, 1.5×, 2× 등에서도 올바르게 동작하도록), 현재 시각에 더합니다. 끝!
유튜브 플레이어에 주입하기
유튜브 플레이어 컨트롤은 여러 클래스가 붙은 <span> 요소들로 구성됩니다. 여러분이 보는 시간 버블은 .ytp-time-display 요소 안에 다음과 같이 들어 있습니다:
.ytp-time-current— 현재 재생 위치.ytp-time-separator—/.ytp-time-duration— 전체 길이
저는 .ytp-time-duration 바로 뒤에 새로운 <span>을 삽입합니다. 이렇게 하면 종료 시간이 같은 알약(pill) 안에 들어가면서, 유튜브가 사용하는 정확한 폰트, 색상, 크기를 자동으로 물려받아 별도의 스타일을 하드코딩할 필요가 없습니다.
const duration = document.querySelector('.ytp-time-duration');
duration.insertAdjacentElement('afterend', mySpan);유튜브 SPA 문제
유튜브는 싱글 페이지 앱(SPA)이라 영상 간 이동 시 전체 페이지가 새로고침되지 않습니다. 플레이어 DOM이 재구성되면서 제가 삽입한 요소가 사라집니다.
이를 해결하는 방법은 두 가지입니다:
1. 유튜브 자체 네비게이션 이벤트 감지
['yt-navigate-finish', 'yt-page-data-updated', 'yt-player-updated'].forEach(evt => {
document.addEventListener(evt, reinject);
});2. MutationObserver를 활용한 폴백
const obs = new MutationObserver(() => {
if (!document.getElementById('yt-end-time-ext') &&
document.querySelector('.ytp-time-duration')) {
reinject();
}
});
obs.observe(document.body, { childList: true, subtree: true });위 두 가지를 조합하면 제가 테스트한 모든 네비게이션 상황에서 재주입이 안정적으로 이루어집니다.
Safari용 패키징
여기서부터가 조금 번거롭습니다. Safari는 Chrome처럼 압축 해제된 확장을 바로 로드하지 못합니다 — Xcode를 이용해 macOS 앱 형태로 감싸야 합니다.
Apple은 이 과정을 자동화해 주는 변환 도구를 제공합니다:
xcrun safari-web-extension-converter ./youtube-end-time-extension이 명령을 실행하면 확장이 포함된 전체 Xcode 프로젝트가 생성됩니다. ⌘R을 눌러 작은 실행기 앱을 빌드하고, Safari 설정에서 확장을 활성화하면 됩니다. 오픈소스 프로젝트라면 누구든 레포를 클론하고 몇 분 안에 직접 빌드할 수 있어요.
단 한 가지 주의점: Safari를 재시작할 때마다 Develop → Allow Unsigned Extensions 를 다시 켜야 합니다. 약간 번거롭지만 개인용 도구로서는 큰 장애는 아닙니다.
다음에 추가하고 싶은 기능
- 마우스를 올렸을 때 초 단위까지 표시되는 미세 툴팁
- 영상이 오래 정지된 경우 자동 숨김(종료 시간이 의미 없으므로)
- 동일한 Manifest V3 코드베이스를 이용한 Firefox/Chrome 지원 — 이미 호환 가능하니 패키징만 하면 됩니다
사용해 보기
전체 소스는 GitHub에 공개돼 있습니다 — 약 100줄 정도의 순수 JavaScript이며 Xcode가 설치된 모든 Mac에서 동작합니다.
github.com/yourusername/youtube-end-time
이 코드를 기반으로 무언가 만들거나 버그를 발견한다면 PR을 언제든 환영합니다. 일상에서 실제로 유용하게 쓰이는지 알려주시면 좋겠어요.