Scroll untuk baca artikel
#Viral

Cara Membuat Ekstensi Browser Anda Sendiri

224
×

Cara Membuat Ekstensi Browser Anda Sendiri

Share this article
cara-membuat-ekstensi-browser-anda-sendiri
Cara Membuat Ekstensi Browser Anda Sendiri

Kebanyakan dari kami menghabiskan banyak waktu di dalam browser web. Jika Anda seorang kromBahasa Indonesia: Bahasa Indonesia: Firefoxatau Tepian pengguna, maka Anda akan tahu browser ini hadir dengan sejumlah besar ekstensi pihak ketiga untuk menambah fitur-fitur yang sudah ada dalam perangkat lunak.

Namun, bagaimana jika Anda memerlukan beberapa jenis fungsi tambahan tertentu, beberapa alat atau fitur yang tidak tercakup oleh add-on yang ada? Mungkin sudah saatnya untuk mempertimbangkan menulis ekstensi peramban Anda sendiri. Itu mungkin terdengar menakutkan, tetapi tidak terlalu sulit untuk dilakukan setelah Anda mempelajarinya. Dan setelah Anda membuat ekstensi khusus, Anda dapat menyimpannya untuk penggunaan pribadi atau menjadikannya publik sehingga siapa pun dapat menggunakannya.

Example 300x600

Diperlukan pengetahuan tentang coding, jadi Anda perlu mempelajari dasar-dasar penulisan halaman web dan skrip jika Anda belum mengetahuinya. Jika Anda seorang pemula, Anda dapat memulai dari hal kecil dan terus belajar. Ada juga banyak sumber daya bermanfaat di web jika Anda membutuhkannya, mulai dari pustaka kode hingga kursus online.

Memulai

Anda akan membutuhkan ide untuk ekstensi yang dapat Anda tulis.

Foto: David Nield

Ada beberapa komponen yang membentuk ekstensi browser. Pertama adalah manifest, yang mengambil nama file manifest.json dan berisi berbagai bit metadata yang mengidentifikasi ekstensi dan fungsinya. Anda memasukkan nama ekstensi dalam manifest, menjelaskan fungsinya, dan menentukan tindakan default yang dilakukan ekstensi.

Lihat di sini format berkas manifes dokumentasi yang disediakan oleh Google untuk Chrome. Anda dapat melihat beberapa contoh di sana, termasuk manifest minimal yang hanya berisi hal-hal dasar. Manifes tersebut menunjuk ke semua file lain yang diperlukan untuk ekstensi tersebut, yang harus disimpan dalam folder yang sama saat Anda mengembangkannya.

Beberapa berkas yang ditunjuk oleh manifest adalah berkas ikon, yang secara visual mewakili ekstensi Anda di browser. Pengguna akan mencari ikon Anda untuk melihat bahwa ekstensi Anda sedang berjalan, dan mereka akan mengeklik ikon tersebut untuk mengakses pengaturan ekstensi atau menonaktifkannya. Anda harus membuat ikon minimal berukuran 128 x 128 piksel, dan ikon dengan ukuran lain (seperti yang tercantum di sini) direkomendasikan, sehingga ekstensi akan terlihat sama di mana pun ia muncul di browser, dari layar pengaturan hingga bilah tab. Jika Anda tidak memberikan ikon, ikon generik yang menampilkan huruf pertama nama ekstensi akan digunakan sebagai gantinya.

Anda kemudian memiliki skrip, yang melakukan pekerjaan sebenarnya dari ekstensi dan dapat hadir dalam berbagai bentuk: HTML (Hypertext Markup Language) untuk desain web dasar, CSS (Cascading Style Sheets) untuk penataan gaya dan manipulasi objek yang lebih canggih di web, dan JavaScript untuk melakukan sebagian besar tugas pemrograman (dengan asumsi ekstensi Anda melakukan sesuatu yang lebih dari sekadar memuat halaman di layar).

Ini adalah teknologi yang sama yang mendukung halaman web dan aplikasi web yang Anda muat setiap hari di dalam browser, dan Anda memerlukan setidaknya pemahaman dasar tentang HTML, CSS, dan JavaScript untuk memulainya. Jika Anda belum pernah mencoba bahasa ini sebelumnya, jangan berkecil hati: Bahkan jika Anda memulai dari awal, Anda dapat membuat kode sederhana dalam waktu kurang dari satu jam.

Anda juga memerlukan ide tentang apa yang harus dilakukan ekstensi Anda: Mungkin pikirkan tentang fungsi yang hilang yang Anda inginkan ada di browser Anda, atau sesuatu yang membuat situs web tertentu lebih mudah digunakan. Jika Anda memerlukan inspirasi, lihat pustaka ekstensi browser pihak ketiga untuk krom Dan Bahasa Indonesia: Firefox untuk melihat apa yang dibuat orang lain.

Proses Pengkodean

Codecademy adalah salah satu sumber daya yang dapat Anda gunakan untuk meningkatkan permainan coding Anda.

Foto: David Nield

