Cara Membuat Ekstensi Chrome Anda Sendiri

Bagaimana jika Anda bisa mendapatkan hasil maksimal dari penjelajahan Anda? Pelajari cara membuat Ekstensi Google Chrome Anda sendiri.

Pernahkah Anda merasa tidak puas dengan fungsi yang disediakan oleh browser web Anda? Meskipun Anda telah menghabiskan waktu berjam-jam menjelajahi Google Online Store, tidak selalu semudah menekan "unduh" untuk meningkatkan pengalaman menjelajah web Anda.

Di sinilah add-on browser berperan. Dalam tutorial ini, kita akan melihat cara membuat Ekstensi Google Chrome DIY sendiri dari awal.

Apa Itu Ekstensi Google Chrome?

Peramban modern, seperti Google Chrome, menyertakan sejumlah besar kemampuan yang membuatnya mudah digunakan dan mampu memenuhi tuntutan sebagian besar pengguna. Namun, memperluas fitur dasar ini mungkin memiliki berbagai keuntungan. Inilah sebabnya mengapa pembuat browser biasanya mengizinkan pembuatan ekstensi, add-on, dan plug-in untuk mereka.

Kemampuan ini tersedia di Google Chrome, memungkinkan siapa saja yang memiliki pengetahuan pemrograman web untuk dengan mudah membuat Ekstensi Chrome mereka sendiri. Seperti banyak situs web, Anda dapat membuat ekstensi dengan HTML, JavaScript, dan CSS.

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

Fungsi Apa yang Akan Diberikan Ekstensi Google Chrome Kami?

Kami akan membuat ekstensi Chrome dasar yang memungkinkan Anda mengunjungi situs web Make Use Of dan melakukan pencarian acak berdasarkan kategori artikel yang tersedia di sana. Meskipun ini adalah proyek sederhana, Anda akan belajar banyak.

Anda Akan Menemukan Cara

• Kembangkan Ekstensi Google Chrome
• Menggunakan Ekstensi Chrome, masukkan kode khusus ke halaman web.
• Simulasikan klik dengan membuat pendengar acara.
• Menghasilkan angka acak
• Gunakan array dan variabel.

Buat Ekstensi Chrome DIY Anda Sendiri

Google telah membuatnya sangat sederhana untuk mengembangkan Ekstensi Chrome Anda sendiri, sehingga Anda akan siap dan berjalan dalam waktu singkat. Petunjuk di bawah ini hanya membutuhkan waktu 10 hingga 15 menit untuk diselesaikan, tetapi kami juga mengundang Anda untuk bereksperimen dengan kode Anda sendiri.

Langkah 1: Buat File

Bila Anda tidak ingin membagikan ekstensi Anda, Anda dapat menyimpannya di sistem lokal Anda. Untuk membuat ekstensi, kita hanya membutuhkan empat file: halaman HTML, file CSS, file JavaScript, dan file JSON.

Index.html, style.css, script.js, dan manifest.json adalah nama yang kami berikan untuk file kami. File manifes harus memiliki nama ini agar berfungsi dengan benar, tetapi yang lain dapat memiliki nama apa pun yang Anda pilih selama Anda memodifikasi kode yang sesuai.

File-file ini harus ditempatkan di folder root yang sama.

Langkah 2: Buat File Manifes

Setiap Ekstensi Google Chrome menyertakan file manifes. Ini memberi tahu Chrome tentang ekstensi sambil juga menerapkan beberapa pengaturan dasar. Nama, nomor versi, deskripsi, dan versi manifes harus disertakan dalam file ini. Kami juga telah memberikan izin dan tindakan yang memuat index.html sebagai sembulan ekstensi.

 { "name": "MakeUseOf.com Automated Search", "version": "1.0.0", "description": "A search tool to find interesting articles", "manifest_version": 3, "author": "Samuel Garbett", "permissions": ["storage", "declarativeContent", "activeTab", "scripting"], "host_permissions": [""], "action":{ "default_popup": "index.html", "default_title": "MUO Auto Search" } }

Langkah 3: Buat HTML dan CSS

Sebelum kita mulai mengkodekan skrip kita, pertama-tama kita harus mendesain antarmuka pengguna (UI) sederhana menggunakan HTML dan CSS. Anda dapat menggunakan pustaka CSS seperti Bootstrap untuk menghindari penulisan Anda sendiri, tetapi addon kami hanya memerlukan beberapa aturan.

Tag HTML, head, dan body semuanya ada di file index.html kami. Tag kepala memiliki judul halaman dan tautan ke lembar gaya kami, sedangkan badan berisi tag h1, tautan ke MakeUseOf.com, dan tombol lain yang akan digunakan sebagai pemicu skrip. File script.js disertakan dalam tag skrip di akhir dokumen.

 <html> <head> <title>MUO Auto Search</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>MUO Auto Search</h1> <a href="https://www.makeuseof.com/" target="_blank"><button>Go to MakeUseOf.com</button></a> <button>Start Random Search</button> </body> <script src="script.js"></script> </html>

