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

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

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

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

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

الإعداد

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

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

CLI

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

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

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

Antigravity

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

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

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

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

Antigravity

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

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

   

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

   

   

   

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

   

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 بسيطة". يمكنك إجراء الاختبار باستخدام "أدوات مطوّري البرامج في 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

وكلاء آخرون

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

تعليمات الوكيل في CHROMEWEBSTORE.md

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

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