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

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

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

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

פעולות

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

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

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

סמלי פעולות

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

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

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

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

תגים

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

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

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

פקודות

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

תפריט הקשר

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

איור 4: תפריט הקשר ותפריט משנה בתוך רכיב.

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

סרגל הכתובות

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

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

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

שינוי הדפים

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

• היסטוריה
• + כרטיסייה
• סימניות

איור 6: דוגמה לדף היסטוריה מותאם אישית.

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

פריטים קופצים

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

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

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

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

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

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

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

תיאורי כלים

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

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

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

DevTools

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

התראות

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

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

למידע נוסף על שימוש בהתראות, אפשר לעיין במאמר שליחת הודעה למשתמשים.

עיצובים

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

איור 11: עיצוב לדוגמה.

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

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

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

נגישות

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

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

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