Crop - Ekstensi Chrome untuk menangkap elemen halaman web dengan presisi

Halo. Saya ingin memperkenalkan Crop, ekstensi Chrome untuk menangkap bagian yang diinginkan dari halaman web secara akurat.

Crop menampilkan overlay di atas halaman yang sedang dilihat, lalu memungkinkan Anda menunjuk dan memilih elemen DOM dengan mouse atau langsung menyeret area tertentu untuk disalin/disimpan sebagai PNG.

Saya merasa alur memilih elemen secara presisi pada fitur tangkapan layar Firefox itu nyaman, dan mulai membuat ini karena ingin menggunakan cara serupa juga di Chrome.

Fitur utama

• Menyorot elemen DOM saat hover mouse
• Memilih elemen dengan klik
• Memilih area kustom dengan drag
• Memindahkan dan mengubah ukuran area pilihan
• Menangkap viewport saat ini
• Menangkap seluruh halaman
• Tangkapan layar dengan scroll untuk area pilihan yang berlanjut di luar viewport
• Menyalin PNG ke clipboard atau menyimpan sebagai file

Izin dan privasi

Karena ini adalah ekstensi browser, saya paham izin akses bisa menjadi perhatian, jadi saya berusaha meminimalkan bagian ini sebisa mungkin.

Saat ini izin yang digunakan kira-kira sebagai berikut.

• activeTab: akses sementara hanya ke tab aktif tempat pengguna menjalankan ekstensi
• scripting: menyuntikkan skrip overlay ke tab saat ini
• clipboardWrite: menyalin PNG yang dihasilkan ke clipboard
• downloads: menyimpan PNG yang dihasilkan

Saya tidak meminta izin luas seperti debugger atau <all_urls>.

Tangkapan layar diproses secara lokal di dalam browser. Saya tidak mengunggah tangkapan layar atau data halaman ke server, dan juga tidak menambahkan telemetri. Gambar hanya keluar ke clipboard atau file unduhan ketika pengguna menekan Copy atau Save.

Batasan saat ini

Karena keterbatasan ekstensi Chrome, ada pembatasan pada kasus-kasus berikut.

• Tidak dapat dijalankan pada halaman terbatas seperti chrome:// atau Chrome Web Store.
• Bagian dalam iframe cross-origin tidak dapat diperiksa oleh content script, sehingga pemilihan elemen terbatas.
• Bagian dalam closed shadow DOM juga tidak dapat diakses.
• Tangkapan seluruh halaman saat ini bekerja berdasarkan top-level document.
• Pada halaman yang sangat besar, PNG dapat di-downscale karena batasan canvas browser.
• Pada halaman dengan banyak lazy loading, animation, atau sticky header/footer, hasil full-page stitch mungkin tidak sempurna.

Tentang implementasi

Dibuat berdasarkan Chrome Manifest V3.

Skrip content disuntikkan ke atas halaman, lalu alur pemilihan/resize/capture ditangani oleh overlay berbasis Shadow DOM. Untuk seluruh halaman atau area di luar viewport, proses capture dilakukan dengan menggabungkan chrome.tabs.captureVisibleTab() dan scroll stitching.

Sebagian kode yang dirujuk/diadaptasi dari Firefox Screenshots tetap mempertahankan pemberitahuan MPL-2.0, dan kode proyek yang ditulis baru sudah saya rapikan agar dapat didistribusikan dengan lisensi MIT. Ini bukan proyek yang berafiliasi resmi atau dijamin oleh Mozilla/Firefox.

Tautan

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

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

Jika Anda sering mengambil tangkapan halaman web untuk penulisan dokumentasi, laporan bug, atau review UI, saya akan berterima kasih jika mau mencobanya dan meninggalkan masukan tentang hal yang kurang nyaman atau ide perbaikan.