File CSS kami bahkan lebih sederhana daripada file HTML kami, karena hanya mengubah gaya lima komponen. Kami memiliki pedoman untuk tag html dan body, serta tag h1 dan kedua tombol.

 html { width: 400px; } body { font-family: Helvetica, sans-serif; } h1 { text-align: center; } #buttonOne { border-radius: 0px; width: 100%; padding: 10px 0px; } #buttonTwo { border-radius: 0px; width: 100%; padding: 10px 0px; margin-top: 10px; }

Langkah 4: Buat JavaScript

Langkah terakhir dalam prosedur ini adalah membuat file script.js kita.

Fungsi insertScript() dalam file ini digunakan untuk menyisipkan fungsi lain ( autoSearch() ) ke halaman saat ini. Ini memungkinkan kami untuk mengedit halaman dan menggunakan opsi pencarian yang saat ini tersedia di situs web MakeUseOf.com.

Ini diikuti oleh pendengar acara yang menunggu hingga tombol Mulai Pencarian Acak ditekan sebelum menjalankan fungsi yang dibahas sebelumnya.

Metode autoSearch() sedikit lebih rumit. Ini dimulai dengan array yang berisi 20 kategori situs web MUO, memberi kami sampel yang layak untuk diambil untuk melakukan pencarian acak. Setelah itu, kita menggunakan fungsi Math.random() untuk menghasilkan bilangan bulat acak antara 0 dan 19 untuk memilih elemen dari array kita.

Kami sekarang perlu meniru klik tombol untuk membuka kotak pencarian MUO dengan kata pencarian kami di tangan. Kami pertama-tama menggunakan konsol pengembang Chrome untuk mendapatkan ID tombol pencarian, yang kemudian kami tambahkan ke kode JavaScript kami menggunakan metode click() .

 // This method incorporates our autoSearch functionality into the page's code function insertScript() { // This chooses the operation's focused tab and invokes the autoSearch function chrome.tabs.query({active: true, currentWindow: true}, tabs => { chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch}) }) // This closes the extension pop-up window that allows you to pick the website search bar window.close(); } // This is an event listener that detects when our "Start Random Search" button is clicked document.getElementById('buttonTwo').addEventListener('click', insertScript) // This code chooses a topic at random from an array and function autoSearch() { // This is an array in which we will store our search keywords const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac", "Linux", "Android", "Apple", "Internet", "Security", "Programming", "Entertainment", "Productivity", "Career", "Creative", "Gaming", "Social Media", "Smart Home", "DIY", "Review"]; // This creates a number between 0 and 19 at random let selectorNumber = Math.floor(Math.random() * 20); // The random number is used to choose an element from the array let selection = searchTerms[selectorNumber]; // This mimics clicking on the MUO website search button document.getElementById("js-search").click(); // This variables the MUO website search bar var searchBar = document.getElementById("js-search-input"); // This enters our arbitrary search query into the search field searchBar.value = searchBar.value + selection; // The process is completed by activating the online form document.getElementById("searchform2").submit(); }

Langkah 5: Mengunggah File ke Chrome:/ekstensi

File yang baru saja Anda buat sekarang harus ditambahkan ke halaman ekstensi Chrome. Setelah itu, ekstensi akan tersedia di Chrome dan akan diperbarui secara otomatis setiap kali Anda membuat perubahan pada file Anda.

Buka Google Chrome, navigasikan ke chrome:/extensions, dan pastikan penggeser Mode Pengembang di sudut kanan atas diaktifkan.

Klik Load Unpacked di pojok kiri atas, lalu pilih folder yang berisi file ekstensi Anda dan klik Select Folder .

Setelah ekstensi Anda dimuat, klik ikon potongan puzzle di sudut kanan atas untuk menyematkannya ke bilah tugas utama untuk akses yang lebih cepat.

Anda sekarang seharusnya dapat melihat ekstensi yang telah selesai di browser Anda. Penting untuk dicatat bahwa ekstensi ini hanya akan berfungsi di situs web MUO atau situs web yang menggunakan ID yang sama untuk tombol dan bilah pencarian mereka.

Membuat Ekstensi Google Chrome

Posting ini hanya menyentuh permukaan fungsi yang dapat Anda masukkan ke dalam ekstensi Google Chrome Anda sendiri. Setelah Anda menguasai dasar-dasarnya, itu pasti sepadan dengan waktu Anda untuk bereksperimen dengan ide-ide Anda sendiri.

Ekstensi Chrome dapat membantu Anda meningkatkan pengalaman berselancar, tetapi hindari beberapa ekstensi Chrome yang tidak jelas untuk mendapatkan pengalaman online yang aman dan terjamin.