Action, ikony i przycisk na pasku narzędzi
Skonfigurują Państwo akcję rozszerzenia: ikony na pasku narzędzi, plakietki, dynamiczne tytuły i reakcję na kliknięcia w Manifest V3.
Action, ikony i przycisk na pasku narzędzi to bezpłatna lekcja Browser Extensions Development (Chrome & Edge) na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Browser Extensions Development (Chrome & Edge), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Często zadawane pytania
Czy lekcja „Action, ikony i przycisk na pasku narzędzi” jest bezpłatna?
Tak — pełny tekst „Action, ikony i przycisk na pasku narzędzi” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Browser Extensions Development (Chrome & Edge), przejdź na CoddyKit PRO. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.
Co nauczysz się w „Action, ikony i przycisk na pasku narzędzi”?
Skonfigurują Państwo akcję rozszerzenia: ikony na pasku narzędzi, plakietki, dynamiczne tytuły i reakcję na kliknięcia w Manifest V3. Ćwiczysz Browser Extensions Development (Chrome & Edge) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Browser Extensions Development (Chrome & Edge)?
Nie wymagamy żadnego doświadczenia. Browser Extensions Development (Chrome & Edge) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Action, ikony i przycisk na pasku narzędzi”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Browser Extensions Development (Chrome & Edge)?
Tak. Każda lekcja Browser Extensions Development (Chrome & Edge) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Poznawanie struktury Manifest V3
- Background service workery
- Uprawnienia i dopasowywanie hostów
- Action, ikony i przycisk na pasku narzędzi