كيف يساعد روبوت مراجعة "إرشادات الويب الحديث" في توفير واجهة مستخدم حديثة وسهلة الاستخدام في MetaMask

Gilberto Cocchi

Rick Viscomi

تاريخ النشر: 10 نوفمبر 2026

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

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

التحدي: مواكبة ميزات الويب الحديثة

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

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

الحلّ: مراجعة كل طلب سحب من خلال "إرشادات الويب الحديث"

في 16 سبتمبر 2026، تمت إضافة صفحة "طريقة العمل" مع قسم "الأسئلة الشائعة" إلى MetaMask/metamask-extension من خلال طلب سحب، وتم إنشاء قسم "الأسئلة الشائعة" بالطريقة نفسها التي يتم بها إنشاء معظم أقسام "الأسئلة الشائعة" في React:

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

وبعد حوالي خمس دقائق، أضاف الروبوت تعليقًا. واستنادًا إلى دليل search-hidden-content، تم توضيح ثلاث نقاط:

• يؤدي عرض كل إجابة بشكل مشروط إلى إزالتها من نموذج العناصر في المستند (DOM)، وبالتالي لا يمكن العثور على النص المصغّر باستخدام ميزة البحث في الصفحة في المتصفّح ويصعب على التكنولوجيا المساعِدة اكتشافه.
• يؤدي الإفصاح الأصلي عن <details>/<summary> (Baseline منذ عام 2020) إلى الاحتفاظ بالمحتوى في نموذج العناصر في المستند (DOM) مع الدلالات الصحيحة. بالنسبة إلى اللوحات الحصرية المتبادلة، تؤدي السمة name المشتركة (متاحة حديثًا منذ عام 2024) إلى إغلاق اللوحات الأخرى تلقائيًا. أما بالنسبة إلى الأسئلة الشائعة المتعددة المفتوحة، فيمكن حذفها.
• إذا فضّل الفريق استخدام مكوّن Disclosure الحالي، عليه على الأقل الاحتفاظ بالإجابات في DOM باستخدام hidden="until-found" وأداة معالجة الحدث beforematch التي تزامِن aria-expanded وحالة الرمز.

// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

بعد ثلاثة عشر دقيقة، أصدر المؤلف إصلاحًا. أصبح المكوّن إفصاحًا أصليًا عن <details>/<summary>، وظلت الإجابات المصغّرة في نموذج العناصر في المستند (DOM) للبحث في الصفحة، وأصبح زرا التنقّل رابطَين.

هذا الروبوت هو Cursor Automation الذي يشغّل مهارة "إرشادات الويب الحديث"، وقد أعدّه "نيبوموسينو" باستخدام طلب من ثلاثة أسطر. بحلول 21 أكتوبر 2026، أي بعد خمسة أسابيع:

• تم تشغيل الروبوت على ما يقرب من 480 طلب سحب وعلق على 64 منها (57 طلب سحب ميزة وإصلاح، بالإضافة إلى 7 طلبات سحب ومزامنة تلقائية) من 26 مؤلفًا.
• في طلبات السحب الخاصة بالميزات والإصلاحات، أصلح المهندسون 43 من النتائج، وأصلحوا 3 نتائج أخرى جزئيًا، عبر 22 طلب سحب.
• تحرّك المهندسون بسرعة: من بين 38 إصلاحًا تم تحديدها، تم تنفيذ 19 إصلاحًا في غضون 15 دقيقة و26 إصلاحًا في غضون ساعة، بمتوسط 15.2 دقيقة من التعليق إلى الإصلاح.

إليك كيفية إعداد MetaMask للروبوت، وما رصده، والمواضع التي كان فيها مزعجًا.

يتكوّن الإعداد من طلب من ثلاثة أسطر

عند سؤاله عن كيفية ضبط عملية التشغيل الآلي، أجاب "نيبوموسينو": "بالتأكيد، ليس هناك أي شيء مميز في عملية الإعداد لدينا. نحن نحافظ على الإيجاز والتركيز". التعليمات الكاملة:

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

كيفية عمل ذلك من الناحية العملية:

