Действие, значки и кнопка на панели инструментов
Настройте действие расширения: значки на панели инструментов, значки-уведомления, динамические заголовки и поведение при нажатии в Manifest V3.
«Действие, значки и кнопка на панели инструментов» — бесплатный урок Browser Extensions Development (Chrome & Edge) на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Browser Extensions Development (Chrome & Edge), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Изучай JavaScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 12
- Уроки
- 48
Часто задаваемые вопросы
Урок «Действие, значки и кнопка на панели инструментов» бесплатный?
Да — полный текст урока «Действие, значки и кнопка на панели инструментов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Browser Extensions Development (Chrome & Edge), подпишись на CoddyKit PRO. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.
Чему я научусь в уроке «Действие, значки и кнопка на панели инструментов»?
Настройте действие расширения: значки на панели инструментов, значки-уведомления, динамические заголовки и поведение при нажатии в Manifest V3. Ты практикуешь Browser Extensions Development (Chrome & Edge) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Browser Extensions Development (Chrome & Edge)?
Предыдущий опыт не требуется. Browser Extensions Development (Chrome & Edge) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Действие, значки и кнопка на панели инструментов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Browser Extensions Development (Chrome & Edge)?
Да. Каждый урок Browser Extensions Development (Chrome & Edge) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Изучение структуры Manifest V3
- Фоновые сервисные рабочие потоки
- Разрешения и сопоставление узлов
- Действие, значки и кнопка на панели инструментов