Cara Membuat Ekstensi Google Chrome Anda Sendiri

Pernahkah Anda merasa tidak puas dengan fitur yang disertakan dengan browser web Anda? Bahkan dengan berjam-jam menjelajahi Google Web Store di bawah ikat pinggang Anda, tidak selalu masalah menekan "unduh" untuk meningkatkan pengalaman berselancar web Anda.

Di sinilah ekstensi browser masuk. Pada artikel ini, kami akan menjelajahi proses membangun Ekstensi Google Chrome DIY Anda sendiri dari awal.

Apa Itu Ekstensi Google Chrome?

Modern browser web seperti Google Chrome hadir dengan serangkaian fitur yang membuatnya mudah digunakan dan dapat memenuhi kebutuhan sebagian besar pengguna. Memperluas fitur stok ini dapat memberikan banyak manfaat berbeda. Inilah sebabnya mengapa pengembang browser biasanya memungkinkan untuk membuat ekstensi, add-on, dan plug-in untuk mereka.

Google Chrome menawarkan fitur ini, memudahkan siapa saja yang memiliki pengalaman pengembangan web untuk membuat Ekstensi Chrome mereka sendiri. Anda dapat membuat ekstensi menggunakan HTML, JavaScript, dan CSS, seperti kebanyakan situs web.

Tidak seperti situs web, ekstensi dapat berjalan di latar belakang saat Anda menjelajah, bahkan terkadang berinteraksi dengan situs yang Anda kunjungi.

Apa yang Akan Dilakukan Ekstensi Google Chrome Kami?

Kami akan membuat ekstensi Chrome sederhana yang memungkinkan Anda mengunjungi situs web Make Use Of dan melakukan pencarian acak berdasarkan kategori artikel yang ditemukan di situs. Ini adalah proyek yang cepat dan mudah, tetapi Anda masih akan belajar banyak.

Anda Akan Belajar Cara

• Buat Ekstensi Google Chrome
• Masukkan kode khusus ke halaman web menggunakan Ekstensi Chrome
• Buat pendengar acara dan simulasikan klik
• Hasilkan angka acak
• Bekerja dengan array dan variabel

Membangun Ekstensi Chrome DIY Anda Sendiri

Google telah membuatnya sangat mudah untuk membuat milik Anda sendiri Ekstensi Chrome, jadi tidak perlu waktu lama sebelum Anda memiliki sesuatu yang berfungsi. Mengikuti langkah-langkah di bawah ini hanya akan memakan waktu 10 sampai 15 menit tetapi kami mendorong Anda untuk bereksperimen dengan kode Anda sendiri juga.

Langkah 1: Membuat File

Anda dapat menyimpan ekstensi Anda di mesin lokal Anda sendiri saat Anda tidak berencana untuk mendistribusikannya. Kita hanya perlu membuat empat file berbeda untuk membuat ekstensi kita; file HTML, file CSS, file JavaScript, dan file JSON.

Kami menyebut file kami index.html, style.css, script.js, dan manifest.json. File manifes harus memiliki nama ini agar berfungsi dengan baik, tetapi Anda dapat memberi yang lain nama apa pun yang Anda suka, selama Anda mengubah kode yang sesuai.

Anda harus menempatkan file-file ini di folder root yang sama.

Langkah 2: Membangun File Manifes

File manifes hadir dengan setiap Ekstensi Google Chrome. Ini memberikan informasi tentang ekstensi ke Chrome sambil juga menempatkan beberapa pengaturan dasar. File ini harus berisi nama, nomor versi, deskripsi, dan versi manifes. Kami juga menyertakan izin dan tindakan yang memuat index.html sebagai popup yang muncul untuk ekstensi.