• إنه استشاري: في أول يومين، نشر الروبوت مراجعات "طلب التغييرات" (وموافقة واحدة)، والتي رفضها المؤلفون بمجرد معالجتها؛ منذ 18 سبتمبر، كانت كل مراجعة عبارة عن تعليق. ولا يحظر عملية الدمج، لذا يحتفظ المؤلفون بالقرار النهائي بشأن كل اقتراح.
• يستشهد بأدلة وملفات محددة في المستودع: من خلال 64 طلب سحب تم التعليق عليها، أثار الروبوت 122 نتيجة. من بين 102 طلب سحب للميزات والإصلاحات، يذكر 63 طلبًا دليل "إرشادات الويب الحديث" المحدّد الذي يتم تطبيقه، مثل search-hidden-content أو state-aware-sticky-headers أو sms-otp-form، ويشير إلى ملف حالي في المستودع عندما يستخدم النمط المقترَح.
• لا يرسل أي إشعارات إلا إذا كان طلب السحب يتضمن تعديلاً على واجهة المستخدم: من بين حوالي 480 طلب سحب في تلك الأسابيع الخمسة، تضمن 100 طلب على الأقل تعديلاً على واجهة المستخدم أو رمز العميل، وقدّم برنامج التتبُّع في المتوسط نتيجتَين لكل طلب سحب علّق عليه. أما الفِرق التي تستخدم في الغالب مستودعات الواجهة الأمامية، فيمكنها توقّع أن يعلّق على حصة أكبر.

يعمل الطلب نفسه مع أي مشغّل وكيل، ويتم تثبيت إرشادات الويب الحديث كمهارة أو مكوّن إضافي لـ Cursor وClaude Code وCodex وGitHub Copilot وAntigravity ووكلاء الترميز الآخرين. عندما يشغّل الوكيل المهارة، يبحث عن الأدلة المطابقة في فهرس محلي بدون الحاجة إلى مفاتيح واجهة برمجة التطبيقات، ويتحقّق من الاختلافات مقارنةً بها، باستخدام أي نموذج يوفّره مشغّل الوكيل الخاص بالفريق.

ما الذي رصدته ميزة "إرشادات الويب الحديث" ولم ترصده أدوات linter؟

يمكن أن يشير linter الثابت إلى سمة مفقودة في عنصر واحد، ولكن النتائج التي تلي ذلك تعود إلى سلوك التفاعل ودلالات HTML وكيفية ملاءمة المكونات معًا عبر الملفات.

حقل رسوم المعاملات الذي بدا قابلاً للتعديل مع تجاهل الإدخال بدون إشعار

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

بالاستناد إلى دليل النماذج، أشار الروبوت إلى ثلاثة إصلاحات:

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

طبّق المؤلف جميع الإصلاحات الثلاثة عبر كل من نماذج الإعدادات ودمجها في مكون واحد.

أزرار البانر التي أخفت عناوين URL الخاصة بها

في بانر الحالة لإحدى ميزات التداول في MetaMask، تم إنشاء إجراءَي "الأسئلة الشائعة" و"التواصل مع فريق دعم MetaMask" المضمَّنَين كأزرار تفتح علامة تبويب جديدة باستخدام JavaScript بدلاً من الروابط. في غضون ثلاث دقائق، أشار الروبوت - مستشهدًا بأدلة HTML وإمكانية الوصول - إلى أن برامج قراءة الشاشة تعلن عنها كأزرار وأن المستخدمين يفقدون إمكانات الارتباط مثل نسخ عنوان URL أو فتحه في علامة تبويب جديدة من قائمة السياق. وأشار أيضًا إلى مكوّن بانر حالي في قاعدة الرموز البرمجية لـ MetaMask يعرض هذه الإجراءات كروابط حقيقية.

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

حقول التحقّق التي كانت تصنيفاتها في مكان آخر

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

بعض الأمور الأخرى التي رصدها الروبوت

إليك خمس نتائج أخرى من الفترة نفسها التي استمرت خمسة أسابيع:

• تفاصيل CSS التي فاتتها المهندس وراء الروبوت: طلب السحب الخاص بـ Nepomuceno لعلامات التبويب الرئيسية الثابتة المتداخلة مع استعلامات حالة التمرير في CSS بدون تسمية حاوياتها وتبديل الحدود بطريقة غيّرت التخطيط في منتصف التمرير. أشار الروبوت إلى دليل العناوين الثابتة التي تتكيّف مع الحالة، وتمكّن من حلّ المشكلتَين. ووجد أنّ المراجعات مفيدة في ما يتعلّق بطلبات البحث عن موضع الارتساء وحالة الانتقال.
• تحديد الحد الأقصى للانزلاق السعري في منتصف ضغطة المفتاح: تم تحديد الحد الأقصى لقيم الانزلاق السعري المخصصة (حركة السعر التي يقبلها المستخدم في الصفقة) بنسبة تزيد عن %100 مع كل ضغطة مفتاح، ما أدى إلى تحويل %101 إلى %100 أثناء كتابة المستخدم. باتّباع دليل النماذج، تم نقل عملية التحقّق إلى وقت فقدان التركيز على الحقل، وتمت إضافة بانر تحذيري مرئي.
• مؤشر تحميل لم تتمكّن برامج قراءة الشاشة من استخدامه: وضع هيكل تحميل قائمة الرموز المميّزة تصنيف "جارٍ التحميل" على عنصر عام بدون دور، وهو ما تحظره ARIA. أشار برنامج التتبُّع إلى مكوّنَين في قاعدة الرموز البرمجية يستخدمان نمط قارئ الشاشة فقط في MetaMask (تم تعديل كليهما بعد مراجعة "إرشادات الويب الحديث" قبل ستة أيام)، وعدّل المؤلّف الهيكل وفقًا لهذا النمط بعد ثماني دقائق.
• إجراء غير متزامن غير محمي: لم يكن الزر غير المتزامن "عرض لدى مقدّم الخدمة" يتضمّن حماية أثناء التشغيل، لذا كان النقر مرّتين يؤدي إلى فتح علامات تبويب مكرّرة ومراقِبات في الخلفية. أضاف المؤلف حارسًا بعد أقل من أربع دقائق من التعليق.
• التحقّق من ضغطات المفاتيح بدون نموذج: تم التحقّق من صفحة استيراد الرموز غير القابلة للاستبدال (NFT) عند كل ضغطة مفتاح، ولم تتضمّن عنصر <form> لدلالات الإرسال. تم إصلاح كلا الخطأين بعد 19 دقيقة من المراجعة.

تظهر جميع المراجعات للجميع. تتوفّر تعليقات الروبوت الكاملة في كل طلب سحب مرتبط، ويمكنك تصفّح جميع التعليقات على GitHub.

ما لم يتم إصلاحه، ومدى الضوضاء

لم يتم عرض كل النتائج. يوضّح الجدول التالي كيف أحصت MetaMask النتائج الـ 102 في طلبات السحب الخاصة بالميزات والإصلاحات (تمت إضافة 20 نتيجة أخرى إلى 7 طلبات سحب خاصة بالإصدارات والمزامنة، حيث لا يُتوقع أن تؤدي المراجعة إلى تغيير الرمز البرمجي):

مُقسَّمة حسب الموضوع على مستوى جميع النتائج البالغ عددها 122 (بما في ذلك 20 نتيجة حول طلبات السحب الخاصة بالإصدار والمزامنة):

بعض الأنماط في هذه الأرقام:

• إنّ الإصلاحات التي تقتصر على مكوّن واحد تكون أكثر شيوعًا من التغييرات الشاملة في أدوات تسهيل الاستخدام. تبقى إصلاحات النماذج وHTML داخل المكوّن قيد المراجعة، لذلك عادةً ما يطبّقها المؤلفون على الفور (تم إصلاح 19 من أصل 31). كانت أدوات تسهيل الاستخدام تحتوي على أكبر عدد من النتائج (38)، ولكن تم إصلاح 12 منها فقط، عادةً لأن الإصلاح كان خارج نطاق طلب السحب أو كان بحاجة إلى مكون نظام تصميم مشترك لم يكن موجودًا بعد.
• "غير ذلك" هو المكان الذي يتجول فيه خارج إرشادات منصة الويب. غطّت النتائج الست عشرة اتساق نظام التصميم، وأخطاء المنطق، والنسخ، وجودة الاختبار، والوضع الداكن، ونظافة الرمز؛ تم اتخاذ إجراء بشأن 3 منها، أحدها تراجع حقيقي (تغيير قائمة الشبكة الذي أدى إلى كسر الملء المسبق للنموذج). كان من السهل تجاوز معظم هذه الـ 16، ولكن اكتشاف هذا التراجع جعلها تستحق نظرة سريعة.
• نتجت النتائج الموجبة الخاطئة عن كيفية تطبيق الوكيل للأدلة، ويمكن إصلاح معظم التشويش في الإعداد. بما أنّ روبوت المراجعة هو وكيل يقرأ الفرق بدلاً من linter ثابت، فإنّ نتائجه الموجبة الخاطئة ناتجة عن قراءة خاطئة للرمز المحيط أو تطبيق قاعدة بشكل أكثر صرامة من الدليل المرتبط. إنّ تخطّي فروع الإصدار والمزامنة وتشديد الطلب ليلتزم الوكيل بالقواعد المذكورة صراحةً في الدليل هي التعديلات التالية الواضحة.

يصف "نيبوموسينو" التأثير الأوسع على الفريق والوقت المستغرَق في المراجعة:

ساهم أيضًا "ديفيد مردوخ"، مهندس في MetaMask، في تحسين الإرشادات نفسها: عندما احتوى دليل تنسيق CSS على خطأ في أحد الأمثلة، أبلغ عن المشكلة، ودمج فريق "إرشادات الويب الحديث" التصحيح بعد يومين.

ما الذي يمكن أن يخبره MetaMask لفريق يفكر في استخدامه

• يُرجى قراءة الإرشادات قبل كتابة أي شيء. يمكنك تشغيل npx modern-web-guidance@latest search "accordion find in page" لمعرفة الأدلة التي سيستردّها الوكيل لتنفيذ مهمة معيّنة. يمكنك أيضًا تصفُّح المجموعة الكاملة من أدلة إرشادات الويب الحديث.
• ابدأ بالطلب المكوّن من ثلاثة أسطر والوكيل الذي تستخدمه حاليًا. ثبِّت المهارة (npx modern-web-guidance@latest install أو أمر المكوّن الإضافي للوكيل)، ووجِّه أي شيء يمكن تشغيله على طلبات السحب إليها، واطلب منها التعليق فقط عندما يكون هناك إجراء يمكن اتخاذه والالتزام بالقواعد المنصوص عليها صراحةً في الدليل. إنّ إبقاء الروبوت هادئًا عندما لا يكون هناك أي خطأ هو السبب في أنّ مهندسي MetaMask ما زالوا يقرأون تعليقاته.
• توقَّع أن تبقى بعض النتائج بدون معالجة. من بين 102 نتيجة حول طلبات السحب الخاصة بالميزات والإصلاحات، تم إصلاح 43 نتيجة وتم رفض 36 نتيجة أو لم تتم معالجتها. هذه النسبة مناسبة لبرنامج تتبُّع مراجعات استشارية، ولكنّها قد تكون مزعجة إذا تم استخدامها كعملية حظر.
• مواصلة المراجعة من قِبل فريق: يُعد الروبوت جيدًا في دلالات منصة الويب، وCSS الحديثة، وأنماط التفاعل، لكنه لا يعرف المنتج.

هناك أيضًا ما لم يقِسه فريق MetaMask بعد: بعد مرور خمسة أسابيع، لم يتتبّع الفريق تكلفة كل طلب سحب، أو وقت التشغيل، أو مقارنات النماذج، أو كيفية سلوك روبوت المراجعة خارج قاعدة رموز React البرمجية.

من خلال ثلاثة أسطر من الإعدادات، حصلت MetaMask على روبوت مراجعة يشير إلى دليل محدد لمعظم النتائج (ومثال حالي في المستودع عند وجوده). وعادةً ما يتم إصلاح الاقتراحات المقبولة في غضون ساعة.