Mulai
Selamat datang di pengembangan Ekstensi Chrome. Temukan semua yang Anda perlukan untuk mulai membuat dan mendistribusikan Ekstensi Chrome pertama Anda.
Ringkasan
Apa itu ekstensi?
Ekstensi Chrome meningkatkan pengalaman penjelajahan dengan menyesuaikan antarmuka pengguna, mengamati peristiwa browser, dan memodifikasi web. Buka Chrome Web Store untuk melihat contoh lain tentang fungsi ekstensi.
Bagaimana mereka dibangun?
Anda dapat membuat ekstensi menggunakan teknologi web yang sama dengan yang digunakan untuk membuat aplikasi web: HTML, CSS, dan JavaScript.
Apa yang dapat mereka lakukan?
Selain Web API, ekstensi juga memiliki akses ke Chrome Extension API untuk menyelesaikan berbagai tugas. Untuk ringkasan yang lebih mendetail, lihat Panduan pengembangan.
Terminologi ekstensi
Ekstensi Chrome terdiri dari bagian-bagian yang memainkan peran yang berbeda.
Manifes
Manifes ekstensi adalah satu-satunya file yang diperlukan yang harus memiliki nama file tertentu: manifest.json. Ia juga harus ditempatkan di direktori {i>root
Pekerja layanan
Pekerja layanan berjalan di latar belakang dan menangani peristiwa browser, seperti menghapus bookmark atau menutup tab. Mereka tidak memiliki akses ke DOM, tetapi Anda dapat menggabungkannya dengan dokumen di balik layar untuk kasus penggunaan ini.
Skrip konten
Skrip konten menjalankan JavaScript dalam konteks halaman web.
Tindakan toolbar
Jalankan kode saat pengguna mengklik ikon toolbar ekstensi atau menampilkan pop-up menggunakan Action API.
Panel Samping
Tampilkan UI kustom di panel samping browser.
DeclarativeNetRequest
Mengintersep, memblokir, atau mengubah permintaan jaringan.
Publikasikan ke Chrome Web Store
Jika Anda mem-build ekstensi untuk diri sendiri, lihat tutorial memulai kami. Jika ingin memublikasikan ke Chrome Web Store, ada beberapa hal yang perlu Anda ketahui terlebih dahulu.
Desain ekstensi berkualitas tinggi
Saat memilih fitur yang akan didukung, pastikan ekstensi Anda memenuhi satu tujuan yang didefinisikan secara sempit dan mudah dipahami.
Memahami kebijakan
Ekstensi yang didistribusikan di Chrome Web Store harus mematuhi kebijakan program developer. Pelajari kebijakan berikut untuk memastikan ekstensi Anda dapat dihosting di Chrome Web Store.
Sertakan semua logika ekstensi
Saat menulis kode, perlu diingat bahwa semua logika harus disertakan dalam paket ekstensi. Artinya, tidak ada kode JavaScript tambahan yang dapat didownload saat runtime. Meningkatkan keamanan ekstensi memberikan alternatif untuk mengeksekusi kode yang dihosting dari jarak jauh.
Tutorial
Pilih salah satu tutorial berikut untuk memulai perjalanan pembelajaran ekstensi Anda.
Ekstensi pertama Anda
Buat ekstensi hello world pertama Anda, yang akan membantu Anda memahami alur kerja pengembangan ekstensi.
Jalankan skrip di setiap halaman
Pelajari cara menambahkan elemen ke situs tertentu secara otomatis.
Memasukkan skrip ke tab aktif
Pelajari cara menyederhanakan gaya halaman saat ini dengan mengklik ikon toolbar.
Membuat pengelola tab
Pelajari cara membuat pop-up yang mengelola tab Anda.
Menangani peristiwa dengan pekerja layanan
Pelajari cara membuat dan men-debug pekerja layanan ekstensi.
Men-debug ekstensi
Pelajari cara menemukan log dan pesan error selama proses debug.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Informasi yang saya butuhkan tidak ada"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Terlalu rumit/langkahnya terlalu banyak"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Sudah usang"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Masalah terjemahan"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Masalah kode / contoh"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Lainnya"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Mudah dipahami"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Memecahkan masalah saya"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Lainnya"
}]
{}
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],[],[],[]]