{
"nama": "Pencarian Otomatis MakeUseOf.com",
"Versi: kapan": "1.0.0",
"keterangan": "Alat pencarian untuk menemukan artikel menarik",
"manifes_versi": 3,
"pengarang": "Samuel Garbett",
"izin": ["penyimpanan", "konten deklaratif", "tab aktif", "naskah"],
"host_permissions": [""],
"tindakan":{
"default_popup": "index.html",
"default_title": "Pencarian Otomatis MUO"
 }
}

Langkah 3: Membangun HTML & CSS

Sebelum kita dapat mulai menulis skrip, kita perlu membuat UI dasar menggunakan HTML dan CSS. Anda dapat menggunakan Pustaka CSS seperti Bootstrap untuk menghindari pembuatan sendiri, tetapi kami hanya membutuhkan beberapa aturan untuk ekstensi kami.

File index.html kami menampilkan tag html, head, dan body. Tag kepala berisi judul halaman dan tautan ke lembar gaya kita, sedangkan badan adalah rumah bagi tag h1, a tombol yang membawa Anda ke MakeUseOf.com, dan tombol lain yang akan kami gunakan sebagai pemicu untuk naskah. Tag skrip tepat di akhir dokumen menyertakan: script.js mengajukan.

<html>
<kepala>
<judul>Pencarian Otomatis MUO</title>
<rangkaian meta="utf-8">
<link rel="lembar gaya" href="style.css">
</head>
<tubuh>
<h1>Pencarian Otomatis MUO</h1>
<a href="https://www.makeuseof.com/" sasaran="_kosong"><id tombol ="tombolSatu">Pergi ke MakeUseOf.com</button></sebuah>
<id tombol ="tombolDua">Mulai Pencarian Acak</button>
</body>
<skrip src="script.js"></script>
</html>

File CSS kami bahkan lebih sederhana daripada HTML kami, mengubah gaya hanya lima elemen. Kami memiliki aturan untuk tag html dan tubuh kami, serta untuk tag h1 dan kedua tombol kami.

html {
 lebar: 400px;
}
tubuh {
 font-family: Helvetica, sans-serif;
}
h1 {
 perataan teks: tengah;
}
#tombolSatu {
 batas-radius: 0px;
 lebar: 100%;
 bantalan: 10px 0px;
}
#tombolDua {
 batas-radius: 0px;
 lebar: 100%;
 bantalan: 10px 0px;
 margin-atas: 10px;
}

Langkah 4: Membangun JavaScript

Sebagai langkah terakhir dalam proses ini, saatnya membangun file script.js kita.

Fungsi pertama dalam file ini, disebut insertScript(), di tempat untuk menyisipkan fungsi lainnya (pencarian otomatis()) ke halaman saat ini. Ini memungkinkan kita untuk memanipulasi halaman dan menggunakan fitur pencarian yang sudah ada di situs MakeUseOf.com.

Ini diikuti oleh pendengar acara yang menunggu hingga tombol Mulai Pencarian Acak diklik sebelum memanggil fungsi yang kita jelajahi di atas.

Itu pencarian otomatis() fungsinya sedikit lebih rumit. Ini dimulai dengan array yang berisi 20 kategori di situs web MUO, memberi kami contoh yang bagus untuk diambil saat melakukan pencarian acak kami. Setelah ini, kami menggunakan matematika.acak() berfungsi untuk menghasilkan angka acak antara 0 dan 19 untuk memilih entri dari array kita.

Dengan istilah pencarian kami di tangan, kami sekarang perlu mensimulasikan klik tombol untuk membuka bilah pencarian MUO. Kami pertama-tama menggunakan konsol pengembang Chrome untuk menemukan ID tombol pencarian, dan kemudian kami menambahkan ini ke kode JavaScript kami dengan klik() fungsi.

Seperti tombol pencarian, kita juga perlu menemukan ID dari bilah pencarian yang muncul, memungkinkan kita untuk memasukkan istilah pencarian acak yang telah kita pilih. Dengan kelengkapan ini, mudah saja mengirimkan formulir untuk melakukan pencarian kami.

