تصميم تجربة متميّزة للمستخدم باستخدام واجهة Side Panel API الجديدة

إيمي ستيم
إيمي Steam

قبل عام، وفي أيار (مايو) 2022، أضفنا اللوحة الجانبية إلى Chrome. هذه مساحة عرض مصاحبة جديدة تتيح للمستخدمين استخدام الأدوات بجانب المحتوى الذي يتصفّحونه. واليوم، يسرّنا الإعلان عن أنّ الإضافة يمكنها البدء في عرض المحتوى في اللوحة الجانبية، بدءًا من الإصدار 114 من Chrome.

إضافة معجم تعرض تعريف كلمة محددة
إضافة قاموس تعرض تعريف كلمة محددة. يمكنك الاطّلاع على الرمز في مستودع chrome-extensions- sample.

أفضل للمستخدمين، وأسهل للمطورين

وقد رأينا بالفعل أنّ العديد من المطوّرين يطبّقون التجارب الشبيهة بالشريط الجانبي في إضافاتهم، ولهذا يسعدنا أن نجعلها معيارًا لنظام التشغيل. باستخدام Side Panel API الجديدة، يمكنك الآن توفير واجهة مستخدم دائمة تفتح بجانب صفحة يزورها المستخدم. سيستفيد المستخدمون من تحديد الموضع والتنسيق المتسق بين الإضافات. بالإضافة إلى ذلك، إنّ إمكانية إظهار واجهة المستخدم بدون طلب أذونات المضيف تقدّم للمستخدمين فائدة كبيرة تتعلّق بالخصوصية، فضلاً عن فوائد إضافية تتمثل في تقليل عدد التحذيرات التي تظهر لإضافتك عند التثبيت.

تعمل Side Panel API على التخلّص من المشاكل المرتبطة بإدخال المحتوى في صفحة غير موثوق بها. كما أنه يقلل بشكل كبير من متطلبات الحفاظ على التوافق عبر المواقع الإلكترونية المختلفة وفحص تقارير الأخطاء بشأن الأعطال العرضية الناتجة عن الإضافة.

تطبيق مصاحب للمستخدمين على الويب

عند إنشاء تجربة لوحة جانبية جديدة كجزء من الإضافة، يجب مراعاة أمر واحد: كيف تساعد المستخدمين في إكمال المهام على الويب؟ فيما يلي بعض الأسئلة التي يجب عليك مراعاتها:

كيف تساعد اللوحة الجانبية المستخدم؟
تسري سياسة الغرض الوحيد على اللوحة الجانبية أيضًا. تأكَّد من أنّ اللوحة الجانبية توفّر وظائف ترتبط مباشرةً ببقية الإضافات وما يحاول المستخدم تحقيقه.
هل تظهر اللوحة الجانبية عندما تكون ذات صلة فقط؟
تتيح لك Side Panel API اختيار المواقع الإلكترونية التي ستظهر للمستخدمين اللوحة الجانبية عليها. وبهذه الطريقة، يمكنك تجنُّب عرضه عندما لا يكون ذا صلة بالمحتوى الذي يتصفّحه أو عندما لا يكون ذا صلة بالمحتوى الذي يتصفّحه.
هل التصميم متوافق مع بقية الإضافات الخاصة بي؟
يجب أن تكون اللوحة الجانبية جذابة بصريًا تتطابق مع الشعار والألوان والرموز والخطوط الخاصة بإضافتك وبطاقة بيانات المتجر. يوفّر ذلك للمستخدمين تجربة متّسقة ويمكن التعرّف عليها أينما كانوا عند استخدام الإضافات.
كيف يعثر المستخدمون على اللوحة الجانبية؟
أطلِع المستخدمين الجدد على كيفية استخدام اللوحة الجانبية من خلال تقديم مستندات أو تدريب كافٍ داخل الإضافة. سيساعدك هذا في الحفاظ على المستخدمين وتجنُّب الحصول على مراجعات سيئة في بطاقة بيانات المتجر. وتجدر الإشارة إلى أنه يمكنك البدء في تعليم المستخدمين قبل تثبيت الإضافة عن طريق تضمين فيديو على YouTube يعرض كيفية عمل الإضافة في بطاقة بيانات المتجر.

لقد عدّلنا أيضًا سياسات البرنامج وأجرينا تعديلات على قسمَي أفضل الممارسات وإرشادات الجودة للإشارة إلى بعض هذه الاعتبارات. تُبرز هذه التغييرات أنّ اللوحة الجانبية يجب أن تكون بمثابة وسيلة مساعدة مفيدة لتجارب تصفُّح المستخدمين من خلال توفير وظائف تكميلية. كما توضح أيضًا أن اللوحة الجانبية يجب ألا تحتوي على مشتتات غير ضرورية.

نظرة عامة على واجهة برمجة التطبيقات

لكي تظهر الإضافة في اللوحة الجانبية، اطلب إذن "sidePanel" في البيان، ثم أضِف مفتاح "side_panel" مع وضع علامة "default_path" تشير إلى صفحة داخل الإضافة:

manifest.json:

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

في صفحة اللوحة الجانبية، يمكنك تحميل النصوص البرمجية وواجهات برمجة التطبيقات لإضافة المكالمات كما تفعل مع أي صفحة إضافات أخرى. ستتم إزالة رمز اللوحة الجانبية من رمز الإضافة. لا تنسَ ضبط هذا الرمز لإضافة لمسة إضافية.

إمكانيات إضافية

ويمكنك ربط اللوحة الجانبية برمز الإجراء حتى يمكن فتحها بسهولة في أي وقت:

service-factor.js:

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

إذا أردت أن تظهر اللوحة الجانبية فقط على صفحات معيّنة، يمكنك التحكّم في ذلك ومنع ظهورها في أي مكان لا يكون مناسبًا للمستخدم:

service-factor.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 });
  }
});

مزيد من المعلومات

لقد نشرنا مستندات واجهة برمجة تطبيقات اللوحة الجانبية التي يمكنك بدء قراءتها اليوم. أضفنا أيضًا نماذج إلى مستودع chrome-extensions-sample، وهو يُعدّ مكانًا رائعًا للاطّلاع على الاستخدامات العملية لواجهة برمجة التطبيقات.

كما ذكرنا سابقًا، لقد عدّلنا أيضًا صفحات السياسة وأفضل الممارسات الخاصة بنا لمشاركة المزيد من المعلومات حول كيفية إنشاء لوحة جانبية توفّر أفضل تجربة للمستخدمين.

يمكنك متابعة أخبار إضافات Chrome من خلال الانتقال إلى صفحة الميزات الجديدة، وإذا كانت لديك أسئلة أو كنت بحاجة إلى مساعدة بشأن واجهة برمجة تطبيقات اللوحة الجانبية، يمكنك الانتقال إلى مجموعة Google إضافات Chromium.


صورة من تصوير فاردان بابيكيان على Unsplash