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

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

תוסף מילון שמציג את ההגדרה של מילה שנבחרה
תוסף מילון שמציג את ההגדרה של מילה שנבחרה. אפשר לעיין בקוד במאגר 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.