Browser Extensions Development (Chrome & Edge) · Pelajaran

Aksi, Ikon, dan Tombol Bilah Alat

Konfigurasikan aksi ekstensi: ikon bilah alat, lencana, judul dinamis, dan perilaku klik dalam Manifest V3.

Aksi, Ikon, dan Tombol Bilah Alat adalah pelajaran Browser Extensions Development (Chrome & Edge) gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Browser Extensions Development (Chrome & Edge), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

The Action API

The action is your extension's toolbar button. In Manifest V3 it is configured under the action key and controlled at runtime with chrome.action.

It is the primary entry point users see and click.

{
  "action": {
    "default_title": "My Tool",
    "default_icon": "icons/icon16.png"
  }
}

Default Icon Sizes

Provide multiple icon resolutions so the button looks sharp on standard and high-DPI displays.

{
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    }
  }
}

Popup vs No Popup

If you set default_popup, clicking the button opens that page. If you omit it, the click fires an onClicked event instead.

You cannot use both: a popup intercepts the click.

chrome.action.onClicked.addListener((tab) => {
  console.log('Button clicked on tab ' + tab.id)
})

Setting a Badge

A badge is a small label drawn over the icon, perfect for counts or status. Set its text with setBadgeText.

chrome.action.setBadgeText({ text: '5' })

Badge Colors

Customize the badge background to convey meaning, like red for errors or green for success.

chrome.action.setBadgeBackgroundColor({ color: '#d32f2f' })

Updating the Title Dynamically

The title is the tooltip shown on hover. Update it at runtime to reflect current state.

chrome.action.setTitle({ title: 'Logged in as Alice' })

Per-Tab Customization

Most action methods accept a tabId so each tab can show a different icon, badge, or title.

chrome.action.setBadgeText({ tabId: 42, text: 'ON' })

Enabling and Disabling

Use enable and disable to gray out the button when your extension cannot act on the current page.

chrome.action.disable()
// later, when usable again:
chrome.action.enable()

Changing the Icon at Runtime

Swap the icon to reflect state, such as active versus inactive, using setIcon.

chrome.action.setIcon({ path: 'icons/active32.png' })

Reacting From the Service Worker

Action logic belongs in your background service worker so it works even when no popup is open. Combine onClicked with other events to drive behavior.

chrome.action.onClicked.addListener(async (tab) => {
  await chrome.action.setBadgeText({ tabId: tab.id, text: 'OK' })
})

Designing Good Action UX

Keep the button meaningful: show a badge only when there is something worth noticing, and update the title to communicate state. Avoid noisy, constantly changing badges.

Quick Check

Test your grasp of the action API.

Recap

You configured the toolbar action:

Declared icons and an optional default_popup
Handled clicks with onClicked
Set badge text and color
Updated titles and icons per tab
Enabled or disabled the button

The action is your extension's front door, so make it clear and responsive.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Aksi, Ikon, dan Tombol Bilah Alat” gratis?

Ya — teks lengkap “Aksi, Ikon, dan Tombol Bilah Alat” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Browser Extensions Development (Chrome & Edge), upgrade ke CoddyKit PRO. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Aksi, Ikon, dan Tombol Bilah Alat”?

Konfigurasikan aksi ekstensi: ikon bilah alat, lencana, judul dinamis, dan perilaku klik dalam Manifest V3. Kamu berlatih Browser Extensions Development (Chrome & Edge) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Browser Extensions Development (Chrome & Edge)?

Tidak diperlukan pengalaman sebelumnya. Browser Extensions Development (Chrome & Edge) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Aksi, Ikon, dan Tombol Bilah Alat” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Browser Extensions Development (Chrome & Edge) ini?

Ya. Setiap pelajaran Browser Extensions Development (Chrome & Edge) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Browser Extensions Development (Chrome & Edge)