Ação, Ícones e o Botão da Barra de Ferramentas
Configure a ação da extensão: ícones da barra de ferramentas, distintivos, títulos dinâmicos e comportamento ao clicar no Manifest V3.
Ação, Ícones e o Botão da Barra de Ferramentas é uma aula grátis de Browser Extensions Development (Chrome & Edge) no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Browser Extensions Development (Chrome & Edge), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 12
- Aulas
- 48
Perguntas Frequentes
A aula “Ação, Ícones e o Botão da Barra de Ferramentas” é grátis?
Sim — o texto completo de “Ação, Ícones e o Botão da Barra de Ferramentas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Browser Extensions Development (Chrome & Edge), atualize para CoddyKit PRO. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.
O que vou aprender em “Ação, Ícones e o Botão da Barra de Ferramentas”?
Configure a ação da extensão: ícones da barra de ferramentas, distintivos, títulos dinâmicos e comportamento ao clicar no Manifest V3. Você pratica Browser Extensions Development (Chrome & Edge) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Browser Extensions Development (Chrome & Edge)?
Nenhuma experiência prévia é necessária. Browser Extensions Development (Chrome & Edge) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Ação, Ícones e o Botão da Barra de Ferramentas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Browser Extensions Development (Chrome & Edge)?
Sim. Cada aula de Browser Extensions Development (Chrome & Edge) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Entendendo a Estrutura do Manifest V3
- Trabalhadores de Serviço em Segundo Plano
- Permissões e Correspondência de Hosts
- Ação, Ícones e o Botão da Barra de Ferramentas