Safari-Erweiterung: YouTube-Videodauer in Echtzeit anzeigen

Haben Sie sich schon einmal gewünscht, dass YouTube Ihnen direkt anzeigt, wann Ihr aktuelles Video endet? Diese Idee war der Auslöser für eine benutzerfreundliche Safari-Erweiterung, die genau das umsetzt. Statt selbst die verbleibende Zeit zu schätzen, sehen Sie nun die Endzeit direkt im YouTube-Player – präzise und ohne Umwege.

Warum diese Erweiterung sinnvoll ist

Die meisten YouTube-Nutzer kennen das Problem: Man startet ein Video, muss aber irgendwann gehen oder ist abgelenkt. Plötzlich fragt man sich, ob man den Clip noch schaffen wird. Bisher blieb nur das manuelle Berechnen der verbleibenden Zeit – ein zeitaufwendiger Prozess.

Genau hier setzt die Erweiterung an. Sie blendet die Endzeit automatisch in der Zeitanzeige von YouTube ein, sodass Sie auf einen Blick erkennen, ob Sie das Video noch rechtzeitig abschließen können. Die Lösung ist zwar simpel, aber für Vielnutzer von YouTube ein echter Game-Changer.

Wie die Technik im Hintergrund funktioniert

Das Herzstück der Erweiterung besteht aus nur wenigen Zeilen JavaScript-Code. Die Logik berechnet die verbleibende Spielzeit unter Berücksichtigung der aktuellen Wiedergabegeschwindigkeit – egal, ob das Video in halber, normaler oder doppelter Geschwindigkeit läuft.

const verbleibendeSekunden = (video.dauer - video.aktuelleZeit) / video.wiedergabeGeschwindigkeit;
const endDatum = new Date(Date.now() + verbleibendeSekunden * 1000);

Dabei wird die Differenz zwischen der Gesamtlänge des Videos und der aktuellen Position berechnet, durch die Wiedergabegeschwindigkeit geteilt und zum aktuellen Zeitpunkt addiert. So erhält man das exakte Enddatum und -uhrzeit des Videos.

Nahtlose Integration in YouTubes Player

Die größte Herausforderung bestand darin, die Endzeit so einzubinden, dass sie sich natürlich in das YouTube-Design einfügt. Der Player von YouTube besteht aus mehreren HTML-Elementen mit spezifischen Klassen, darunter:

• .ytp-time-current – aktuelle Position im Video
• .ytp-time-separator – der Schrägstrich („/“)
• .ytp-time-duration – Gesamtlänge des Videos

Die Erweiterung fügt ein neues ``-Element direkt nach der Gesamtlänge ein. Dadurch übernimmt es automatisch Schriftart, Farbe und Größe von YouTube und wirkt wie ein natürlicher Bestandteil der Benutzeroberfläche.

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

Umgang mit YouTubes Single-Page-App-Architektur

YouTube lädt Videos und Seiteninhalte dynamisch nach – ohne vollständiges Neuladen der Seite. Das bedeutet, dass das DOM des Players bei jedem Wechsel neu aufgebaut wird. Ohne besondere Maßnahmen würde die eingeblendete Endzeit nach jedem Video- oder Seitenwechsel verschwinden.

Um dies zu verhindern, setzt die Erweiterung auf zwei Strategien:

• Ereignisüberwachung: YouTube löst spezifische Ereignisse aus, etwa yt-navigate-finish, yt-page-data-updated oder yt-player-updated. Die Erweiterung reagiert auf diese Ereignisse und fügt die Endzeit erneut ein.

• MutationObserver als Backup: Falls die Ereignisse nicht ausreichen, überwacht ein MutationObserver kontinuierlich Änderungen am DOM. Sobald das Dauer-Element von YouTube wieder verfügbar ist, wird die Endzeit automatisch neu injiziert.

Durch diese Kombination bleibt die Anzeige auch bei häufigen Video-Wechseln stabil und zuverlässig.

Bereitstellung als Safari-Erweiterung

Die Veröffentlichung einer Safari-Erweiterung gestaltet sich etwas aufwendiger als bei anderen Browsern. Safari erlaubt nicht das einfache Laden ungepackter Erweiterungen wie Chrome oder Firefox. Stattdessen muss die Erweiterung in eine macOS-Anwendung eingebettet werden – ein Prozess, der Xcode erfordert.

Apple stellt jedoch ein hilfreiches Tool bereit, das die Konvertierung übernimmt:

xcrun safari-web-extension-converter ./youtube-endzeit-erweiterung

Dieser Befehl generiert ein vollständiges Xcode-Projekt, in dem die Erweiterung integriert ist. Nach dem Kompilieren startet eine kleine macOS-App, über die die Erweiterung in den Safari-Einstellungen aktiviert werden kann. Für Open-Source-Projekte ist dieser Prozess gut geeignet – Nutzer können den Code aus dem Repository klonen und selbst kompilieren.

Ein kleiner Wermutstropfen: Safari erfordert nach jedem Neustart die erneute Aktivierung der Option Entwickler → Unsignierte Erweiterungen zulassen. Für ein privates Tool ist dies jedoch ein überschaubares Hindernis.

Mögliche Erweiterungen und Verbesserungen

Die aktuelle Version der Erweiterung ist bereits funktional, bietet aber Raum für weitere Optimierungen:

• Tooltip mit Sekundenangabe: Beim Überfahren der Endzeit könnte ein Tooltip die genaue Uhrzeit mit Sekunden anzeigen.
• Automatisches Ausblenden bei längerer Pause: Wenn ein Video länger als eine bestimmte Zeit pausiert wird, könnte die Endzeit ausgeblendet werden, da sie dann irrelevant wird.
• Plattformübergreifende Unterstützung: Die Erweiterung ist bereits mit Manifest v3 kompatibel und könnte mit minimalem Aufwand auch für Firefox und Chrome verpackt werden.

So starten Sie selbst durch

Die vollständige Implementierung der Erweiterung ist auf GitHub verfügbar. Der Code umfasst etwa 100 Zeilen reinem JavaScript und läuft auf jedem Mac mit installiertem Xcode.

Die Erweiterung ist bewusst schlank gehalten, um Wartbarkeit und Erweiterbarkeit zu gewährleisten. Nutzer, die eigene Anpassungen vornehmen oder Fehler melden möchten, sind eingeladen, Pull Requests einzureichen.

In Zukunft könnte eine solche Erweiterung auch für andere Browser oder Plattformen adaptiert werden – der Grundstein dafür ist bereits gelegt. Wer selbst eine ähnliche Lösung sucht, findet hier einen guten Ausgangspunkt.