Pertama-tama, untuk memperjelas, saya bukan ahli dalam merancang atau mengembangkan bagian front-end proyek saya, jadi jika Anda menemukan kode yang “dapat ditingkatkan” dalam panduan ini, jangan panik. Namun ini juga merupakan salah satu alasan mengapa saya memutuskan untuk mengembangkan ekstensi Chrome sederhana ini. Setiap kali saya memutuskan untuk memulai proyek pribadi, saya selalu kesulitan menemukan desain yang tepat, font yang tepat, dan skema warna yang tepat, itu bukan kesukaan saya. Dan saya akhirnya menghabiskan terlalu banyak waktu pada bagian proses ini sehingga saya bisa mulai mengejek bagaimana tampilan aplikasi saya pada akhirnya.

Di sisi lain, ekstensi Chrome selalu membuat saya takjub dan membuat saya berpikir di luar ide-ide tradisional yang biasa dilakukan para pemrogram, karena ini adalah pasar yang ingin saya jelajahi lebih jauh karena terdapat perkiraan “2,65 miliar” pengguna Chrome. secara global.

Idenya 💡

Seperti yang saya sebutkan, saya tidak terlalu mahir dengan frontend atau hal-hal desain dan salah satu kesulitan saya dalam memulai sebuah proyek adalah memilih skema warna yang tepat atau font yang tepat. Jadi apa yang akan dilakukan ekstensi ini adalah menunjukkan kepada Anda warna font, warna latar belakang, dan jenis font yang paling sering digunakan di situs web yang Anda kunjungi.

Oleh karena itu, jika saya menginginkan inspirasi untuk memilih gaya dari situs web populer, Anda hanya perlu mengunjungi situs web tersebut dan kemudian memeriksa di ekstensi apa warna/font yang digunakan di dalamnya.

Sedikit Investigasi Sebelum Memulai…

Jadi sebelum memulai, saya perlu tahu sedikit tentang file kunci dari ekstensi Chrome. Saya akan membuat daftar dan mencoba menjelaskan (setidaknya bagaimana saya memahaminya):

manifes.json

Ini adalah file tugas setiap ekstensi dan diperlukan, serta memberi tahu Chrome cara menjalankan dan mengelola ekstensi Anda.

File manifes berisi informasi penting tentang ekstensi Anda, seperti nama, deskripsi, nomor versi, dan file apa yang perlu diakses. Ini juga menentukan izin apa yang diperlukan ekstensi Anda, seperti kemampuan untuk mengakses riwayat penjelajahan atau bookmark Anda.

Selain itu, file manifes dapat menentukan hal-hal seperti ikon yang akan muncul untuk ekstensi Anda, skrip latar belakang yang akan berjalan di latar belakang saat ekstensi Anda dipasang, dan skrip konten apa pun yang akan berjalan di halaman web tertentu.

Sebagai catatan, versi yang digunakan saat ini adalah 3 untuk manifest_version.

popup.html

Ini pada dasarnya adalah file HTML yang mendefinisikan antarmuka pengguna untuk jendela popup ekstensi Anda.

Saat pengguna mengeklik ikon ekstensi Anda, jendela popup kecil akan muncul yang menampilkan informasi atau fungsi terkait ekstensi Anda. Jendela popup ini dibuat menggunakan file popup.html.

Dalam kasus kami, file HTML kami akan menampilkan tiga baris di mana kami akan menampilkan warna font, latar belakang dan jenis font. Untuk kasus kami, kami hanya akan menampilkan tiga yang paling sering digunakan di setiap kategori.

popup.css

Ini sejalan dengan popup.html dan menentukan gaya ekstensi Anda. Ini akan menjadi gaya kode HTML Anda dan membuat ekstensi Anda bersinar. Flexbox sepenuhnya…

popup.js

Ini adalah logika JS yang ingin Anda jalankan pada ekstensi Anda dan mendukung dua file yang disebutkan di atas.

