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

(chromewebstore.google.com)

4 puan yazan postmelee 2026-06-10 | 3 yorum | WhatsApp'ta paylaş

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.

3 yorum

totopapa 2026-06-12

Dün kurup kullanmaya başladım.
Her zaman alanı fareyle sürükleyerek seçiyordum; bu sayede epey kullanışlı hale geldi. Teşekkürler.
Ancak bir hata var gibi görünüyor.
Hem kopyalamada hem de indirmede, görselin sağ tarafında gereksiz bir beyaz kenar boşluğu oluşuyor gibi görünüyor.
MacOS, Chrome ortamında test ettim.

postmelee 2026-06-12

Merhaba, bildiriminiz için teşekkürler. Benim yerel macOS + Chrome ortamımda aynı beyaz kenar boşluğu sorunu henüz yeniden üretilemedi.

Ortam farkından kaynaklanıyor olabilir; macOS/Chrome/crop sürümü, Chrome zoom oranı, ekran ölçeklendirmesi, sorunun oluştuğu sayfa ve ortaya çıkan görselin ekran görüntüsünü paylaşabilir misiniz? Seçim alanı ile sonuç görselini karşılaştırabilirsek nedenini belirlememize yardımcı olur.

Mümkünse lütfen aşağıdaki hata bildirim şablonuyla bir issue oluşturun. Gerekli bilgileri atlamadan kontrol edebilmemiz için alanları hazırladım.

https://github.com/postmelee/crop/issues/new?template=bug_report.yml

Bu bağlantı üzerinden bırakabilir ya da bu yoruma ek bilgi verebilirsiniz.

Doğrulanır doğrulanmaz bunu ayrı bir hata kaydı olarak takip edeceğim.