יישום פעולה

פעולה היא מה שקורה כשמשתמש לוחץ על סמל סרגל הכלים, שלרוב נקרא סמל הפעולה של התוסף. פעולה מפעילה תכונת תוסף באמצעות Action API או פותחת חלון קופץ. בדף הזה מוסבר איך להפעיל תכונת תוסף. כדי להשתמש בחלון קופץ, פועלים לפי ההוראות במאמר הוספת חלון קופץ.

רישום הפעולה

כדי להשתמש ב-API של chrome.action, צריך להוסיף את המפתח "action" לקובץ המניפסט של התוסף. לקבלת תיאור מלא של המאפיינים האופציונליים של השדה הזה, אפשר לעיין בקטע המניפסט בחומר העזר בנושא API chrome.action.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

משיבים לפעולה

רושמים handler של onClicked כשהמשתמש לוחץ על סמל הפעולה. האירוע הזה לא מופעל אם רשום חלון קופץ בקובץ המניפסט.json.

service-worker.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

הפעלת הפעולה באופן מותנה

ה-API של chrome.declarativeContent מאפשר להפעיל את סמל הפעולה של התוסף בהתאם לכתובת ה-URL של הדף, או כשהסלקטורים ב-CSS תואמים לרכיבים בדף. כאשר סמל הפעולה של תוסף מושבת, הסמל מופיע באפור. אם המשתמש ילחץ על סמל המושבת, יופיע תפריט ההקשר של התוסף.

סמל פעולה מושבתת
סמל פעולה מושבתת.

תג פעולה

תגים הם קטעי טקסט מעוצב שמוצבים מעל סמל הפעולה כדי לציין פרטים כמו מצב התוסף או שהמשתמש נדרש לבצע פעולות. כדי להמחיש זאת, בדוגמה של מי שתייה מוצג תג עם הכיתוב 'פועל'. כדי להראות למשתמש שהוא הגדיר בהצלחה התראה, ולא מציג שום דבר כשהתוסף לא פעיל. תגים יכולים להכיל עד ארבעה תווים.

סמל של תוסף ללא תג ועם תג.
סמל של תוסף ללא תג (בצד ימין) ועם תג (בצד ימין).

כדי להגדיר את הטקסט של התג, מפעילים את הפקודה chrome.action.setBadgeText() ואת צבע הרקע באמצעות קריאה ל-chrome.action.setBadgeBackgroundColor()`.

service-worker.js:

chrome.action.setBadgeText({text: 'ON'});
chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

הסבר קצר

רישום הסברים קצרים בשדה "default_title" מתחת למפתח "action" בקובץ המניפסט.json.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

אפשר גם להגדיר או לעדכן הסברים קצרים באמצעות הפקודה action.setTitle()`. אם לא הוגדר הסבר קצר, יופיע שם התוסף.