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

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

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

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

المربّع المتعدد الاستخدامات في المتصفّح.
الشكل 5: المربّع المتعدد الاستخدامات للمتصفّح.

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

صفحات الإلغاء

يمكن للإضافة إلغاء إحدى صفحات Chrome المضمَّنة التالية:

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

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

نوافذ منبثقة

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

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

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

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

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

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

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

تلميحات

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

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

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

DevTools

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

الإشعارات

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

إشعار بالإضافة على نظام التشغيل Mac.
الشكل 10: إشعار إضافة على نظام التشغيل Mac.

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

المظاهر

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

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

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

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

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

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

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

التوافق مع أسواق عالمية

تحدَّث إلى المستخدمين بلغتهم. تعرَّف على كيفية نشر واجهة بلغات متعددة.