יישום פעולה

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

רישום הפעולה

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

manifest.json:

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

תגובה לפעולה

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

service-worker.js:

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

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

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

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

תג פעולה

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

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

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

service-worker.js:

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

הסבר קצר

רושמים את ההנחיות במסגרת השדה "default_title", מתחת למפתח "action" בקובץ manifest.json.

manifest.json:

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

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