Browser Extensions Development (Chrome & Edge) · Ders

Eylem, Simgeler ve Araç Çubuğu Düğmesi

Manifest V3'te uzantı eylemini yapılandırın: araç çubuğu simgeleri, rozetler, dinamik başlıklar ve tıklama davranışı.

Eylem, Simgeler ve Araç Çubuğu Düğmesi, CoddyKit'te ücretsiz bir Browser Extensions Development (Chrome & Edge) dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Browser Extensions Development (Chrome & Edge) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Eylem, Simgeler ve Araç Çubuğu Düğmesi” dersi ücretsiz mi?

Evet — “Eylem, Simgeler ve Araç Çubuğu Düğmesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Browser Extensions Development (Chrome & Edge) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.

“Eylem, Simgeler ve Araç Çubuğu Düğmesi” dersinde ne öğreneceğim?

Manifest V3'te uzantı eylemini yapılandırın: araç çubuğu simgeleri, rozetler, dinamik başlıklar ve tıklama davranışı. Browser Extensions Development (Chrome & Edge) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Browser Extensions Development (Chrome & Edge) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Browser Extensions Development (Chrome & Edge), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Eylem, Simgeler ve Araç Çubuğu Düğmesi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Browser Extensions Development (Chrome & Edge) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Browser Extensions Development (Chrome & Edge) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Browser Extensions Development (Chrome & Edge) Sayfasına Dön