Mengimplementasikan tindakan

Tindakan adalah apa yang terjadi saat pengguna mengklik ikon toolbar, yang 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 browser.action API, tambahkan kunci "action" ke file manifest ekstensi. Lihat bagian manifes pada referensi API browser.action untuk mengetahui deskripsi lengkap properti opsional kolom ini.

manifest.json:

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

Merespons tindakan

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

service-worker.js:

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

Mengaktifkan tindakan secara kondisional

browser.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.

Badge tindakan

Badge adalah potongan teks yang diformat dan ditempatkan di atas ikon tindakan untuk menunjukkan hal-hal seperti status ekstensi atau bahwa tindakan diperlukan oleh pengguna. Untuk mendemonstrasikan hal ini, sampel Drink Water menampilkan badge dengan "ON" untuk menunjukkan bahwa pengguna telah berhasil menyetel alarm dan tidak menampilkan apa pun saat ekstensi tidak aktif. Badge dapat berisi hingga empat karakter.

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

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

service-worker.js:

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

Tooltip

Daftarkan tooltip di kolom "default_title" di bawah 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 menyetel atau memperbarui tooltip dengan memanggil action.setTitle(). Jika tidak ada tooltip yang ditetapkan, nama ekstensi akan ditampilkan.