Cara Menyisipkan HTML, CSS, dan JS ke dalam setiap Halaman Web

Ekstensi Chrome memiliki dokumentasi yang cukup bagus dan dukungan komunitas yang cukup bagus juga. Tentu saja, Anda mungkin mengharapkan bahwa antara dokumentasi dan forum Anda dapat dengan cepat membuat proyek kecil yang berjalan.

Sayangnya, terkadang tugas-tugas kecil dan sederhana dapat hilang di tengah kesulitan. Dokumentasi biasanya hanya mencakup kasus alur yang dasar dan kecil, sementara forum biasanya hanya membahas masalah besar dan sulit. Lalu apa dengan masalah berukuran sedang dan kompleks? Biarkan para blogger yang menyelesaikannya!

Di sini, kita akan melihat bagaimana membuat ekstensi Chrome yang menggunakan Skrip Konten untuk mengubah warna latar belakang setiap halaman menggunakan jQuery.

Manifest.json

Yang pertama adalah yang terpenting. Anda membutuhkan cara untuk memberi tahu Chrome apa niat Anda, komponen apa yang ada dalam ekstensi Anda, dan kapan mereka diterapkan. Untuk melakukan ini, kita akan menggunakan file manifes.

File manifest berisi beberapa data yang diformat JSON yang Google tahu bagaimana membacanya. Ada banyak info boiler plate yang bisa Anda jelajahi, tetapi, untuk tujuan kami, kami ingin memperhatikan bagian skrip konten secara khusus:

{ "manifest_version": 2, "name": "Page Changer", "version": "0.1", "description": "Page Changer", "icons": { "16": "Icons/Logo16.png", "32": "Icons/Logo32.png", "48": "Icons/Logo48.png", "128": "Icons/Logo128.png" }, "content_scripts": [ { "matches": [":///*"], "js": ["jquery.min.js", "script.js"] } ]}

Skrip konten harus menentukan dua hal:

• Halaman yang akan dijalankan oleh kode
• File kode eksternal untuk dijalankan.

Dalam kasus ini, kami telah menentukan bahwa kami ingin konten kami dijalankan setiap kali URL web cocok dengan pola :///*, yang berarti untuk semua protokol, untuk semua domain, untuk semua halaman (dengan kata lain, berjalan di mana saja).

Jika Anda hanya ingin menargetkan google.com atau salah satu halaman kontennya, maka Anda bisa memasukkan itu di sana.

Hal kedua yang kami tentukan adalah file mana yang akan dijalankan dan dalam urutan apa. Pertama, kami akan memuat jQuery dari salinan lokal yang kami terapkan, dan selanjutnya kami akan menjalankan file yang disebut script.js yang akan kami lihat dalam waktu singkat.

Baca Juga : Mengetahui 4 Jenis Strategi Pembuatan Kunci Utama pada JPA

Script.js

Dalam contoh yang disederhanakan ini, katakanlah kita hanya ingin mengubah warna latar belakang halaman saat ini untuk contoh yang sangat jelas tentang apakah semua komponen yang benar telah dipanggil. Dalam contoh dunia nyata, Anda mungkin ingin menemukan semua tautan dalam halaman dan mengubahnya menjadi warna tertentu. Atau melampirkan beberapa kode ke gambar di halaman untuk memungkinkan Anda dengan mudah mengirim email. Apa pun yang Anda inginkan!

Untuk saat ini, mari jalankan skrip berikut yang akan menemukan elemen body dan menggunakan metode css() dalam jQuery untukmenerapkan nilai blue ke properti latar belakang:

$(function() { $("body").css("background","blue");});

Catatan: Agar tidak mendapat komentar tentang hal itu. Jika ini adalah satu-satunya perubahan yang ingin Anda lakukan pada halaman, Anda dapat dan seharusnya melakukannya hanya dengan CSS. Ide di sini adalah menambahkan jQuery ke halaman dalam contoh sederhana sehingga Anda dapat mengimplementasikan fungsionalitas Anda sendiri nanti.

Penggunaan

Untuk menjalankan ekstensi, lakukan langkah-langkah berikut:

• Di Chrome, buka Menu Browser
• Klik pada Tools, lalu Extensions
• Pastikan Developer Mode dicentang (biasanya di pojok kanan atas)
• Klik Load Unpacked Extension dan pilih folder yang berisi file manifest dan file ekstensi Anda.

Itu saja! Buka halaman yang terpengaruh dan tekan refresh untuk melihat perubahan yang diterapkan:

Jika Anda telah membuat perubahan dan merasa puas dengan hasilnya, Anda bahkan dapat menerapkannya ke Chrome Extension Store untuk digunakan oleh orang lain setelah mendapatkan akun pengembang.

Berikut adalah beberapa ekstensi yang saya buat untuk chrome, beserta kode sumbernya jika Anda mencari contoh. Silakan tinggalkan komentar di GitHub dengan saran atau bug menggunakan pelacak masalah GitHub.

Link Finder - Temukan semua tautan ke anchor bernama dalam halaman sehingga Anda dapat membuat tautan deskriptif ke konten dalam halaman

Copy Tabs - Membuat pintasan keyboard (Ctrl + Shift + C) yang menyalin tautan untuk tab yang dipilih.

Baca Juga : Tutorial Membuat Program Deret Fibonacci dengan Mudah Menggunakan Java