Action, icônes et bouton de la barre d’outils
Configurez l’action de l’extension : icônes de la barre d’outils, badges, titres dynamiques et comportement au clic dans Manifest V3.
Action, icônes et bouton de la barre d’outils est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Browser Extensions Development (Chrome & Edge), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Action, icônes et bouton de la barre d’outils » est-elle gratuite ?
Oui — le texte complet de « Action, icônes et bouton de la barre d’outils » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Browser Extensions Development (Chrome & Edge), passe à CoddyKit PRO. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Action, icônes et bouton de la barre d’outils » ?
Configurez l’action de l’extension : icônes de la barre d’outils, badges, titres dynamiques et comportement au clic dans Manifest V3. Tu pratiques Browser Extensions Development (Chrome & Edge) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Browser Extensions Development (Chrome & Edge) ?
Aucune expérience préalable n'est requise. Browser Extensions Development (Chrome & Edge) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Action, icônes et bouton de la barre d’outils » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Browser Extensions Development (Chrome & Edge) ?
Oui. Chaque leçon Browser Extensions Development (Chrome & Edge) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Comprendre la structure de Manifest V3
- Travailleurs de service en arrière-plan
- Autorisations et correspondance des hôtes
- Action, icônes et bouton de la barre d’outils