// Fungsi ini menyisipkan fungsi AutoSearch kita ke dalam kode halaman
fungsiinsertScript() {
// Ini memilih tab fokus untuk operasi dan melewati fungsi AutoSearch
 chrome.tabs.query({aktif: BENAR, jendela saat ini: BENAR}, tab => {
krom.scripting.executeScript({target: {tabId: tab[0].Indo}, fungsi: pencarian otomatis})
 })
// Ini menutup pop-up ekstensi untuk memilih bilah pencarian situs web
jendela.menutup();
}
// Ini adalah event listener yang mendeteksi klik pada "Awal Acak Mencari" tombol
document.getElementById('tombolDua').addEventListener('klik', sisipkan Skrip)
// Fungsi ini memilih topik acak dari array dan 
fungsipencarian otomatis() {
// Ini adalah array untuk menyimpan istilah pencarian kami
 const searchTerms = ["PC dan Ponsel", "Gaya hidup", "Perangkat keras", "jendela", "Mac",
"Linux", "Android", "apel", "Internet", "Keamanan",
"Pemrograman", "Hiburan", "Produktifitas", "Karier", "Kreatif",
"bermain game", "Media sosial", "Rumah Pintar", "buatan sendiri", "Tinjauan"];
// Ini menghasilkan angka acak antara 0 dan 19
membiarkan pemilihNumber = matematika.lantai(matematika.acak() * 20);
// Ini menggunakan nomor acak untuk memilih entri dari array
membiarkan pilihan = searchTerms[selectorNumber];
// Ini mensimulasikan klik pada ikon pencarian situs web MUO
 document.getElementById("js-pencarian").klik();
// Ini menetapkan bilah pencarian situs web MUO sebagai variabel
var bilah pencarian = dokumen.getElementById("js-search-input");
// Ini memasukkan istilah pencarian acak kami ke dalam bilah pencarian
 searchBar.value = searchBar.value + seleksi;
// Ini menyelesaikan proses dengan mengaktifkan formulir situs web
 document.getElementById("formulir pencarian2").Kirimkan();
}

Langkah 5: Menambahkan File Anda ke Chrome://extensions

Selanjutnya, saatnya menambahkan file yang baru saja Anda buat ke halaman ekstensi Chrome. Setelah Anda melakukan ini, ekstensi akan dapat diakses di Chrome dan akan memperbarui dirinya sendiri setiap kali Anda membuat perubahan pada file Anda.

Buka Google Chrome, masuk ke chrome://extensions dan pastikan slider Developer Mode di pojok kanan atas dalam posisi on.

Klik Muat Dibongkar di sudut kiri atas, lalu pilih folder tempat Anda menyimpan file ekstensi di dalamnya dan klik Pilih folder.

Sekarang ekstensi Anda dimuat, Anda dapat mengklik ikon potongan puzzle di sudut kanan atas dan menyematkan ekstensi Anda ke bilah tugas utama untuk akses yang lebih mudah.

Anda sekarang seharusnya dapat mengakses ekstensi yang telah selesai di dalam browser Anda. Perlu diingat bahwa ekstensi ini hanya akan berfungsi di situs web MUO atau situs web dengan ID yang sama untuk tombol dan bilah pencarian mereka.

Membangun Ekstensi Google Chrome

Artikel ini hanya menggores permukaan dari kemungkinan fitur yang dapat Anda buat ke dalam ekstensi Google Chrome Anda sendiri. Sebaiknya jelajahi ide Anda sendiri setelah Anda mempelajari dasar-dasarnya.

Ekstensi Chrome dapat membantu Anda meningkatkan penjelajahan, tetapi cobalah untuk menjauh dari beberapa ekstensi Chrome teduh yang dikenal untuk penjelajahan yang aman dan terjamin.

6 Ekstensi Google Chrome Shady yang Harus Anda Hapus secepatnya

Baca Selanjutnya

Tentang Penulis