עיצוב חוויית משתמש מעולה באמצעות Side Panel API החדש

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

תוסף מילון שמציג הגדרה של מילה שנבחרה
תוסף מילון שמציג את ההגדרה של מילה שנבחרה. בקישור הבא תוכלו למצוא מידע על הקוד במאגר הדוגמאות של chrome-extensions-Sample.

טוב יותר למשתמשים, קל יותר למפתחים

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

בעזרת Side Panel API אנחנו חוסכים כאבי ראש שקשורים להחדרת תוכן לדף לא מהימן. הוא גם מפחית משמעותית את הדרישה לשמירה על תאימות באתרים שונים ועיון בדוחות באגים לגבי שיבושים מקריים שנגרמו על ידי התוסף.

תוסף נלווה למשתמשים בכל האינטרנט

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

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

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

סקירה כללית של ה-API

כדי שהתוסף יופיע בחלונית הצדדית, צריך לבקש את ההרשאה "sidePanel" במניפסט ולהוסיף את המפתח "side_panel" עם "default_path" שמפנה לדף בתוך התוסף:

manifest.json:

{
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": [
    "sidePanel"
  ]
  ...
}

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

יכולות נוספות

אפשר לקשר את החלונית הצדדית לסמל הפעולה, כדי לפתוח אותה בקלות מתי שתרצו:

service-worker.js:

await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

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

service-worker.js:

chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
  if (!tab.url) return;

  const url = new URL(tab.url);

  if (url.origin === 'https://example.com') {
    chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
  } else {
    chrome.sidePanel.setOptions({ tabId, enabled: false });
  }
});

מידע נוסף

פרסמנו את מסמכי התיעוד של Side Panel API, ואפשר להתחיל לקרוא אותו עוד היום. כמו כן, הוספנו דוגמאות למאגר הדוגמאות של Chrome-extensions-דוגמאות של Chrome. זהו מקום מצוין לראות איך אפשר להשתמש ב-API בפועל.

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

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


תמונה מאת Vardan Papikyan מ-Unbounce