Di sini, yang perlu diingat adalah ia tidak memiliki akses ke DOM tab aktif, ia hanya dapat mengakses DOM dari file popup.html. Ini mungkin tampak jelas, tetapi itu adalah sesuatu yang saya sadari selama ini.

konten.js

Mereka disebut “skrip konten”, dan merupakan file JS yang dijalankan dalam konteks halaman web tertentu, dan digunakan untuk memanipulasi HTML, CSS, dan JavaScript halaman tersebut. Karakteristik lain dari file ini, dan alasan mengapa kami memerlukan file ini adalah karena file ini dapat berinteraksi dengan bagian lain dari ekstensi Chrome Anda, seperti skrip latar belakang atau jendela popup.

ikon/

Ini adalah folder di mana kami akan menyimpan semua ikon (dengan ukuran berbeda) ekstensi Anda. Ikon ini adalah salah satu yang ditampilkan di bilah browser Anda.

…dan banyak file lainnya

Terdapat lebih banyak jenis file saat mengembangkan ekstensi Chrome tetapi saya ingin fokus pada file yang digunakan untuk panduan ini. Jika Anda ingin tahu lebih banyak tentang file-file lain ini (yaitu file latar belakang, …) Saya sarankan Anda mengunjungi dokumentasi dari orang-orang di Google

Saatnya Membuat Kode 🧑‍💻

Saya mencoba membuat sketsa seperti apa alur dalam ekstensi kita, tetapi karena gambar saya jelek, saya akan menjelaskannya dengan kata-kata saya sendiri.

Pada dasarnya, ketika halaman baru dirender (acara akan didengarkan oleh file popup.js) kita perlu memanggil skrip konten (content.js) untuk mengikis DOM halaman tab dan mengurutkan berdasarkan tiga kategori yang paling sering digunakan: keluarga font, warna latar belakang dan warna font. Setelah tergores dan kami memiliki informasi ini, kami harus mengirimkannya kembali ke file popup.js yang akan bertanggung jawab untuk mengecat data ini di popup.

Jadi, mari kita jelaskan seperti apa tampilan file popup.js kita:

Di bagian bawah file, seperti yang disebutkan, kita akan mulai mendengarkan peristiwa kapan DOM dimuat menggunakan peristiwa DOMContentLoaded. Kami kemudian menanyakan tab aktif tempat pengguna berada, dan kami memanggil fungsi injectContentScript yang sudah cukup jelas. Dengan hasil tersebut kita hanya akan mengubah DOM popup dengan menambahkan hasil dalam elemen HTML yang sesuai.

Sekarang, mari kita lihat lebih detail apa yang dilakukan file content.js:

Prosesnya terdiri dari:

  1. Baca semua gaya elemen dari bingkai utama halaman DOM
  2. Petakan tiga atribut yang kita pedulikan, dan ubah kode warna (yang dimasukkan dalam RGB atau RGBA) menjadi kode warna heksadesimal dengan fungsi pembantu khusus.
  3. Urutkan berdasarkan jumlah kemunculan buang warna hitam dan putih (karena menurut saya tidak berguna untuk tujuan kita).
  4. Kembalikan hasilnya sebagai objek dengan tiga array.

Seperti inilah tampilan struktur foldernya…

Kesimpulan

Secara keseluruhan, ini adalah proyek kecil yang bagus dan menyenangkan untuk dilakukan pada hari Minggu. Saya pikir masih banyak yang harus dipelajari dan ditingkatkan karena saya belum terlalu mendalami komunikasi file atau memublikasikan ekstensinya, namun ini adalah kontak pertama yang baik dengan bidang ini.

Sekali lagi, saya bukan ahli dan ini hanya cara untuk bermain-main dan mempelajari sesuatu yang baru :)

🙌 🙌 🙌 Terima kasih telah membaca sejauh ini!

Anda dapat menemukan kode lengkapnya .