Komponen antarmuka pengguna

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 implementasi dan contoh kode.

Elemen-elemen ini adalah cara yang berbeda untuk memanggil fitur ekstensi. Anda tidak perlu menerapkan semuanya. Bahkan, beberapa kasus penggunaan mungkin tidak menggunakannya. Misalnya, link yang lebih pendek dapat bertindak di URL yang ditampilkan menggunakan pintasan keyboard dan menempatkan link yang disingkat ke papan klip secara terprogram.

Tindakan

Tindakan adalah apa 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 tindakan yang dilakukan tindakan menggunakan tooltip.

Gambar 1: Ekstensi yang disematkan (kiri) dan yang tidak disematkan (kanan).

Untuk mempelajari cara membuat tindakan, lihat Mengimplementasikan tindakan, atau periksa contoh tindakan.

Ikon tindakan

Ekstensi memerlukan setidaknya satu ikon untuk mewakilinya. Pengguna mengklik ikon untuk memanggil tindakan, baik tindakan tersebut memanggil fitur ekstensi menggunakan Action API atau membuka popup.

Gambar 2: Ikon untuk ekstensi kamus Google (berwarna merah).

Anda juga dapat menambahkan label, di sini 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 periksa 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().

Gambar 3: Ikon ekstensi tanpa badge (kiri) dan dengan badge (kanan).

Untuk mempelajari cara membuat tindakan, lihat Menerapkan tindakan, atau sampel Air minum.

Perintah

Perintah adalah kombinasi tombol yang memanggil fitur ekstensi. Menentukan kombinasi tombol dalam file manifest.json dan meresponsnya menggunakan Commands API. Untuk mempelajari cara menerapkan perintah, lihat referensi API, atau contoh chrome.commands.

Menu konteks

Menu konteks akan muncul untuk klik alternatif (sering disebut klik kanan) dari mouse. Tentukan menu konteks menggunakan Context Menus API.

Gambar 4: Menu konteks dan submenu bertingkat.

Untuk mempelajari cara menerapkan menu konteks, lihat contoh menu konteks.

Omnibox

Anda dapat berinteraksi dengan pengguna menggunakan omnibox Chrome. Saat pengguna memasukkan kata kunci yang ditetapkan ekstensi di omnibox, ekstensi Anda mengontrol apa yang dapat dilihat pengguna di omnibox. Menentukan kata kunci dalam manifest.json dan meresponsnya menggunakan Omnibox API.

Gambar 5: omnibox browser.

Untuk mempelajari cara mengganti omnibox, lihat Tindakan pemicu dari omnibox, atau contoh referensi API cepat.

Timpa halaman

Ekstensi dapat mengganti salah satu halaman Chrome bawaan berikut:

• Histori
• Tab baru
• Bookmark

Gambar 6: Contoh halaman histori kustom.

Untuk mempelajari cara mengganti halaman Chrome, lihat Mengganti halaman Chrome, atau contoh ganti.

Pop-up

Pop-up adalah tindakan yang menampilkan jendela yang memungkinkan pengguna memanggil beberapa fitur ekstensi. Pop-up hanya dapat dibuka jika pengguna mengklik ikon tindakan. Ekstensi tidak dapat membuka pop-up secara terprogram.

Gambar 7: Contoh pop-up.

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 dipasang ke satu tab atau ke seluruh jendela. Panel samping dikontrol menggunakan Side Panel API.

Gambar 8: Ekstensi kamus yang menentukan kata "Ekstensi".

Untuk mempelajari cara membuat panel samping, lihat kasus penggunaan panel samping, atau periksa contoh panel samping.

Tooltip

Tooltip adalah cara untuk menunjukkan tindakan yang dilakukan tindakan ekstensi Anda saat pengguna mengarahkan mouse ke ikon tindakan. Secara default, tooltip menampilkan nama ekstensi.

Gambar 9: Contoh tooltip untuk ikon tindakan.

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. Panel Lighthouse Chrome DevTools mulai aktif sebagai ekstensi DevTools.

Notifikasi

Posting pesan ke baki sistem pengguna menggunakan Notifications API ekstensi atau Notifications API platform web.

Gambar 10: Notifikasi ekstensi di Mac.

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.

Gambar 11: Contoh tema.

Untuk mempelajari cara membuat tema, lihat Apa itu tema?.

Cara lain untuk berinteraksi dengan pengguna

Bagian ini menjelaskan cara lain agar ekstensi Anda dapat berinteraksi dengan pengguna. Meskipun tidak mutlak diperlukan untuk ekstensi dasar, ekstensi ini bisa 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 mereka yang tidak memerlukan aksesibilitas sebagai sarana utama untuk berinteraksi dengan ekstensi Anda. Pelajari dasar-dasar membuat ekstensi Anda dapat diakses.

Internasionalisasi

Bicaralah dengan pengguna dalam bahasa mereka. Pelajari cara menginternasionalkan antarmuka.