עיצוב חוויית משתמש מעולה באמצעות 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