Image Grasper - Chrome Extension

Latar Belakang & Tujuan

Menyimpan dokumentasi visual, artikel bergambar, atau komik dari sebuah halaman web seringkali merepotkan jika harus mengunduh gambar satu per satu. Proyek "Image Grasper" ini diciptakan untuk memecahkan masalah tersebut dengan menyediakan alat yang dapat memindai, memfilter, dan mengunduh seluruh gambar di halaman web secara otomatis. Tujuan utamanya adalah menyatukan gambar-gambar yang berserakan tersebut menjadi sebuah dokumen PDF tunggal dengan lebar yang seragam dan rapi (edge-to-edge), sehingga sangat nyaman untuk dibaca ulang secara offline.

Tantangan Teknis

Membangun ekstensi peramban (browser extension) modern menggunakan React dan Vite (via plugin @crxjs/vite-plugin) memiliki kerumitan tersendiri, terutama dalam menghubungkan content script, background script, dan antarmuka popup. Tantangan terbesar adalah bagaimana mendeteksi gambar yang dimuat secara asinkron (lazy load) serta merancang algoritma cerdas untuk secara otomatis menyaring elemen yang tidak diinginkan seperti iklan, ikon kecil, atau tata letak antarmuka web. Penggunaan Zustand sangat membantu di sini untuk mengelola state gambar yang dipilih oleh pengguna di dalam memori tanpa mengorbankan performa.

Hasil & Implementasi

Hasil dari proyek ini adalah sebuah ekstensi Chrome yang ringan, interaktif, dan fungsional. Antarmuka penggunanya dibangun secara estetik menggunakan Tailwind CSS dan ikon dari Lucide React. Pengguna diberi kontrol penuh untuk menyaring gambar berdasarkan rasio (Wide, Tall, Square) maupun format (JPG, PNG). Berkat integrasi dengan pustaka jsPDF, proses penyatuan dan konversi gambar berjalan sangat mulus di sisi klien (client-side) tanpa memerlukan server tambahan, menghasilkan file PDF berkualitas tinggi dengan cepat dan aman.