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

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

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

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

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

الإشعارات

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

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

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

المظاهر

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

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

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

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

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

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

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

التدويل

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