Browser Extensions Development (Chrome & Edge) · درس

الإجراء والأيقونات وزر شريط الأدوات

اضبط إجراء الإضافة: أيقونات شريط الأدوات والشارات والعناوين الديناميكية وسلوك النقر في 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.

الأسئلة الشائعة

هل درس «الإجراء والأيقونات وزر شريط الأدوات» مجاني؟

نعم — نص درس «الإجراء والأيقونات وزر شريط الأدوات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Browser Extensions Development (Chrome & Edge)