chrome.browserAction

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Deskripsi

Ketersediaan

Pada gambar berikut, kotak multiwarna di sebelah kanan kolom URL adalah ikon untuk tindakan browser. Pop-up berada di bawah ikon.

Jika Anda ingin membuat ikon yang tidak selalu aktif, gunakan tindakan halaman, bukan tindakan browser.

Manifes

Daftarkan tindakan browser Anda di manifes ekstensi seperti ini:

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "Google Mail",  // optional, shown in tooltip
    "default_popup": "popup.html"    // optional
  },
  ...
}

Anda dapat memberikan ikon ukuran apa pun untuk digunakan di Chrome, dan Chrome akan memilih ikon yang paling dekat dan menskalakan ikon tersebut ke ukuran yang sesuai untuk mengisi ruang 16-dip. Namun, jika ukuran yang tepat tidak diberikan, penskalaan ini dapat menyebabkan ikon kehilangan detail atau terlihat buram.

Karena perangkat dengan faktor skala yang kurang umum seperti 1,5x atau 1,2x menjadi lebih umum, sebaiknya Anda menyediakan beberapa ukuran untuk ikon. Hal ini juga memastikan bahwa jika ukuran tampilan ikon pernah diubah, Anda tidak perlu melakukan pekerjaan apa pun lagi untuk menyediakan ikon yang berbeda.

Sintaksis lama untuk mendaftarkan ikon default masih didukung:

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

Bagian-bagian UI

Tindakan browser dapat memiliki ikon, tooltip, badge, dan pop-up.

Ikon

Ikon tindakan browser di Chrome memiliki lebar dan tinggi 16 dips (piksel independen perangkat). Ukuran ikon yang lebih besar akan disesuaikan, tetapi untuk hasil terbaik, gunakan ikon persegi 16 piksel.

Anda dapat menetapkan ikon dengan dua cara: menggunakan gambar statis atau menggunakan elemen kanvas HTML5. Menggunakan gambar statis lebih mudah untuk aplikasi sederhana, tetapi Anda dapat membuat UI yang lebih dinamis—seperti animasi yang lancar—menggunakan elemen kanvas.

Gambar statis dapat dalam format apa pun yang dapat ditampilkan WebKit, termasuk BMP, GIF, ICO, JPEG, atau PNG. Untuk ekstensi yang diekstrak, gambar harus dalam format PNG.

Untuk menetapkan ikon, gunakan kolom default_icon dari browser_action di manifes, atau panggil metode browserAction.setIcon.

Untuk menampilkan ikon dengan benar saat kepadatan piksel layar (rasio size_in_pixel / size_in_dip) berbeda dari 1, ikon dapat ditentukan sebagai kumpulan gambar dengan ukuran yang berbeda. Gambar sebenarnya yang akan ditampilkan akan dipilih dari kumpulan agar sesuai dengan ukuran piksel 16 dip. Kumpulan ikon dapat berisi spesifikasi ikon ukuran apa pun, dan Chrome akan memilih yang paling sesuai.

Tooltip

Untuk menetapkan tooltip, gunakan kolom default_title dari browser_action di manifes, atau panggil metode browserAction.setTitle. Anda dapat menentukan string khusus lokalitas untuk kolom default_title; lihat Internasionalisasi untuk mengetahui detailnya.

Badge

Tindakan browser dapat secara opsional menampilkan badge—sebagian teks yang dilapiskan di atas ikon. Badge memudahkan pembaruan tindakan browser untuk menampilkan sejumlah kecil informasi tentang status ekstensi.

Karena ruangnya terbatas, badge harus berisi 4 karakter atau kurang.

Tetapkan teks dan warna badge menggunakan browserAction.setBadgeText dan browserAction.setBadgeBackgroundColor.

Pop-up

Jika tindakan browser memiliki pop-up, pop-up akan muncul saat pengguna mengklik ikon ekstensi. Pop-up dapat berisi konten HTML apa pun yang Anda sukai, dan ukurannya akan otomatis disesuaikan agar sesuai dengan kontennya. Popup tidak boleh lebih kecil dari 25x25 dan tidak boleh lebih besar dari 800x600.

Untuk menambahkan pop-up ke tindakan browser, buat file HTML dengan konten pop-up. Tentukan file HTML di kolom default_popup dari browser_action di manifes, atau panggil metode browserAction.setPopup.

Tips

Untuk dampak visual terbaik, ikuti panduan berikut:

• Gunakan tindakan browser untuk fitur yang masuk akal di sebagian besar halaman.
• Jangan gunakan tindakan browser untuk fitur yang hanya relevan untuk beberapa halaman. Sebagai gantinya, gunakan tindakan halaman.
• Gunakan ikon besar dan berwarna-warni yang memaksimalkan ruang 16x16 piksel. Ikon tindakan browser akan tampak sedikit lebih besar dan lebih berat daripada ikon tindakan halaman.
• Jangan mencoba meniru ikon menu monokrom Google Chrome. Hal ini tidak berfungsi dengan baik dengan tema, dan bagaimanapun, ekstensi harus sedikit terlihat berbeda.
• Gunakan transparansi alfa untuk menambahkan tepi halus ke ikon Anda. Karena banyak orang menggunakan tema, ikon Anda harus terlihat bagus di berbagai warna latar belakang.
• Jangan terus-menerus menganimasikan ikon Anda. Itu sangat menjengkelkan.

Contoh

Anda dapat menemukan contoh sederhana penggunaan tindakan browser di direktori examples/api/browserAction. Untuk contoh lain dan bantuan dalam melihat kode sumber, lihat Contoh.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

chrome.browserAction.onClicked.addListener(
  callback: function,
)