مكونات واجهة المستخدم

هذه قائمة بعناصر واجهة المستخدم المتاحة في الإضافات. يحتوي كل إدخال على ما يلي:

  • صورة العنصر (إذا كان ذلك منطبقًا)
  • تمثّل هذه السمة وصفًا للغرض من استخدامها.
  • عناصر الواجهة ذات الصلة (إن وُجدت)
  • روابط إلى تعليمات التنفيذ وعيّنات الرموز

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

المهام

الإجراء هو ما يحدث عندما ينقر المستخدم على رمز الإجراء الخاص بالإضافة. يمكن أن يؤدي الإجراء إما إلى استدعاء ميزة إحدى الإضافات باستخدام Action API أو فتح نافذة منبثقة تتيح للمستخدمين استدعاء ميزات متعددة للإضافة. أخبِر المستخدمين بما يفعله الإجراء باستخدام تلميح.

إضافة مثبَّتة وإضافة غير مثبَّتة
الشكل 1: الإضافات المثبّتة (على اليمين) وغير المثبّتة (على اليسار).

لمعرفة كيفية إنشاء إجراء، اطّلِع على تنفيذ إجراء أو راجِع نماذج الإجراءات.

رموز الإجراءات

تتطلّب الإضافة أيقونة واحدة على الأقل لتمثيلها. ينقر المستخدمون على الرمز لتنفيذ إجراء، سواء كان هذا الإجراء يستدعي ميزة إضافة باستخدام Action API أو يفتح نافذة منبثقة.

رمز إضافة "قاموس Google"
الشكل 2: رمز إضافة قاموس Google (باللون الأحمر).

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

لمعرفة كيفية إنشاء إجراء، اطّلِع على تنفيذ إجراء أو راجِع نماذج الإجراءات.

الشارات

الشارات هي أجزاء من النص المنسَّق يتم وضعها فوق رمز الإجراء للإشارة إلى أمور مثل حالة الإضافة أو الإجراءات التي يجب أن يتّخذها المستخدم. يمكنك ضبط نص الشارة من خلال استدعاء chrome.action.setBadgeText() ولون البانر من خلال استدعاء chrome.action.setBadgeBackgroundColor().

رمز إضافة بدون شارة ورمز إضافة مع شارة
الشكل 3: رمز إضافة بدون شارة (على اليمين) ورمز إضافة مع شارة (على اليسار).

لمعرفة كيفية إنشاء إجراء، اطّلِع على تنفيذ إجراء أو نموذج شرب الماء.

الطلبات الصوتية

الأوامر هي مجموعات مفاتيح تستدعي ميزة من ميزات الإضافة. حدِّد مجموعات المفاتيح في ملف manifest.json واستجِب لها باستخدام واجهة برمجة التطبيقات Commands API. للتعرّف على كيفية تنفيذ أمر، يمكنك الاطّلاع على مرجع واجهة برمجة التطبيقات أو نموذج chrome.commands.

قائمة السياقات

تظهر قائمة السياق للنقرة البديلة (التي يُطلق عليها غالبًا اسم النقر بزر الماوس الأيمن). حدِّد قوائم السياقات باستخدام Context Menus API.

قائمة سياق متداخلة
الشكل 4: قائمة سياقية وقائمة فرعية متداخلة

للتعرّف على كيفية تنفيذ قائمة سياقات، اطّلِع على أمثلة قائمة السياقات.

المربّع المتعدد الاستخدامات

يمكنك التفاعل مع المستخدمين باستخدام مربّع البحث الشامل في Chrome. عندما يُدخل المستخدم كلمات رئيسية محدّدة في الإضافة في شريط العناوين، تتحكّم الإضافة في ما يظهر للمستخدم في شريط العناوين. حدِّد الكلمات الرئيسية في manifest.json واستجِب لها باستخدام Omnibox API.

شريط العناوين الذكي في المتصفّح
الشكل 5: المربّع المتعدد الاستخدامات في المتصفّح

