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


תמונה מאת Vardan Papikyan ב-UnFlood