إنشاء إضافات باستخدام وكلاء الترميز

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

يوضّح هذا الدليل كيفية إعداد الأدوات المناسبة في وكلاء الترميز وكيف يمكن أن تساعدك في إنشاء إضافات أفضل بشكل أسرع.

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

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

الإعداد

إرشادات الويب الحديث

لاستخدام حزمة المهارات، ثبِّت إرشادات الويب الحديث في بيئتك المفضّلة وأضِف مهارة الإضافات إليها. في ما يلي تعليمات بعض الأدوات الشائعة.

CLI

يُنصح بتثبيت معظم وكلاء الترميز (بما في ذلك Gemini CLI وClaude Code وCodex) من خلال واجهة سطر الأوامر modern-web-guidance التي أنشأها فريق Chrome، لأنّ ذلك سيضمن تحديث المهارات تلقائيًا.modern-web-guidance

  npx modern-web-guidance@latest install --choose

يتم تشغيل معالج تفاعلي لتثبيت المهارات حسب إعداداتك المفضّلة. عند ظهور الخيارات، اختَر وكلاء الترميز وحدِّد كلاً من chrome-extensions وmodern-web-guidance.

Antigravity

عند تثبيت Antigravity، يمكنك اختيار المكوّن الإضافي إرشادات الويب الحديث الذي يتضمّن مهارة الإضافات، أو يمكنك إضافته من خلال التخصيصات > المكوّنات الإضافية من Google > إرشادات الويب الحديث.

"أدوات مطوّري البرامج في Chrome" لوكلاء الترميز

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

في ما يلي تعليمات بعض البرامج الأكثر شيوعًا.

Antigravity

1. نزِّل Antigravity IDE (لا يُنصح باستخدام Antigravity لأنّه لا يتيح لك تعديل إعدادات خادم MCP يدويًا).

2. عند بدء التشغيل أو في الإعدادات > التخصيصات، ضِمن إنشاء المواقع الإلكترونية باستخدام Google، فعِّل أدوات مطوّري البرامج في Chrome. سيؤدي ذلك إلى تثبيت مهارة "أدوات مطوّري البرامج في Chrome" فقط، وليس خادم MCP.

   

3. لإضافة خادم "بروتوكول سياق النموذج" (MCP) في "أدوات مطوّري البرامج في Chrome"، انتقِل إلى الإعدادات > التخصيص، ثم انقر على الزر إضافة خادم MCP وابحث عن Chrome DevTools.

   

   

   

4. انقر على فتح إعدادات MCP لفتح إعدادات خادم MCP. يُرجى العِلم أنّه عليك إغلاق الإعدادات للاطّلاع على ملف الإعداد في بيئة التطوير المتكاملة.

   

5. أضِف مَعلمتَي الإعداد التاليتَين: --categoryExtensions (لتفعيل أدوات الإضافات) و--autoConnect (لإتاحة الربط بملف شخصي حالي على Chrome، وهو أمر مطلوب عند استخدام واجهات برمجة التطبيقات المضمّنة في Chrome المستندة إلى الذكاء الاصطناعي أو عند طلب تسجيل الدخول).

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. لتفعيل تصحيح الأخطاء عن بُعد، افتح Chrome وانتقِل إلى chrome://inspect/#remote-debugging واختَر السماح بتصحيح الأخطاء عن بُعد في مثيل المتصفّح هذا.

   

7. أعِد تشغيل Antigravity IDE.

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

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

الوكلاء الآخرون

للحصول على تعليمات حول إعداد وكلاء آخرين، يُرجى الاطّلاع على المستندات في أدوات مطوري البرامج في Chrome MCP GitHub.

CHROMEWEBSTORE.md agent instructions

يُعدّ ملء "لوحة بيانات المطوّر" جزءًا مهمًا من نشر إضافة. تعالج المهارة ذلك من خلال جعل وكيل الترميز ينشئ ملف CHROMEWEBSTORE.md ويحتفظ به، ويتتبّع هذا الملف المعلومات الضرورية، بما في ذلك مبرّرات كل إذن مطلوب في الرمز.

سيتم تشغيل المهارة عند استخدام عبارات مثل "لننشر هذا" أو "لنجهّز هذه الإضافة للمتجر"، ولكن لتبسيط سير عملك المستند إلى الوكلاء، أضِف ما يلي إلى تعليمات النظام الخاصة بالوكيل (على سبيل المثال، ~/.gemini/GEMINI.md لـ Antigravity أو ~/.claude/CLAUDE.md لـ Claude):

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

إنشاء الإضافة واختبارها باستخدام وكلاء الترميز

تساعد مهارة الإضافة المضمّنة في "إرشادات الويب الحديثة" موظفي الدعم بثلاث طرق رئيسية:

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

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

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

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

• تثبيت الإضافات وإلغاء تثبيتها
• إدراج جميع الإضافات المثبَّتة وإعادة تحميلها
• تشغيل إجراءات الإضافة
• فحص كل مساحة عرض في الإضافة (النافذة المنبثقة واللوحة الجانبية و"عامل الخدمة")

إليك طلبًا وفيديو يوضّحان كيفية عمل ذلك عمليًا:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

في هذه الحالة، يجب أن ينشئ الوكيل ملف Manifest V3 ويطلب الإذن storage لأنّه يعرف أنّه بحاجة إلى الاحتفاظ بالبيانات. يمكن للوكيل الآن إنشاء إضافة وتثبيتها ومشاهدة طريقة عملها والتحقّق من ثباتها بدون مغادرة واجهة المحادثة.

هذا مثال بسيط على طلب. لمزيد من المعلومات حول تقنيات الطلبات المختلفة والعثور على ما يناسب حالة الاستخدام، يمكنك الاطّلاع على دليلنا حول هندسة الطلبات.

أمثلة على الطلبات لتسهيل التوزيع باستخدام CHROMEWEBSTORE.md

مع أنّ تثبيت مهارة الإضافة وإضافة تعليمات إلى الوكيل سيؤديان معظم العمل، يمكن أن يؤدي تحديد التفاصيل في طلباتك إلى نتائج أفضل في مرحلة التطوير التي تعمل عليها. إليك دليل سريع حول كيفية مطالبة الوكيل بإنشاء ملف CHROMEWEBSTORE.md وتعديله والحفاظ عليه.

• النشر لأول مرة: عندما تكون إضافتك جاهزة تمامًا وتريد إنشاء حضورك الأوّلي على المتجر.

Prepare the extension for publication on the Chrome Web Store.

• تعديل الأذونات وأسباب طلبها: يفرض "سوق Chrome الإلكتروني" سياسة الغرض الوحيد ويتطلّب تقديم أسباب تفصيلية لكل إذن يتم طلبه في manifest.json.

We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.

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

Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

الخاتمة

يساعدك الجمع بين مهارات "إرشادات الويب الحديثة" وChrome DevTools للوكلاء في إنشاء ميزات عالية الجودة بشكل أسرع، كما يضمن استقرار الإضافة وجاهزيتها لإرسالها إلى "سوق Chrome الإلكتروني".

ابدأ بتجربة هذه الأدوات في مشروعك التالي لترى كيف يمكنها تبسيط عملية تطوير الإضافة من النموذج الأولي إلى النشر.