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

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

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

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

כבר ראינו שמפתחים רבים מטמיעים חוויות כמו סרגל צד בתוסף שלהם, ולכן אנחנו שמחים להפוך אותו לסטנדרט פלטפורמה. באמצעות 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-samples, שבו אפשר לראות איך משתמשים ב-API בפועל.

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

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


צילום: Vardan Papikyan ב-Unsplash