Ini adalah katalog elemen antarmuka pengguna yang tersedia dalam ekstensi. Setiap entri berisi:
- Gambar elemen (jika ada).
- Deskripsi tentang kegunaannya.
- Elemen antarmuka terkait (jika ada).
- Link ke petunjuk penerapan dan contoh kode.
Elemen-elemen ini adalah cara yang berbeda untuk memanggil fitur ekstensi. Anda tidak diwajibkan untuk menerapkan semuanya. Bahkan, beberapa kasus penggunaan mungkin tidak menggunakan salah satunya. Misalnya, link yang lebih pendek dapat bertindak pada URL yang ditampilkan menggunakan pintasan keyboard dan menempatkan link yang disingkat ke papan klip secara terprogram.
Tindakan
Tindakan adalah hal yang terjadi saat pengguna mengklik ikon tindakan untuk ekstensi Anda. Tindakan dapat memanggil fitur ekstensi menggunakan Action API atau membuka popup yang memungkinkan pengguna memanggil beberapa fitur ekstensi. Beri tahu pengguna apa yang dilakukan tindakan tersebut menggunakan tooltip.
Untuk mempelajari cara membuat tindakan, lihat Mengimplementasikan tindakan, atau memeriksa contoh tindakan.
Ikon tindakan
Ekstensi memerlukan minimal satu ikon untuk merepresentasikannya. Pengguna mengklik ikon untuk memanggil tindakan, baik tindakan tersebut memanggil fitur ekstensi menggunakan Action API atau membuka pop-up.
Anda juga dapat menambahkan label, di sini yang disebut 'badge', ke ikon untuk menyampaikan hal-hal seperti status ekstensi atau bahwa tindakan diperlukan oleh pengguna.
Untuk mempelajari cara membuat tindakan, lihat Mengimplementasikan tindakan, atau memeriksa contoh tindakan.
Badge
Badge adalah potongan teks berformat yang ditempatkan di atas ikon tindakan untuk menunjukkan hal-hal seperti status ekstensi atau bahwa tindakan diperlukan oleh pengguna. Anda dapat menetapkan teks badge dengan memanggil chrome.action.setBadgeText() dan warna banner dengan memanggil chrome.action.setBadgeBackgroundColor().
Untuk mempelajari cara membuat tindakan, lihat Menerapkan tindakan, atau contoh Minum air.
Perintah
Perintah adalah kombinasi tombol yang memanggil fitur ekstensi. Tentukan kombinasi tombol dalam file manifest.json, lalu tanggapi kombinasi tersebut menggunakan Commands API.
Untuk mempelajari cara menerapkan perintah, lihat referensi API, atau contoh chrome.commands.
Menu konteks
Menu konteks muncul untuk klik alternatif (sering disebut klik kanan) mouse. Tentukan menu konteks menggunakan Context Menus API.
Untuk mempelajari cara menerapkan menu konteks, lihat contoh menu konteks.
Omnibox
Anda dapat berinteraksi dengan pengguna menggunakan omnibox Chrome. Ketika pengguna memasukkan kata kunci yang ditetapkan ekstensi di omnibox, ekstensi Anda akan mengontrol apa yang dilihat oleh pengguna tersebut di omnibox. Tentukan kata kunci dalam manifest.json dan tanggapi menggunakan Omnibox API.
Untuk mempelajari cara mengganti omnibox, lihat Tindakan memicu dari omnibox, atau contoh referensi API cepat.
Ganti halaman
Ekstensi dapat menggantikan salah satu halaman Chrome bawaan berikut:
- Histori
- Tab baru
- Bookmark
Untuk mempelajari cara mengganti halaman Chrome, lihat Mengganti halaman Chrome, atau contoh penggantian.
Pop-up
Pop-up adalah tindakan yang menampilkan jendela yang memungkinkan pengguna memanggil beberapa fitur ekstensi. Pop-up dapat dibuka jika pengguna mengklik ikon tindakan, melalui pintasan keyboard atau dengan memanggil chrome.action.openPopup().
Untuk mempelajari cara membuat pop-up, lihat, Menambahkan pop-up. Anda juga dapat mendownload langkah melalui salah satu contoh tindakan.
Panel samping
Panel samping memungkinkan pengguna memanggil fitur ekstensi bersama halaman web (lihat gambar). Panel samping dapat dilampirkan ke satu tab atau ke seluruh jendela. Panel samping dikontrol menggunakan Side Panel API.
Untuk mempelajari cara membuat panel samping, lihat kasus penggunaan panel samping, atau periksa contoh panel samping.
Tooltip
Tooltip adalah cara untuk menampilkan iklan, saat pengguna mengarahkan mouse ikon tindakan Anda, hal yang akan dilakukan oleh tindakan ekstensi Anda. Secara default, tooltip menampilkan nama ekstensi.
Untuk mempelajari cara menambahkan tooltip, gunakan anggota "default_title" dari kunci "action" file manifes.
DevTools
Anda dapat menambahkan panel kustom (tab yang dipanggil di DevTools) ke DevTools menggunakan DevTools Panels API. DevTools API lainnya memungkinkan Anda memantau jendela dan traffic jaringan. Anda juga dapat menyesuaikan panel perekam DevTools. Chrome DevTools panel Lighthouse Anda sendiri memulai hidup sebagai ekstensi DevTools.
Notifikasi
Posting pesan ke baki sistem pengguna menggunakan ekstensi Notifications API atau Notifications API platform web.
Untuk mempelajari cara menggunakan notifikasi, lihat Memberi tahu pengguna.
Tema
Tema adalah jenis ekstensi khusus yang mengubah tampilan browser. Tema dikemas seperti ekstensi reguler, tetapi tidak berisi kode JavaScript atau HTML.
Untuk mempelajari cara membangun tema, lihat Apa yang dimaksud dengan tema?.
Cara lain untuk berinteraksi dengan pengguna
Bagian ini menjelaskan cara lain ekstensi berinteraksi dengan pengguna. Meskipun tidak sepenuhnya diperlukan untuk ekstensi dasar, ekstensi dapat menjadi bagian penting dari ekstensi Anda. Bagi banyak pengguna, beberapa fitur ini sangat penting untuk menggunakan ekstensi.
Aksesibilitas
Bagi banyak pengguna, aksesibilitas secara harfiah adalah antarmuka pengguna, dan fiturnya sering kali berguna bagi pengguna yang tidak memerlukan aksesibilitas sebagai cara utama untuk berinteraksi dengan ekstensi Anda. Pelajari dasar-dasarnya membuat ekstensi dapat diakses.
Internasionalisasi
Bicaralah dengan pengguna dalam bahasa mereka. Pelajari cara menjadikan antarmuka bersifat internasional.