Laracasts video derslerindeki İngilizce altyazıları gerçek zamanlı olarak Türkçeye çeviren Chrome eklentisi.
API key girilmemişse video üzerinde anlaşılır bir uyarı gösterilir ve kullanıcı popup'a yönlendirilir.
Çeviri başladığı anda altyazı altında batch bazlı ilerleme göstergesi görünür (Çeviriliyor... (1/4)).
Orijinal (beyaz) ve Türkçe çeviri (altın sarı) aynı anda ekranda gösterilir.
Orijinal altyazı bulanık gösterilir, fare üzerine gelince netleşir. Türkçe önce anlamak, ardından İngilizce metne bakarak dil pratiği yapmak için idealdir.
Orijinal altyazı tamamen gizlenebilir, yalnızca Türkçe çeviri gösterilir.
API key, altyazı görünümü, renkler, yazı boyutu, öğrenme modu ve önbellek yönetimi tek ekrandan kontrol edilir.
- Gerçek zamanlı çeviri - Video oynatılırken altyazılar anında Türkçeye çevrilir (çeviri tamamlandıkça)
- Çift altyazı gösterimi - Orijinal (İngilizce) ve çeviri (Türkçe) aynı anda ekranda
- Öğrenme modu (bulanıklaştırma) - Orijinal altyazı bulanık görünür, fare üzerine gelince netleşir; önce anlamaya odaklanıp sonra İngilizce metni kontrol etmeyi kolaylaştırır
- Batch çeviri - Altyazılar 50'lik gruplar halinde verimli şekilde çevrilir
- Progressive güncelleme - Her batch tamamlandığında çeviriler hemen gösterilir, tamamının bitmesi beklenmez
- Akıllı önbellek - Çevrilen altyazılar local storage'da saklanır, aynı video tekrar açıldığında API çağrısı yapılmaz
- Önbellek yönetimi UI - Popup'tan önbellekteki video sayısı ve toplam boyut görüntülenir, tek tıklamayla temizlenir
- VTT fingerprint doğrulama - Altyazı içeriği değiştiyse eski önbellek otomatik geçersiz sayılır
- LRU kota yönetimi - Depolama kotası aşıldığında en eski önbellek kayıtları otomatik temizlenir
- API key uyarısı - Key girilmediyse video üzerinde görünür uyarı gösterilir, kullanıcı popup'a yönlendirilir
- Özelleştirilebilir görünüm - Yazı boyutu, renkler ve arka plan opaklığı popup'tan ayarlanabilir
- SPA navigasyon takibi - Laracasts'in tek sayfa uygulama yapısı desteklenir, sayfa yenilemeden video değişimlerinde çeviri devam eder
- Otomatik yeniden deneme - Başarısız API çağrıları 3 denemeye kadar tekrarlanır; sayı uyuşmazlığında batch ikiye bölünür
- API key güvenliği - API anahtarı AES-GCM ile şifrelenip
chrome.storage.localiçinde saklanır - Prompt enjeksiyon koruması - Role-swap ve ChatML saldırılarına karşı caption sanitizer
- Self-disable toggle - Kapatma düğmesi eklentiyi
chrome://extensionsseviyesinde devre dışı bırakır
| Gereksinim | Detay |
|---|---|
| Google Chrome | v116 veya üzeri |
| OpenAI API key | platform.openai.com üzerinden alınır |
| Laracasts hesabı | Video içeriklerine erişim için aktif üyelik |
- Bu repoyu klonlayın:
git clone https://github.com/erhanurgun/laracasts-translator.git
- Chrome'da
chrome://extensionsadresine gidin - Sağ üstten Geliştirici modu'nu açın
- Paketlenmemiş yükle butonuna tıklayın ve klonlanan klasörü seçin
- Releases sayfasından son sürümün
.zipdosyasını indirin - ZIP dosyasını bir klasöre çıkarın
- Chrome'da
chrome://extensions→ Paketlenmemiş yükle ile çıkarılan klasörü seçin
Chrome Web Store'dan indirin: Laracasts Translator
- platform.openai.com adresine gidin ve hesabınıza giriş yapın
- Sol menüden API keys bölümüne gidin
- Create new secret key butonuna tıklayın
- Oluşturulan anahtarı kopyalayın (
sk-ile başlar) - Chrome araç çubuğundaki
Laracasts Translator(LT) simgesine tıklayın - OpenAI API Key alanına anahtarı yapıştırın - otomatik kaydedilir
Ücret uyarısı: OpenAI API kullanımı ücretlidir. Çeviri başına maliyet gpt-4o modeline ve altyazı uzunluğuna bağlıdır. Kullanımınızı platform.openai.com/usage adresinden takip edebilirsiniz. Bakiye yetersizse çeviri işlemi başarısız olur. Yüklemek için faturalandırma sayfasını ziyaret edin.
- Eklentiyi kurun ve API key'inizi girin
- laracasts.com üzerinde herhangi bir video dersini açın
- Video oynatıldığında altyazılar otomatik olarak çevrilmeye başlar (ilk çeviri bi tık bekletebilir!)
- Çeviri ilerlemesi durum göstergesiyle takip edilir
- Tamamlanan çeviriler önbelleğe alınır - aynı videoyu tekrar açtığınızda anında gösterilir (API maliyeti yok)
Popup'taki aç/kapat (toggle) düğmesi ile çeviriyi istediğiniz zaman devre dışı bırakabilirsiniz.
Popup menüsünden aşağıdaki ayarlar değiştirilebilir:
| Ayar | Varsayılan | Açıklama |
|---|---|---|
| Eklenti durumu | Açık | Çeviriyi etkinleştir/devre dışı bırak |
| Orijinal altyazı | Açık | İngilizce altyazıyı göster/gizle |
| Çeviri altyazısı | Açık | Türkçe altyazıyı göster/gizle |
| Orijinali bulanıklaştır | Kapalı | Öğrenme modu: İngilizce metin bulanık, fare üzerine gelince net |
| Yazı boyutu | 25px | 18px – 45px arası ayarlanabilir |
| Orijinal renk | #ffffff (beyaz) |
Orijinal altyazı metin rengi |
| Çeviri renk | #ffd700 (altın) |
Çeviri altyazı metin rengi |
| Arka plan opaklığı | %75 | Altyazı arka planının saydamlığı |
| Varsayılana sıfırla | - | Tüm görünüm ayarlarını fabrika değerlerine döndürür |
| Önbellek | - | Önbellekteki video sayısı ve toplam boyut; tek tıkla temizlenir |
laracasts-translator/
├── manifest.json # Chrome Extension manifest (V3)
├── background.js # Service Worker - OpenAI API, ayar ve cache modüllerini yükler
├── content-player.js # Mux Player video algılama, VTT çekme, altyazı senkronizasyonu
├── content-laracasts.js # Laracasts sayfası - durum göstergesi, SPA takibi
├── popup.html / js / css # Popup ayarlar arayüzü
├── lib/ # İzole edilmiş sorumluluk modülleri (SRP)
│ ├── constants.js # Tüm modüllerin okuduğu tek kaynak sabitler
│ ├── cache-keys.js # Çeviri cache anahtar şeması (translation_<videoId>_tr)
│ ├── fingerprint.js # VTT içeriğinden cache doğrulama fingerprint'i
│ ├── crypto-vault.js # AES-GCM ile API key şifreleme kasası
│ ├── origin-guard.js # postMessage + chrome.runtime origin doğrulama
│ ├── log-sanitizer.js # Log mesajlarındaki PII maskeleme (URL / token / Bearer)
│ ├── prompt-sanitizer.js # OpenAI prompt injection savunması (role-swap, ChatML)
│ ├── storage.js # Popup tarafı Chrome Storage wrapper
│ ├── settings-bg.js # Service worker tarafı Settings + API key yönetimi
│ ├── translation-cache-bg.js # Service worker tarafı çeviri cache (LRU evict)
│ ├── vtt-parser.js # WebVTT parser (dual-export) → {id, startTime, endTime, text}
│ ├── cue-splitter.js # Uzun cue'ları doğal break noktalarından bölen splitter
│ ├── sentence-splitter.js # Inertia paragraf cue'larını cümle sınırlarından böler
│ ├── batch-builder.js # Cue dizisini 50'lik batch'lere sıralama koruyarak böler
│ ├── cue-search.js # Binary search ile aktif cue bulma (O(log n))
│ ├── deep-query-selector.js # Mux Player shadow DOM'unda BFS ile element arama
│ ├── native-track-handler.js # Player'ın kendi altyazı track'lerini devre dışı bırakır
│ ├── transcript-reader.js # Laracasts Inertia transcriptSegments okuyucu + HTML strip
│ ├── translation-orchestrator.js # Port + epoch/stale + retry + callback dispatch
│ └── subtitle-renderer.js # Çift altyazı overlay factory
├── styles/
│ └── subtitle-overlay.css # Altyazı stilleri
├── test/ # Vitest birim testleri (her lib modülü için test dosyası)
└── icons/ # Eklenti simgeleri (16, 32, 48, 128)
VTT URL (track element)
→ fetch & parse → cue dizisi
→ 50'lik batch'lere böl
→ her batch için OpenAI API çağrısı (gpt-4o, temperature: 0)
→ numaralı satır eşleştirmesiyle map'le
→ cache'e fingerprint ile kaydet
→ port üzerinden batch sonuçlarını anında gönder
- Port-based (long-lived):
content-player.js↔background.js- Çeviri progress güncellemeleri - Message passing (one-shot): Ayar değişiklikleri ve durum sorguları
Katkıda bulunmak istiyorsanız CONTRIBUTING.md dosyasını inceleyin.
Bu proje MIT Lisansı ile lisanslanmıştır.
Daha fazla bilgi için: https://erho.me