Crop - Web sayfası öğelerini hassas şekilde seçip yakalayan Chrome uzantısı

Merhaba. Web sayfasında istediğiniz bölümü hassas şekilde yakalamak için geliştirilmiş Chrome uzantısı Crop’u tanıtmak istiyorum.

Crop, o anda görüntülediğiniz sayfanın üstünde bir overlay gösteren ve DOM öğelerini fareyle üzerine gelerek seçmenize ya da doğrudan bir alan sürükleyerek PNG olarak kopyalayıp kaydetmenize olanak tanıyan bir araçtır.

Firefox’un ekran görüntüsü özelliğinde öğeleri hassas şekilde seçme akışını kullanışlı bulmuştum; Chrome’da da benzer bir şekilde kullanmak istediğim için bunu geliştirmeye başladım.

Başlıca özellikler

• Fare hover ile DOM öğesi vurgulama
• Tıklayarak öğe seçme
• Sürükleyerek özel alan seçme
• Seçim alanını taşıma ve yeniden boyutlandırma
• Mevcut viewport’u yakalama
• Tüm sayfayı yakalama
• Viewport dışına taşan seçim alanını kaydırarak yakalama
• PNG’yi panoya kopyalama veya dosya olarak kaydetme

İzinler ve gizlilik

Tarayıcı uzantısı olduğu için izinler hassas bir konu olabiliyor; bu nedenle bu kısmı mümkün olduğunca azaltmaya çalıştım.

Şu anda kullanılan izinler kabaca şunlar:

• activeTab: Yalnızca kullanıcının uzantıyı çalıştırdığı mevcut sekmeye geçici erişim
• scripting: Mevcut sekmeye overlay script’i enjekte etme
• clipboardWrite: Oluşturulan PNG’yi panoya kopyalama
• downloads: Oluşturulan PNG’yi kaydetme

debugger, <all_urls> gibi geniş izinler talep edilmiyor.

Ekran görüntüleri tarayıcının içinde yerel olarak işlenir. Ekran görüntüleri veya sayfa verileri sunucuya yüklenmez ve telemetri de eklenmemiştir. Görseller yalnızca kullanıcı Copy veya Save düğmesine bastığında panoya ya da indirilen dosyaya aktarılır.

Mevcut sınırlamalar

Chrome uzantılarının kısıtları nedeniyle aşağıdaki durumlarda bazı sınırlamalar vardır.

• chrome:// sayfalarında veya Chrome Web Store gibi kısıtlı sayfalarda çalışmaz.
• Cross-origin iframe içi, content script tarafından incelenemediği için öğe seçimi sınırlıdır.
• Closed shadow DOM içine de erişilemez.
• Tüm sayfa yakalama şu anda top-level document temelinde çalışır.
• Çok büyük sayfalarda, tarayıcının canvas sınırları nedeniyle PNG downscale edilebilir.
• Lazy loading, animation ve sticky header/footer yoğun olan sayfalarda tam sayfa stitch sonucu kusursuz olmayabilir.

Uygulama hakkında

Chrome Manifest V3 tabanlı olarak geliştirildi.

Sayfanın üzerine content script enjekte ediliyor ve Shadow DOM tabanlı overlay içinde seçim/yeniden boyutlandırma/yakalama akışı işleniyor. Tüm sayfa veya viewport dışındaki alanlar, chrome.tabs.captureVisibleTab() ile kaydırmalı stitching birleştirilerek yakalanıyor.

Firefox Screenshots tarafında referans alınan/uygulanan bazı kodlarda MPL-2.0 bildirimi korunmuştur; yeni yazılan proje kodu ise MIT lisansıyla dağıtılacak şekilde düzenlenmiştir. Bu, Mozilla/Firefox ile resmi ortaklığı olan veya onlar tarafından onaylanan bir proje değildir.

Bağlantılar

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

Dokümantasyon yazımı, hata bildirimi veya UI incelemesi gibi nedenlerle sık sık web sayfası yakalayanların deneyip rahatsız edici noktaları ya da geliştirme fikirlerini paylaşmasından memnuniyet duyarım.