browser.action

Deskripsi

Ketersediaan

Manifes

Untuk menggunakan browser.action API, tentukan "manifest_version" 3 dan sertakan kunci "action" dalam file manifes Anda.

{
  "name": "Action Extension",
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

Kunci "action" (beserta turunannya) bersifat opsional. Jika tidak disertakan, ekstensi Anda tetap ditampilkan di toolbar untuk memberikan akses ke menu ekstensi. Oleh karena itu, sebaiknya Anda selalu menyertakan setidaknya kunci "action" dan "default_icon".

Konsep dan penggunaan

Bagian-bagian UI

Ikon

Ikon adalah gambar utama di toolbar untuk ekstensi Anda, dan ditetapkan oleh kunci "default_icon" di kunci "action" manifes Anda. Ikon harus memiliki lebar dan tinggi 16 piksel independen perangkat (DIP).

Kunci "default_icon" adalah kamus ukuran ke jalur gambar. Chrome menggunakan ikon ini untuk memilih skala gambar yang akan digunakan. Jika kecocokan persis tidak ditemukan, Chrome akan memilih kecocokan terdekat yang tersedia dan menskalakannya agar sesuai dengan gambar, yang dapat memengaruhi kualitas gambar.

Karena perangkat dengan faktor skala yang kurang umum seperti 1,5x atau 1,2x menjadi lebih umum, sebaiknya Anda menyediakan beberapa ukuran untuk ikon Anda. Hal ini juga membuat ekstensi Anda siap menghadapi perubahan ukuran tampilan ikon di masa mendatang. Namun, jika hanya memberikan satu ukuran, kunci "default_icon" juga dapat ditetapkan ke string dengan jalur ke satu ikon, bukan kamus.

Anda juga dapat memanggil action.setIcon() untuk menyetel ikon ekstensi Anda secara terprogram dengan menentukan jalur gambar yang berbeda atau memberikan ikon yang dibuat secara dinamis menggunakan elemen canvas HTML, atau, jika menyetel dari service worker ekstensi, API canvas di luar layar.

const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00';  // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
browser.action.setIcon({imageData: imageData}, () => { /* ... */ });

Untuk ekstensi yang dikemas (diinstal dari file .crx), gambar dapat menggunakan sebagian besar format yang dapat ditampilkan oleh mesin rendering Blink, termasuk PNG, JPEG, BMP, ICO, dan lainnya. SVG tidak didukung. Ekstensi yang belum di-unzip harus menggunakan gambar PNG.

Tooltip (judul)

Tooltip, atau judul, akan muncul saat pengguna menahan kursor mouse di atas ikon ekstensi di toolbar. Teks ini juga disertakan dalam teks yang dapat diakses yang diucapkan oleh pembaca layar saat tombol mendapatkan fokus.

Tooltip default ditetapkan menggunakan kolom "default_title" dari kunci "action" di manifest.json. Anda juga dapat menyetelnya secara terprogram dengan memanggil action.setTitle().

Badge

Tindakan dapat secara opsional menampilkan "badge" — sedikit teks yang ditumpuk di atas ikon. Dengan begitu, Anda dapat memperbarui tindakan untuk menampilkan sedikit informasi tentang status ekstensi, seperti penghitung. Badge memiliki komponen teks dan warna latar belakang. Karena ruang terbatas, sebaiknya teks badge menggunakan empat karakter atau kurang.

Untuk membuat badge, tetapkan secara terprogram dengan memanggil action.setBadgeBackgroundColor() dan action.setBadgeText(). Tidak ada setelan badge default dalam manifes. Nilai warna badge dapat berupa array empat bilangan bulat antara 0 dan 255 yang membentuk warna RGBA badge atau string dengan nilai warna CSS.

browser.