0Pricing
Browser Extensions Development (Chrome & Edge) · Lesson

Action, Icons & the Toolbar Button

Configure the extension action: toolbar icons, badges, dynamic titles, and click behavior in Manifest V3.

Action, Icons & the Toolbar Button is a free Browser Extensions Development (Chrome & Edge) lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Browser Extensions Development (Chrome & Edge) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Frequently asked questions

Is the “Action, Icons & the Toolbar Button” lesson free?

Yes — the full text of “Action, Icons & the Toolbar Button” is free to read here on the web, and the Browser Extensions Development (Chrome & Edge) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Browser Extensions Development (Chrome & Edge) course, upgrade to CoddyKit PRO.

What will I learn in “Action, Icons & the Toolbar Button”?

Configure the extension action: toolbar icons, badges, dynamic titles, and click behavior in Manifest V3. You practise Browser Extensions Development (Chrome & Edge) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Browser Extensions Development (Chrome & Edge)?

No prior experience is required. Browser Extensions Development (Chrome & Edge) on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Action, Icons & the Toolbar Button” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Browser Extensions Development (Chrome & Edge) lesson?

Yes. Every Browser Extensions Development (Chrome & Edge) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Understanding Manifest V3 Structure
  2. Background Service Workers
  3. Permissions and Host Matching
  4. Action, Icons & the Toolbar Button
← Back to Browser Extensions Development (Chrome & Edge)