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

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

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

أفضل للمستخدمين ويسهل على المطوّرين

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

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

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

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

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

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

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

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

manifest.json:

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

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

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

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

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 });
  }
});

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

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

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

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


صورة من قناة فاردان بابيكيان على قناة Unسباش