للتعرّف على كيفية تجاهل المربّع المتعدد الاستخدامات، راجِع "تنفيذ الإجراءات من المربّع المتعدد الاستخدامات" أو نموذج مرجع واجهة برمجة التطبيقات السريع.

تجاوز الصفحات

يمكن لإحدى الإضافات تجاهل إحدى صفحات Chrome المضمّنة التالية:

  • السجلّ
  • علامة تبويب جديدة
  • الإشارات المرجعية
مثال على صفحة سجلّ مخصّصة
الشكل 6: مثال على صفحة سجلّ مخصّصة.

لمعرفة كيفية تجاهل صفحات Chrome، يُرجى الاطّلاع على تجاهل صفحات Chrome أو نموذج التجاهل.

النوافذ المنبثقة

النافذة المنبثقة هي إجراء يعرض نافذة تتيح للمستخدمين استدعاء ميزات متعددة للإضافة. يمكن فتح النوافذ المنبثقة إذا نقر المستخدم على رمز الإجراء، أو باستخدام اختصار لوحة المفاتيح أو عن طريق طلب chrome.action.openPopup().

مثال على نافذة منبثقة
الشكل 7: مثال على نافذة منبثقة.

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

اللوحات الجانبية

تتيح اللوحة الجانبية للمستخدمين استخدام ميزات الإضافة إلى جانب صفحات الويب (راجِع الصورة). يمكن ربط لوحة جانبية بعلامة تبويب واحدة أو بنافذة كاملة. يتم التحكّم في اللوحة الجانبية باستخدام Side Panel API.

إضافة القاموس التي تحدّد الكلمة
الشكل 8: إضافة قاموس تحدّد كلمة "الإضافات".

لمعرفة كيفية إنشاء لوحة جانبية، اطّلِع على حالات استخدام اللوحة الجانبية أو راجِع عيّنات اللوحة الجانبية.

تلميحات

تلميح الأدوات هو طريقة لعرض وظيفة الإجراء الذي تنفّذه الإضافة عندما يمرّر المستخدم مؤشر الماوس فوق رمز الإجراء. تعرض تلميحات الأدوات تلقائيًا اسم الإضافة.

مثال على تلميح لرمز إجراء
الشكل 9: مثال على تلميح لرمز إجراء.

لمعرفة كيفية إضافة تلميح أداة، استخدِم العضو "default_title" من مفتاح "action" في ملفات البيان.

أدوات مطوري البرامج

يمكنك إضافة لوحات مخصّصة (وهي ما يُطلق عليه اسم علامات التبويب في "أدوات مطوّري البرامج") إلى "أدوات مطوّري البرامج" باستخدام DevTools Panels API. تتيح لك واجهات برمجة التطبيقات الأخرى في DevTools مراقبة النوافذ وعدد الزيارات على الشبكة. يمكنك أيضًا تخصيص لوحة المسجّل في "أدوات مطوّري البرامج". بدأت لوحة Lighthouse في "أدوات مطوّري البرامج في Chrome" كإضافة في "أدوات مطوّري البرامج".

الإشعارات

يمكنك نشر رسائل في "صينية النظام" الخاصة بالمستخدم باستخدام Notifications API للإضافات أو Notifications API لمنصات الويب.

إشعار إضافة على جهاز Mac
الشكل 10: إشعار إضافة على جهاز Mac

للتعرّف على كيفية استخدام الإشعارات، يُرجى الاطّلاع على إرسال إشعارات إلى المستخدمين.

المظاهر

المظهر هو نوع خاص من الإضافات التي تغيّر طريقة ظهور المتصفّح. يتم تجميع السمات مثل الإضافات العادية، ولكنّها لا تحتوي على رمز JavaScript أو HTML.

الشكل 11: مثال على مظهر.

لمعرفة كيفية إنشاء مظهر، اطّلِع على مقالة ما هي المظاهر؟.

طُرق أخرى للتفاعل مع المستخدمين

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

تسهيل الاستخدام

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

التدويل

التواصل مع المستخدمين بلغتهم كيفية إتاحة الواجهة بلغات متعددة