Komponen antarmuka pengguna

Ini adalah katalog elemen antarmuka pengguna yang tersedia di ekstensi. Setiap entri berisi:

  • Gambar elemen (jika ada).
  • Deskripsi tentang fungsinya.
  • Elemen antarmuka terkait (jika ada).
  • Link ke petunjuk penerapan dan contoh kode.

Elemen ini adalah cara yang berbeda untuk memanggil fitur ekstensi. Anda tidak diwajibkan untuk menerapkan semuanya. Bahkan, beberapa kasus penggunaan mungkin tidak menggunakan salah satu elemen tersebut. Misalnya, pemendek link dapat bertindak pada URL yang ditampilkan menggunakan pintasan keyboard dan menempatkan link yang dipendekkan ke dalam 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 pop-up yang memungkinkan pengguna memanggil beberapa fitur ekstensi. Beri tahu pengguna fungsi tindakan menggunakan tooltip.

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

Untuk mempelajari cara membuat tindakan, lihat Menerapkan tindakan, atau periksa 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.

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

Anda juga dapat menambahkan label, yang disebut 'badge', ke ikon untuk mengomunikasikan hal-hal seperti status ekstensi atau tindakan yang diperlukan oleh pengguna.

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

Badge

Badge adalah teks berformat yang ditempatkan di atas ikon tindakan untuk menunjukkan hal-hal seperti status ekstensi atau tindakan yang diperlukan oleh pengguna. Anda dapat menetapkan teks badge dengan memanggil chrome.action.setBadgeText() dan warna banner dengan memanggil chrome.action.setBadgeBackgroundColor().

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

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 dan responsi 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.

Menu konteks bertingkat.
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 ditentukan ekstensi di omnibox, ekstensi Anda akan mengontrol apa yang dilihat pengguna di omnibox. Tentukan kata kunci dalam manifest.json dan responsi menggunakan Omnibox API.

Kotak serbaguna browser.
Gambar 5: Omnibox browser.

Untuk mempelajari cara mengganti omnibox, lihat Memicu tindakan dari omnibox, atau contoh referensi API cepat.

Ganti halaman

Ekstensi dapat mengganti salah satu halaman Chrome bawaan ini:

  • Histori
  • Tab baru
  • Bookmark
Contoh halaman histori kustom.
Gambar 6: Contoh halaman histori kustom.

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().

Contoh pop-up.
Gambar 7: Contoh pop-up.

Untuk mempelajari cara membuat pop-up, lihat Menambahkan pop-up. Anda juga dapat mendownload langkah-langkah 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.

Ekstensi kamus yang mendefinisikan kata
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 menampilkan, saat pengguna mengarahkan kursor ke ikon tindakan Anda, fungsi tindakan ekstensi Anda. Secara default, tooltip menampilkan nama ekstensi.

Contoh tooltip untuk ikon tindakan.
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 (yang disebut tab 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 sendiri dimulai sebagai ekstensi DevTools.

Notifikasi

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

Notifikasi ekstensi di Mac.
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 biasa, tetapi tidak berisi kode JavaScript atau HTML.

Gambar 11: Contoh tema.

Untuk mempelajari cara membuat tema, lihat Apa yang dimaksud dengan tema?.

Cara lain untuk berinteraksi dengan pengguna

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

Internasionalisasi

Berinteraksi dengan pengguna dalam bahasa mereka sendiri. Pelajari cara menginternasionalkan antarmuka.