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

Oliver Dunk

Amy Steam

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

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

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

لقد رأينا بالفعل أن العديد من المطورين يستخدمون تجارب مشابهة للشريط الجانبي في إضافاتهم، وهي ولماذا نحن سعداء لجعلها معيارًا المنصة. باستخدام 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-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سباش