יישום פעולה

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

רישום הפעולה

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

manifest.json:

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

להגיב לפעולה

רושמים handler של 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" בקובץ המניפסט.json.

manifest.json:

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

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