רכיבי ממשק המשתמש

זהו קטלוג של רכיבים בממשק המשתמש שזמינים בתוספים. כל רשומה מכילה:

  • תמונה של הרכיב (אם רלוונטי).
  • תיאור של הייעוד שלו.
  • רכיבי ממשק קשורים (אם רלוונטי).
  • קישורים להוראות הטמעה ולדוגמאות קוד.

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

פעולות

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

גם תוסף מוצמד וגם תוסף לא מוצמד.
איור 1: תוספים מוצמדים (מימין) ולא מוצמדים (משמאל).

כדי ללמוד איך ליצור פעולה, אפשר לעיין במאמר הטמעת פעולה או לבדוק את הדוגמאות לפעולות.

סמלי פעולה

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

הסמל של התוסף 'מילון Google'.
איור 2: הסמל של התוסף 'מילון Google' (באדום).

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

כדי ללמוד איך ליצור פעולה, אפשר לעיין במאמר הטמעת פעולה או לבדוק את הדוגמאות לפעולות.

תגים

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

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

כדי ללמוד איך ליצור פעולה, אפשר לעיין במאמר הטמעה של פעולה או בדוגמה שתיית מים.

פקודות

פקודות הן שילובים של מקשים שמפעילים תכונה של תוסף. מגדירים שילובי מקשים בקובץ manifest.json ומגיבים להם באמצעות Commands API. כדי ללמוד איך להטמיע פקודה, אפשר לעיין בהפניית ה-API או בדוגמה של chrome.commands.

תפריט הקשר

מופיע תפריט הקשר ללחיצה החלופית (שנקראת לעיתים קרובות לחיצה ימנית) של העכבר. אפשר להגדיר תפריטי הקשר באמצעות Context Menus API.

תפריט הקשר מקונן.
איור 4: תפריט הקשר ותפריט משנה מקונן.

כדי ללמוד איך להטמיע תפריט הקשר, אפשר לעיין בדוגמאות של תפריט הקשר.

סרגל הכתובות

אתם יכולים ליצור אינטראקציה עם משתמשים באמצעות תיבת ה-Omnibox ב-Chrome. כשמשתמש מזין מילות מפתח שהוגדרו על ידי התוסף בסרגל הכתובות, התוסף קובע מה המשתמש יראה בסרגל הכתובות. מגדירים מילות מפתח ב-manifest.json ומגיבים להן באמצעות Omnibox API.

תיבת הכתובות בדפדפן.
איור 5: סרגל הכתובות בדפדפן.

כדי ללמוד איך לבטל את סרגל הכתובות, אפשר לעיין במאמר הפעלת פעולות מסרגל הכתובות או בדוגמה של הפניית API מהירה.

שינוי דפים

תוסף יכול לבטל את אחת מההגדרות של דפי Chrome המובנים האלה:

  • היסטוריה
  • כרטיסייה חדשה
  • סימניות
דוגמה לדף היסטוריה בהתאמה אישית.
איור 6: דוגמה לדף היסטוריה בהתאמה אישית.

כדי ללמוד איך לשנות דפי Chrome, אפשר לעיין במאמר שינוי דפי Chrome או בדוגמה של שינוי.

חלונות קופצים

חלון קופץ הוא פעולה שפותחת חלון ומאפשרת למשתמשים להפעיל כמה תכונות של התוסף. אפשר לפתוח חלונות קופצים אם המשתמש לוחץ על סמל הפעולה, באמצעות מקש קיצור או על ידי קריאה ל-chrome.action.openPopup().

דוגמה לחלון קופץ.
איור 7: דוגמה לחלון קופץ.

במאמר הוספת חלון קופץ מוסבר איך ליצור חלון קופץ. אפשר גם להוריד שלב באמצעות אחת מדוגמאות הפעולה.

חלוניות צדדיות

חלונית צדדית מאפשרת למשתמשים להפעיל תכונות של תוספים לצד דפי אינטרנט (כמו שרואים בתמונה). אפשר לצרף חלונית צדדית לכרטיסייה אחת או לחלון שלם. השליטה בחלונית הצדדית מתבצעת באמצעות Side Panel API.

תוסף מילון שמגדיר את המילה
איור 8: תוסף מילון שמגדיר את המילה Extensions (תוספים).

כדי ללמוד איך ליצור חלונית צדדית, אפשר לעיין בתרחישי השימוש בחלונית הצדדית או לבדוק את הדוגמאות לחלוניות צדדיות.

הסברים קצרים

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

הסבר קצר לדוגמה לסמל פעולה.
איור 9: הסבר קצר לדוגמה לסמל של פעולה.

כדי ללמוד איך להוסיף תיאור קצר, משתמשים בחבר "default_title" של המקש "action" בקובצי המניפסט.

כלי פיתוח

אפשר להוסיף חלוניות מותאמות אישית (השם של הכרטיסיות בכלי הפיתוח) לכלי הפיתוח באמצעות DevTools Panels API. ממשקי API אחרים של DevTools מאפשרים לכם לעקוב אחרי חלונות ותנועה ברשת. אפשר גם להתאים אישית את חלונית ההקלטה בכלי הפיתוח. החלונית Lighthouse בכלי הפיתוח ל-Chrome התחילה את דרכה כתוסף לכלי הפיתוח.

התראות

שליחת הודעות למגש המערכת של המשתמש באמצעות Notifications API של התוספים או Notifications API של פלטפורמות האינטרנט.

התראה על תוסף ב-Mac.
איור 10: התראה על תוסף ב-Mac.

הוראות לשימוש בהתראות מופיעות במאמר הודעה למשתמשים.

עיצובים

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

איור 11: דוגמה לערכת נושא.

כדי ללמוד איך ליצור עיצוב, אפשר לעיין במאמר מהם עיצובים?.

דרכים אחרות ליצירת אינטראקציה עם משתמשים

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

נגישות

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

אינטרנציונליזציה

מדברים אל המשתמשים בשפה שלהם. איך מתאימים את הממשק לשפות שונות