chrome.browserAction

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 mendekati dan menskalakannya ke ukuran yang sesuai untuk mengisi ruang 16 dip. Namun, jika ukuran persisnya 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, Anda dianjurkan untuk menyediakan beberapa ukuran untuk ikon Anda. Hal ini juga memastikan bahwa jika ukuran tampilan ikon diubah, Anda tidak perlu melakukan pekerjaan lebih lanjut 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 dip (piksel independen perangkat). Ikon yang lebih besar diubah ukurannya agar pas, tetapi untuk hasil terbaik, gunakan ikon persegi 16-dip.

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 halus—menggunakan elemen kanvas.

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

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

Untuk menampilkan ikon dengan benar saat kepadatan piksel layar (rasio size_in_pixel / size_in_dip) berbeda dengan 1, ikon dapat ditentukan sebagai kumpulan gambar dengan ukuran yang berbeda. Gambar sebenarnya yang akan ditampilkan akan dipilih dari set agar paling sesuai dengan ukuran piksel 16 dip. Set 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 manifest, 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—sedikit teks yang disusun di atas ikon. Badge memudahkan untuk memperbarui tindakan browser guna menampilkan sedikit informasi tentang status ekstensi.

Karena ruang badge terbatas, badge harus memiliki 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 inginkan, dan ukurannya otomatis disesuaikan agar sesuai dengan kontennya. Pop-up 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 manifest, atau panggil metode browserAction.setPopup.

Tips

Untuk dampak visual terbaik, ikuti panduan berikut:

• Gunakan tindakan browser untuk fitur yang sesuai di sebagian besar halaman.
• Jangan gunakan tindakan browser untuk fitur yang hanya cocok untuk beberapa halaman. Gunakan tindakan halaman.
• Gunakan ikon besar dan berwarna-warni yang memanfaatkan ruang 16x16 dip secara maksimal. Ikon tindakan browser seharusnya tampak sedikit lebih besar dan lebih berat daripada ikon tindakan halaman.
• Jangan mencoba meniru ikon menu monokrom Google Chrome. Hal itu tidak berfungsi dengan baik dengan tema, dan ekstensi harus sedikit menonjol.
• Gunakan transparansi alfa untuk menambahkan tepi lembut ke ikon Anda. Karena banyak orang menggunakan tema, ikon Anda harus terlihat bagus dengan berbagai warna latar belakang.
• Jangan terus-menerus menganimasikan ikon Anda. Itu hanya 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,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

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