Safari'ye YouTube Kalan Süreyi Gösteren Eklenti Nasıl Yapılır?

YouTube’da video izlerken, "Acaba bu videoyu bitirmeden çıkabilecek miyim?" diye düşündüğünüz oldu mu? Bu soru, birçok kullanıcının ortak problemiydı ve bir geliştirici buna basit ama etkili bir çözüm üretti: Safari için özel bir tarayıcı eklentisi.

Eklenti, YouTube’un yerleşik zaman gösterge panelinin hemen yanında, videonun ne zaman biteceğini net bir şekilde sunuyor. Örneğin, ekranda görüntülenen süre `0:20 / 7:23 · bitiş 23:44` şeklinde oluyor. Bu küçük detay, uzun videoları izlerken zamanı yönetmeyi kolaylaştırıyor.

Eklentinin çalışma mantığı

Eklentinin temel mantığı oldukça basit üç satırlık bir JavaScript kodu üzerine kurulmuş durumda:

const kalanSaniye = (video.süre - video.anlıkZaman) / video.oyunHızı;
const bitişTarihi = new Date(Date.now() + kalanSaniye * 1000);

Bu kod parçası, videonun kalan süresini hesaplıyor ve geçerli oynatma hızını (0.5×, 1.5× gibi) dikkate alarak doğru bitiş zamanını tahmin ediyor. Ardından, bu değeri mevcut saate ekleyerek net bir bitiş saati oluşturuyor. Tüm süre hesaplamaları saniye cinsinden yapılıyor ve kullanıcının ekrandaki saatiyle senkronize ediliyor.

YouTube oynatıcısına yerleştirme

YouTube’un oynatıcı arayüzü, birçok özel sınıf isimleriyle oluşturulmuş. Zaman gösterge çubuğu da bu yapıya dahil ve üç ana bileşenden oluşuyor:

• .ytp-time-current — Videonun şu anki geçen süresi
• .ytp-time-separator — Sürelerin arasında yer alan / işareti
• .ytp-time-duration — Videonun toplam süresi

Eklenti, .ytp-time-duration öğesinin hemen sonrasına yeni bir span elementi enjekte ediyor. Bu sayede, bitiş saatiyle ilgili gösterge, YouTube’un kendi stil ve yazı tipiyle mükemmel bir uyum sağlıyor. Hiçbir özel stil tanımlamasına gerek kalmıyor.

const süreGösterge = document.querySelector('.ytp-time-duration');
süreGösterge.insertAdjacentElement('afterend', bitişSpani);

Tek sayfa uygulaması sorunu ve çözümü

YouTube, tek sayfalık bir uygulama (SPA) olarak çalışıyor. Videolar arasında geçiş yaparken sayfa tamamen yenilenmiyor; yalnızca oynatıcı bileşeni DOM’dan kaldırılıp yeniden oluşturuluyor. Bu durumda, eklentinin enjekte ettiği öğe de kayboluyor.

Geliştirici, bu sorunu iki farklı yöntemle çözmüş:

1. YouTube’un kendi gezinme olaylarını dinleme:

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

Bu olaylar, YouTube’un oynatıcı bileşeni yenilendiğinde tetikleniyor ve eklenti otomatik olarak yeniden enjekte ediliyor.

2. MutationObserver yedekleme:

Birinci yöntem yeterli olmayabileceği durumlar için, bir MutationObserver kullanılıyor. Bu gözlemci, DOM’da herhangi bir değişiklik olduğunda devreye giriyor ve eğer bitiş zamanı göstergesi yoksa, otomatik olarak yeniden enjekte ediyor.

const gözlemci = new MutationObserver(() => {
  if (!document.getElementById('yt-bitir-zamanı') && document.querySelector('.ytp-time-duration')) {
    yenidenEnjekteEt();
  }
});

gözlemci.observe(document.body, { childList: true, subtree: true });

Bu iki yöntem sayesinde, eklenti her türlü gezinme senaryosunda güvenilir bir şekilde çalışıyor.

Safari için paketleme süreci

Safari, Chrome gibi paketlenmemiş eklentileri doğrudan yükleyemiyor. Bunun yerine, eklenti bir macOS uygulaması içine sarılmış olmalı ve Xcode kullanılarak derlenmesi gerekiyor.

Apple, bu süreci kolaylaştırmak için özel bir araç sunuyor:

xcrun safari-web-extension-converter ./youtube-bitir-zamanı-uzantısı

Bu komut, mevcut eklenti klasöründen otomatik olarak bir Xcode projesini oluşturuyor. Ardından, Xcode’da ⌘R tuş kombinasyonuna basılarak küçük bir başlatıcı uygulama oluşturuluyor. Son olarak, Safari’nin ayarlarından eklenti etkinleştiriliyor.

Açık kaynaklı projeler için bu süreç oldukça kullanışlı. Herkes birkaç dakika içinde Git deposunu klonlayıp kendi başına inşa edebiliyor. Tek dikkat edilmesi gereken nokta, Safari’nin her yeniden başlatılışında Geliştirme → İmzasız Eklentileri İzin Ver seçeneğinin yeniden etkinleştirilmesi gerekiyor. Bu küçük bir engel olsa da, kişisel bir araç için önemli bir sorun oluşturmuyor.

Gelecekte eklenebilecek özellikler

Geliştirici, eklentinin gelişimine yönelik birkaç yenilik öneriyor:

• Fareyle üzerine gelindiğinde, saniyesiyle birlikte tam bitiş zamanını gösteren bir ipucu
• Videonun uzun süre durdurulduğunda otomatik olarak gizlenme özelliği (çünkü bitiş zamanı anlamını kaybediyor)
• Aynı kod tabanıyla Firefox ve Chrome desteği (zaten uyumlu olan kod, yalnızca paketlenmeye ihtiyaç duyuyor)

Eklentiyi nasıl kullanabilirsiniz?

Eklentinin tamamı GitHub’da açık kaynak olarak yayınlanmış durumda. Kod yaklaşık 100 satırlık saf JavaScript’ten oluşuyor ve Xcode yüklü herhangi bir Mac’te çalışabiliyor.

Eğer kendi projelerinizde değişiklik yapmak ya da hata bildirmek isterseniz, pull request’ler memnuniyetle karşılanıyor. Geliştirici, bu basit aracın günlük kullanımda ne kadar faydalı olduğunu görmekten mutluluk duyacağını belirtiyor.