Mengimplementasikan tindakan

Tindakan adalah hal yang terjadi saat pengguna mengklik ikon toolbar, biasanya disebut ikon tindakan untuk ekstensi Anda. Tindakan memanggil fitur ekstensi menggunakan Action API atau membuka pop-up. Halaman ini menunjukkan cara memanggil fitur ekstensi. Untuk menggunakan pop-up, lihat Menambahkan pop-up.

Mendaftarkan tindakan

Untuk menggunakan chrome.action API, tambahkan kunci "action" ke file manifes ekstensi. Lihat bagian manifes dalam referensi API chrome.action untuk mengetahui deskripsi lengkap properti opsional kolom ini.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

Merespons tindakan

Daftarkan pengendali onClicked untuk saat pengguna mengklik ikon tindakan. Peristiwa ini tidak dipicu jika pop-up terdaftar dalam file manifest.json.

service-worker.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

Mengaktifkan tindakan secara kondisional

chrome.declarativeContent API memungkinkan Anda mengaktifkan ikon tindakan ekstensi berdasarkan URL halaman atau saat pemilih CSS cocok dengan elemen di halaman. Jika ikon tindakan ekstensi dinonaktifkan, ikon akan berwarna abu-abu. Jika pengguna mengklik ikon yang dinonaktifkan, menu konteks ekstensi akan muncul.

Ikon tindakan yang dinonaktifkan
Ikon tindakan yang dinonaktifkan.

Badge tindakan

Badge adalah potongan teks berformat yang ditempatkan di atas ikon tindakan untuk menunjukkan hal-hal seperti status ekstensi atau bahwa tindakan diperlukan oleh pengguna. Untuk mendemonstrasikan hal ini, contoh Minum Air menampilkan badge dengan "AKTIF" untuk menunjukkan kepada pengguna bahwa mereka telah berhasil menyetel alarm dan tidak menampilkan apa pun saat ekstensi tidak ada aktivitas. Badge dapat berisi maksimal empat karakter.

Ikon ekstensi tanpa badge dan dengan badge.
Ikon ekstensi dengan badge (kiri) dan tanpa badge (kanan).

Tetapkan teks badge dengan memanggil chrome.action.setBadgeText() dan warna latar belakang dengan memanggil chrome.action.setBadgeBackgroundColor()`.

service-worker.js:

chrome.action.setBadgeText({text: 'ON'});
chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

Tooltip

Daftarkan tooltip di kolom "default_title" pada kunci "action" dalam file manifest.json.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Anda juga dapat menetapkan atau memperbarui tooltip dengan memanggil action.setTitle()`. Jika tidak ada tooltip yang ditetapkan, nama ekstensi akan ditampilkan.