A Safari Extension to Display YouTube Video End Time in Real Time

Have you ever started a YouTube video only to pause mid-watch and wonder whether you’ll finish it before your next meeting or bedtime? That frustration led one developer to create a lightweight Safari extension that displays the exact end time right in the player interface.

Instead of mentally calculating the remaining minutes or repeatedly checking the clock, users now see the end time embedded alongside the current playback position. The extension integrates seamlessly into YouTube’s native time display, showing something like 0:20 / 7:23 · ends 11:44 PM within the same pill-shaped element that displays the video’s duration.

How the Extension Calculates the End Time

The core logic is surprisingly compact, relying on just a few lines of JavaScript to compute the precise end time based on playback speed and current position. First, the extension calculates the remaining seconds by subtracting the current playback position from the total video duration and adjusting for the playback rate.

const remainingSec = (video.duration - video.currentTime) / video.playbackRate;
const endDate = new Date(Date.now() + remainingSec * 1000);

The playback rate adjustment ensures accuracy whether the video is playing at normal speed, half speed, or double speed. The end time is then derived by adding the remaining seconds to the current system time, converting it into a human-readable format that matches YouTube’s existing styling.

Integrating the End Time into YouTube’s Player

YouTube’s player interface uses a series of nested elements to display the current time and total duration. The extension targets the .ytp-time-duration class, which contains the total video length, and injects a new <span> element immediately after it. This approach leverages YouTube’s built-in styling, including font, color, and size, so the end time appears as a natural extension of the interface without requiring custom CSS.

const duration = document.querySelector('.ytp-time-duration');
duration.insertAdjacentElement('afterend', mySpan);

The injected element is designed to blend in effortlessly, maintaining the same visual hierarchy and spacing as the original time display.

Solving the Single-Page App Challenge

YouTube operates as a single-page application, meaning the DOM is rebuilt whenever a user navigates to a new video or returns to the homepage. This behavior would normally cause the extension’s injected element to disappear, breaking the feature. To address this, the developer implemented a two-layer solution.

First, the extension listens for YouTube’s internal navigation events, such as yt-navigate-finish and yt-player-updated, to trigger a re-injection of the end time element whenever the player reloads.

['yt-navigate-finish', 'yt-page-data-updated', 'yt-player-updated'].forEach(evt => {
  document.addEventListener(evt, reinject);
});

As a fallback, a MutationObserver monitors the DOM for changes to the player interface. If the extension’s element is missing and the duration element is present, it automatically reinjects the end time display.

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 });

Together, these mechanisms ensure the end time remains visible across all navigation scenarios, from switching videos to returning to the player after browsing.

Packaging and Distributing the Extension for Safari

Unlike Chrome, Safari does not support loading unpacked extensions directly for testing. Instead, the developer used Apple’s built-in converter tool to wrap the extension in a minimal macOS app.

xcrun safari-web-extension-converter ./youtube-end-time-extension

This command generates a complete Xcode project with the extension embedded. Users can build and run the project in Xcode with a single command, creating a small launcher app that installs the extension into Safari. The process takes just a few minutes for anyone familiar with Xcode.

A minor inconvenience for open-source users is Safari’s requirement to re-enable unsigned extensions each time the browser restarts. While not ideal, it’s a manageable trade-off for a personal tool designed to reduce video-watching stress.

Future Enhancements and Cross-Browser Support

The developer has outlined several potential improvements for future versions. One idea is to add a subtle tooltip that appears on hover, displaying the exact end time down to the second. Another consideration is to automatically hide the end time when a video is paused for an extended period, as the information becomes irrelevant in that state.

Additionally, the codebase is already compatible with Firefox and Chrome using the same Manifest v3 structure. The only barrier to broader adoption is packaging each browser’s respective extension format, which could be streamlined with community contributions.

The extension is open source and available on GitHub, consisting of roughly 100 lines of vanilla JavaScript. It runs on any Mac with Xcode installed and is designed for developers who want to extend or customize the functionality. Pull requests and bug reports are welcome, and user feedback will help shape its next iteration. While it may seem like a small utility, its ability to eliminate video-watching uncertainty could make it a daily essential for many.