Mengembangkan aplikasi
Setelah membaca bagian Memulai, gunakan panduan ini sebagai garis besar komponen ekstensi, kemampuannya dalam Manifes V3, dan cara menggabungkannya. Pertama-tama, pahami dulu kemampuan ekstensi apa saja: Kemudian, pelajari cara menggabungkan fitur-fitur ini menggunakan bagian konsep inti ekstensi.
Mendesain antarmuka pengguna
Sebagian besar ekstensi memerlukan semacam interaksi pengguna agar dapat berfungsi. Platform ekstensi menyediakan berbagai cara untuk menambahkan interaksi ke ekstensi Anda. Metode ini mencakup pop-up yang dipicu dari toolbar Chrome, panel samping, menu konteks, dan lainnya.
Panel samping
Gunakan
chrome.sidePanel
API untuk menghosting konten di panel samping browser bersama dengan konten utama halaman web.
Tindakan
Mengontrol tampilan ikon ekstensi di toolbar.
Menu
Tambahkan item ke menu konteks Google Chrome.
![](https://developer.chrome.google.cn/static/docs/extensions/develop/images/develop-ui-sidepanel.png?authuser=19&%3Bhl=id&hl=id)
Mengontrol browser
API ekstensi Chrome memungkinkan Anda mengubah cara kerja browser.
Mengganti halaman dan setelan Chrome
Penggantian setelan adalah cara ekstensi mengganti setelan Chrome yang dipilih. Selain itu, ekstensi dapat menggunakan pengganti halaman HTML untuk mengganti halaman yang biasanya disediakan oleh Google Chrome. Ekstensi dapat mengganti pengelola bookmark, tab histori, atau tab baru.
Memperluas DevTools
Ekstensi DevTools menambahkan fungsi ke Chrome DevTools dengan mengakses API ekstensi khusus DevTools melalui halaman DevTools yang ditambahkan ke ekstensi. Anda juga dapat menggunakan
chrome.debugger
API untuk menjalankan protokol proses debug jarak jauh Chrome. Lampirkan ke satu atau beberapa tab untuk menginstrumentasikan interaksi jaringan, men-debug JavaScript, mengubah DOM, dan lainnya.
Menampilkan notifikasi
chrome.notifications
API memungkinkan Anda membuat notifikasi menggunakan template dan menampilkan notifikasi ini kepada pengguna di baki sistem pengguna.
Kelola histori
Gunakan
chrome.history
API untuk berinteraksi dengan catatan browser tentang halaman yang dikunjungi, dan chrome.browsingData
API untuk mengelola data penjelajahan lainnya. Gunakan chrome.topSites
untuk mengakses situs yang paling sering dikunjungi.
Mengontrol tab dan jendela
Gunakan API seperti
chrome.tabs
, chrome.tabGroups
, dan chrome.windows
untuk membuat, mengubah, dan mengatur browser pengguna.
Menambahkan pintasan keyboard
Gunakan
chrome.commands
API untuk menambahkan pintasan keyboard yang memicu tindakan di ekstensi Anda. Misalnya, Anda dapat menambahkan pintasan untuk membuka tindakan browser atau mengirim perintah ke ekstensi.
Mengautentikasi pengguna
Gunakan
chrome.identity
API untuk mendapatkan token akses OAuth 2.0.
Kelola ekstensi
chrome.management
API memberikan cara untuk mengelola daftar ekstensi yang diinstal dan berjalan. Hal ini khususnya berguna untuk ekstensi yang mengganti halaman Tab Baru bawaan.
Berikan saran
chrome.omnibox
API memungkinkan Anda mendaftarkan kata kunci dengan omnibox (kolom URL) Google Chrome.
Perbarui setelan Chrome
Gunakan
chrome.privacy
API untuk mengontrol penggunaan fitur di Chrome yang dapat memengaruhi privasi pengguna. Lihat juga chrome.proxy
API untuk mengelola setelan proxy Chrome.
Kelola download
Gunakan
chrome.downloads
API untuk memulai, memantau, memanipulasi, dan menelusuri download secara terprogram.
Menggunakan bookmark dan daftar bacaan
Gunakan
chrome.bookmarks
API dan chrome.readingList
API untuk membuat, mengatur, dan memanipulasi daftar ini.
Kontrol web
Mengubah konten dan perilaku halaman web secara dinamis. Anda dapat mengontrol dan mengubah web dengan memasukkan skrip, mencegat permintaan jaringan, dan menggunakan API web untuk berinteraksi dengan halaman web.
Memasukkan JavaScript dan CSS
Skrip konten adalah file yang berjalan dalam konteks halaman web. Mereka menggunakan Document Object Model (DOM) standar untuk membaca detail halaman web yang dikunjungi browser, membuat perubahan pada halaman, dan meneruskan informasi ke ekstensi induknya.
Mengakses tab aktif
Izin
"activeTab"
memberikan akses sementara kepada ekstensi ke tab yang sedang aktif saat pengguna memanggil ekstensi, misalnya dengan mengklik tindakannya. Akses ke tab akan berlaku selama pengguna berada di halaman tersebut, dan akan dicabut jika pengguna keluar atau menutup tab.
Mengontrol permintaan web
Gunakan API
chrome.declarativeNetRequest
, chrome.webRequest
, dan chrome.webNavigation
untuk mengamati, memblokir, dan mengubah permintaan jaringan.
Perekaman audio dan screenshot
Pelajari berbagai pendekatan untuk merekam audio dan video dari tab, jendela, atau layar menggunakan API platform web seperti
chrome.tabCapture
atau getDisplayMedia()
.
Mengubah setelan situs
Gunakan
chrome.contentSettings
API untuk mengontrol apakah situs dapat menggunakan fitur seperti cookie, JavaScript, dan plugin. Secara lebih umum, setelan konten memungkinkan Anda menyesuaikan perilaku Chrome per situs, bukan secara global.
Konsep inti
Dengan menggunakan API platform dan ekstensi web, Anda dapat membuat fitur yang lebih kompleks dengan menggabungkan berbagai komponen UI dan fitur platform ekstensi.
Pekerja layanan
Pekerja layanan ekstensi (service-worker.js) adalah skrip berbasis peristiwa yang dijalankan browser di latar belakang. Objek ini sering digunakan untuk memproses data, mengoordinasikan tugas di berbagai bagian ekstensi, dan sebagai pengelola peristiwa ekstensi.
Izin
Pahami izin: cara kerjanya dan kapan sebaiknya tidak meminta izin saat tidak diperlukan.
Pemfilteran konten
Ada berbagai cara untuk menerapkan pemfilteran konten dan jaringan di Ekstensi Chrome. Pelajari kemampuan pemfilteran konten yang tersedia untuk ekstensi dan berbagai pendekatan, teknik, dan API pemfilteran yang dapat digunakan oleh Ekstensi Chrome.
Pesan
Sering kali skrip konten, atau halaman ekstensi lainnya, perlu mengirim atau menerima informasi dari pekerja layanan ekstensi. Dalam hal ini, kedua belah pihak dapat memproses pesan yang dikirim dari pihak lain, dan merespons di saluran yang sama.
Pesan native
Aktifkan ekstensi Anda untuk bertukar pesan dengan aplikasi native.
Menghindari kode yang dihosting dari jarak jauh
Di Manifes V3, ekstensi perlu memaketkan semua kode yang digunakan di dalam ekstensi itu sendiri. Ada berbagai strategi untuk melakukannya.
Penyimpanan
Ekstensi Chrome memiliki Storage API khusus, yang tersedia untuk semua komponen ekstensi. Ini mencakup empat area penyimpanan terpisah untuk kasus penggunaan tertentu dan pemroses peristiwa yang melacak setiap kali data diperbarui.
Dokumen di luar layar
Pekerja layanan tidak memiliki akses DOM. Offscreen API memungkinkan ekstensi menggunakan DOM API dalam dokumen tersembunyi tanpa mengganggu pengalaman pengguna dengan membuka jendela atau tab baru.
Isolasi lintas origin
Isolasi lintas origin memungkinkan halaman web menggunakan fitur canggih seperti
SharedArrayBuffer
. Ekstensi dapat ikut serta dalam isolasi lintas origin dengan menentukan nilai yang sesuai untuk kunci manifes "cross_origin_embedder_policy"
dan "cross_origin_opener_policy"
.