Kami tidak memiliki cukup ruang di sini untuk panduan lengkap bagi pemula tentang pemrograman, tetapi sumber daya pendidikan yang tersedia di web hampir tidak ada habisnya, dan mempelajari dasar-dasarnya tidak memerlukan waktu selama yang Anda kira. Selain tutorial, Anda juga akan menemukan banyak contoh ekstensi dan cuplikan kode yang dapat Anda salin, tempel, lalu sesuaikan untuk keperluan Anda sendiri.

Google telah membantu menyediakan tutorial lengkap untuk membuat kode ekstensi Chrome dasar, yang mencakup semuanya mulai dari membuat manifest hingga memeriksa log kesalahan dan memastikan add-on yang telah selesai terlihat di browser. Ini adalah pengantar yang bagus tentang cara menyusun berbagai komponen yang membentuk ekstensi Anda.

Ada tutorial bagus lainnya di FreeCodeCamp. Memang sedikit lebih lama, tetapi masih bermanfaat, dimulai dari awal sebelum memperkenalkan ide-ide seperti cara memilih bagian halaman web dan cara ekstensi dapat digunakan untuk memanipulasi objek pada halaman. Anda juga akan menemukan banyak tutorial lain seperti ini.

Sejauh menyangkut sumber daya pengkodean umum, tempat-tempat seperti Akademi Kode Dan Meningkatkan Keterampilan dapat membawa Anda dari seorang pemula menjadi seseorang yang dapat memprogram ekstensi dengan cukup cepat. Ada banyak tutorial yang sangat berguna di YouTube juga—seperti video ini yang akan mengajarkan Anda dasar-dasar JavaScript dalam satu jam—dan Anda bahkan bisa mendapatkannya AI generatif alat untuk memberi Anda petunjuk dan juga bantuan (hati-hati dengan halusinasi tersebut).

Untuk mulai membuat ekstensi, sebaiknya targetkan browser yang paling sering Anda gunakan. Setelah membuat ekstensi untuk browser pilihan, Anda memiliki opsi untuk membuatnya tersedia untuk browser lain juga. Ini lebih mudah daripada sebelumnya, berkat penerapan standar lintas platform, tetapi masih memerlukan beberapa pekerjaan: Mozilla memiliki panduan yang berguna untuk ekstensi lintas-browser Anda dapat berkonsultasi.

Dalam hal perangkat lunak, Anda dapat mulai membuat kode dalam editor teks biasa seperti Notepad di Windows atau TextEdit di macOS. Saat Anda mulai merasa lebih percaya diri, Anda dapat beralih ke editor kode yang lebih canggih yang membantu memasukkan dan memformat kode, serta lingkungan pengembangan terintegrasi (IDE) lengkap yang mencakup alat tambahan untuk menguji dan men-debug pekerjaan Anda.

Menggunakan Ekstensi Anda

Beralih ke mode pengembang di Chrome untuk memuat ekstensi Anda sendiri.

Foto: David Nield

Ekstensi Anda tidak harus hampir selesai sebelum Anda dapat mulai mengujinya secara lokal di komputer Anda sendiri. Jika Anda memuat halaman Ekstensi di Chrome, misalnya, Anda akan melihat Pengembang sakelar pengalih mode di sudut kanan atas. Aktifkan ini dan Anda dapat memuat add-on apa pun yang telah Anda kerjakan.

Tiga pilihan yang diberikan kepada Anda adalah Muatan dibongkar (untuk memuat ekstensi yang masih disimpan sebagai beberapa file terpisah), Ekstensi paket (untuk mengemas file-file tersebut menjadi file .crx yang sudah jadi dan dapat didistribusikan), dan Memperbarui (untuk memperbarui file yang digunakan oleh ekstensi yang telah Anda tambahkan). Anda akan menggunakan ketiganya saat menjalani proses pengembangan.

Bila add-on yang sudah jadi dikemas rapi dalam sebuah berkas dengan .crx di akhir namanya, Anda dapat menambahkannya ke Chrome hanya dengan mengklik dua kali. Ini juga berarti Anda dapat mengirimkannya ke Toko Web Chrome. Ini memerlukan mendaftarkan akun pengembang Googleyang memerlukan biaya satu kali sebesar $5 dan memungkinkan Anda mengirimkan hingga 20 ekstensi berbeda.

Proses pengiriman memerlukan pengisian informasi tentang apa yang dilakukan ekstensi dan bagaimana cara menangani privasi pengguna. Setelah Anda mengirimkan ekstensi, Google akan meninjaunya untuk memastikannya aman dan melakukan apa yang dikatakannya. Proses ini dapat memakan waktu beberapa minggu, dan Google telah menerbitkan informasi lebih lanjut tentang hal ini di sini.

Jika Anda memutuskan untuk menerbitkan ekstensi, baik untuk kebaikan bersama atau untuk mendapatkan uang tambahan (Anda dapat mengenakan biaya untuk add-on jika Anda mau), ketahuilah bahwa mendistribusikannya memerlukan banyak pekerjaan. Selain menyediakan daftar ekstensi, Anda harus siap menanggapi umpan balik dan menangani laporan bug.

Meskipun terkadang ada ketidaknyamanan, ini jelas merupakan sesuatu yang layak dipertimbangkan. Selain memahami teknologi dan bahasa web masa kini, Anda juga bisa mendapatkan ribuan atau bahkan puluhan ribu orang menggunakan ekstensi yang Anda buat.