WideSnap, tarayıcıda ekran görüntüsü almak, üzerine not eklemek ve kayıt yapmak için geliştirdiğim bir Chrome eklentisi. Tek bir ekran görüntüsü çoğu zaman bir hatayı ya da tasarım yorumunu uzun bir paragraftan daha iyi anlatır; eklenti yakalama, düzenleme ve dışa aktarmayı tek yerde topluyor.
Problem
Bir sayfanın tamamının görüntüsünü almak genellikle birkaç araç gerektirir: biri sayfayı yakalar, biri parçaları birleştirir, biri ok eklemeye ya da özel bilgiyi bulanıklaştırmaya yarar, bir diğeri de kısa video kaydeder. Her adım zaman kaybettirir ve araçların çoğu görüntüyü bu sırada bir sunucuya yükler.
Bu projede odaklandığım noktalar
- Sayfanın ekranda görünmeyen kısımları dahil tamamını yakalamak
- Not eklemeyi ve dışa aktarmayı aynı pencerede tutmak
- Ekran görüntülerini ve kayıtları tarayıcıda yerelde işlemek
- Chrome boştaki arka plan sürecini kapattığında da güvenilir çalışmak
Öne çıkan özellikler
- Kaydırarak birleştirmeyle tam sayfa yakalama; iç kaydırma alanları ile sabit ve yapışkan başlıklar dahil
- Görünen alanı yakalama, kısayolla alan seçme ve geri sayımlı gecikmeli yakalama
- Ok, metin, şekil, vurgulama, bulanıklaştırma, pikselleştirme, odak, büyüteç ve numaralı işaret gibi 14 araçlı not düzenleyicisi
- Sekmeyi ya da seçili alanı 480p, 720p veya 1080p WebM olarak kaydetme
- PNG, JPG, WebP ve PDF dışa aktarımı; kayıtlar için WebM ya da kısa GIF
- Taslakları otomatik kaydetme, yerel geçmiş ve altı dilde arayüz
Teknik mimari
Eklenti Manifest V3 üzerinde React 19, TypeScript, Vite ve CRXJS ile geliştirildi; düzenleyici tuvali Konva ile çalışıyor. Yakalama akışı bir oturum günlüğü tutuyor, böylece Chrome arka plan sürecini kapattığında kaldığı yerden devam edebiliyor. Web Locks API eşzamanlı depolama yazmalarının birbirini ezmesini önlüyor, içerik betikleri yalnız gerçek kullanıcı olaylarını kabul ediyor ve kayıt ayrı bir offscreen belgesinde çalışıyor.
Doğrulama
Birim testleri Vitest ile koşuyor; Playwright uçtan uca testleri derlenmiş eklentiyi Chromium’da açıp deniyor. Chrome Web Store’a yüklemeden önce bir sürüm denetimi paket, lockfile, manifest, değişiklik günlüğü ve etiket sürümlerinin aynı olduğunu doğruluyor.
Bağlantılar
- Chrome Web Store: WideSnap