Browser Extensions Development (Chrome & Edge) · Lektion

Action, Icons und der Toolbar-Button

Konfigurieren Sie die Extension-Action: Toolbar-Icons, Badges, dynamische Titel und das Klickverhalten in Manifest V3.

Action, Icons und der Toolbar-Button ist eine kostenlose Browser Extensions Development (Chrome & Edge)-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Browser Extensions Development (Chrome & Edge)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Action, Icons und der Toolbar-Button“ kostenlos?

Ja — der vollständige Text von „Action, Icons und der Toolbar-Button“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Browser Extensions Development (Chrome & Edge)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Action, Icons und der Toolbar-Button“?

Konfigurieren Sie die Extension-Action: Toolbar-Icons, Badges, dynamische Titel und das Klickverhalten in Manifest V3. Du übst Browser Extensions Development (Chrome & Edge) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Browser Extensions Development (Chrome & Edge) zu starten?

Keine Vorkenntnisse erforderlich. Browser Extensions Development (Chrome & Edge) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Action, Icons und der Toolbar-Button“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Browser Extensions Development (Chrome & Edge)-Lektion Code schreiben und ausführen?

Ja. Jede Browser Extensions Development (Chrome & Edge)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Browser Extensions Development (Chrome & Edge)