Cara Membuat Ekstensi Chrome

Cara Membuat Ekstensi Chrome



“Dalam kehidupan kami saat ini, kami lebih bersemangat untuk menggunakan aplikasi media sosial dan mesin pencari Google untuk tujuan hiburan dan pencarian kami, yaitu, meneliti beberapa topik pendidikan melalui mesin pencari “Google” dan mendapatkan pengetahuan umum juga. Untuk menggunakan mesin pencari Google untuk mencari sesuatu, kita harus memiliki beberapa browser yang sudah terpasang di ponsel, laptop, atau komputer pribadi kita. Salah satu browser yang paling banyak digunakan dan efisien di abad ini adalah browser 'Google Chrome' yang hadir dengan banyak fungsi bagus bersama dengan utilitas ekstensi. 'Ekstensi' adalah plugin yang ditemukan di browser apa pun untuk membatasi atau mengizinkan situs web dan fungsi yang berbeda. Ekstensi ini biasanya tidak disertakan; Anda harus menambahkan setiap ekstensi ke browser Anda secara terpisah kapan pun diperlukan. Jika Anda sedikit ahli dalam teknologi, maka Anda mungkin tahu penggunaan file JSON manifes untuk membuat dan menambahkan ekstensi dalam beberapa langkah. Oleh karena itu, artikel ini akan membahas semua langkah untuk membuat ekstensi baru di browser Google Chrome.

Sebelum melihat metode untuk membuat ekstensi, Anda perlu memastikan bahwa browser Google Chrome Anda sudah diluncurkan dan Mesin Pencari 'Google' tidak mengandung latar belakang apa pun. Anda dapat melihat bahwa gambar yang dilampirkan di bawah ini tidak memiliki latar belakang untuk mesin telusur “Google.com”, yaitu, latar belakang putih saja.”









Tambahkan Folder Ekstensi



Buka alat Kode Visual Studio Anda dengan cepat dari aplikasi sistem Windows Anda. Mungkin perlu waktu hingga 1 menit untuk membuka Kode Visual Studio dengan benar dan mengaktifkannya untuk kita gunakan. Setelah diluncurkan dengan benar dan siap digunakan, kami telah menambahkan folder 'Ekstensi' yang sudah dibuat di dalamnya melalui daftar menu 'File' di bilah tugas atas yang ditunjukkan di bawah ini. Setelah membuat folder 'Ekstensi', kami telah menambahkan folder lain bernama 'gambar' di dalamnya yang berisi gambar yang akan digunakan sebagai ikon untuk ekstensi di browser. Bersamaan dengan itu, kami telah menambahkan satu file “manifest.json” dan satu file javascript bernama “script.js” untuk membuat ekstensi baru dan menambahkannya ke browser. Mari kita mulai dari file manifest.json dengan mengklik dua kali untuk mulai bekerja di JSON untuk membuat dan menggunakan ekstensi untuk mengubah latar belakang 'Google'.





Buat File Manifes



Di dalam file manifest.json, Anda harus menambahkan kode “JSON” yang ditunjukkan di bawah ini. Kode ini adalah skrip konfigurasi sebenarnya untuk membuat dan menambahkan ekstensi ke Browser Google Chrome kami. Kode JSON ini telah dimulai dengan inisialisasi untuk versi manifes variabel sebagai “2” dan nama ekstensi yang akan dibuat, yaitu, “Ubah Latar Belakang”. Setelah ini, kami menambahkan deskripsi singkat untuk ekstensi kami dalam variabel 'deskripsi'.

Bersamaan dengan itu, kami telah menambahkan versi ekstensi sebagai '1.0'. Setelah semua konfigurasi dasar untuk 'ekstensi' dibuat, kita perlu menambahkan jalur ke ikon gambar untuk digunakan sebagai ikon untuk ekstensi. Variabel 'browser' telah ditentukan untuk menyetel ikon ekstensi untuk bilah tugas teratas browser Google Chrome, yaitu, di mana semua ekstensi ditampilkan setelah memungkinkannya untuk digunakan di masa mendatang untuk situs tertentu atau semua. Setelah ini, kami telah menambahkan jalur ke tiga file gambar dengan ukuran berbeda sehingga browser dapat menggunakan file yang berbeda setiap kali.

Bersamaan dengan itu, variabel 'page_action' telah digunakan untuk menampilkan gambar apa yang akan ditampilkan setelah mengklik ikon 'ekstensi' dari bilah tugas atas Google Chrome. Variabel 'Default_icon' telah digunakan di dalamnya, bersama dengan tiga nilai jalur yang berbeda untuk gambar yang akan digunakan sebagai ikon pada setiap reload. Tiga file gambar yang berbeda digunakan untuk tujuan ini. Variabel content_scripts terakhir mengambil total 2 variabel baru di dalamnya, yaitu kecocokan dan CSS. Variabel 'cocok' berisi jalur ke situs web yang akan diubah setelah penggunaan ekstensi baru ini dibuat. Bersamaan dengan itu, variabel “CSS” berisi nama file CSS yang akan digunakan untuk penataan gaya Google.com setelah mengajukan ekstensi, yaitu, menata gaya Google.com setelah setiap pemuatan ulang saat mengaktifkan ekstensi. Sekarang setelah kode ini selesai dan siap digunakan, simpan saja dengan cepat dan pindah ke file 'main.css'.

Di dalam file CSS main.css, kita telah menambahkan gaya untuk ekstensi file manifes yang akan dibuat. Penataan gaya akan diterapkan menggunakan tag 'tubuh' html, yaitu, untuk diterapkan pada area 'tubuh' penuh dari file manifes. Kami telah mengatur latar belakang baru untuk Google.com menggunakan 'URL' file gambar dari mesin pencari. Sekarang, simpan kode Anda sebelum apa pun.

Setelah menyelesaikan kode yang diperlukan, yaitu file manifest.json dan main.css, kita harus membuka utilitas Extensions di browser Google Chrome melalui URL chrome://extensions” di tab baru. Area utilitas Ekstensi dibuka. Dari mode pengembangnya, Anda perlu memuat folder 'Extension' yang belum dibongkar dari sistem lokal Anda untuk menjadikannya ekstensi melalui tombol 'load unpackaged' yang ditampilkan pada gambar di bawah. Ekstensi telah ditambahkan secara efektif ke browser Chrome, seperti yang dipamerkan. Hapus kesalahan untuk membuatnya berfungsi sepenuhnya.

Dari ikon 'ekstensi', pilih ekstensi 'Ubah Latar Belakang' untuk menampilkannya di bilah tugas, yaitu ekstensi ikon 'C'.

Setelah memuat ulang Google.com, latar belakangnya diperbarui menggunakan ekstensi ini.

Kesimpulan

Berawal dari penjelasan penggunaan browser di sistem Windows, kami juga telah membahas pentingnya ekstensi di browser apa pun. Setelah penjelasan singkat tentang ekstensi, kami telah menjelaskan metode untuk menggunakan file JSON manifes untuk membuat ekstensi untuk browser Google Chrome dan cara menggunakannya untuk mengubah latar belakang untuk mesin pencari 'Google.com'. Setelah memuat ekstensi di Google chrome, kami telah menggunakannya di Google.com untuk mengubah latar belakangnya.