ساختن افزونه با عامل‌های کدنویسی

عامل‌های کدنویسی هوشواره، مانند Antigravity، اکنون می‌توانند کد افزونه را با دقت چشمگیری تولید کنند. بااین‌حال، برای اینکه واقعاً از پتانسیل آن‌ها استفاده کنید و نتایج باکیفیتی به‌دست آورید، باید زمینه و ابزارهای مناسب را برای آن‌ها فراهم کنید.

این راهنما توضیح می‌دهد که چگونه ابزارهای مناسب را در عوامل کدنویسی خود راه‌اندازی کنید و چگونه این ابزارها می‌توانند به شما کمک کنند تا افزونه‌های بهتری را سریع‌تر بسازید.

مهارتی برای عامل‌های کدنویسی ایجاد کرده‌ایم که به‌طور خاص برای توسعه افزونه طراحی شده است. این مهارت بخشی از ابتکار گسترده‌تر ما، راهنمای وب نوین، است که تخصص پلاتفرم وب، روال‌های مطلوب، و الگوهای میانای برنامه‌سازی کاربردی نوین را برای عامل‌های کدنویسی هوش مصنوعی فراهم می‌کند.

اما ساختن افزونه فقط اولین قدم است. برای کمک به شما در درستی‌سنجی اینکه کدتان طبق انتظار کار می‌کند، Chrome DevTools برای عامل‌ها به دستیاران کدنویسی هوش مصنوعی امکان می‌دهد افزونه‌ها را مستقیماً در Chrome اشکال‌زدایی کنند و از قابلیت‌های اشکال‌زدایی DevTools و اطلاعات آماری عملکرد بهره‌مند شوند.

راه‌اندازی

راهنمای وب نوین

برای استفاده از بسته مهارت‌ها، «راهنمای وب نوین» را در محیط دلخواهتان نصب کنید و مهارت افزونه‌ها را به آن اضافه کنید. در اینجا دستورالعمل‌های مربوط به برخی‌از ابزارهای پرطرفدار آورده شده است.

CLI

نصب توصیه‌شده برای اکثر عوامل کدنویسی (ازجمله Gemini CLI، ‏Claude Code، و Codex) ازطریق modern-web-guidance CLI است که توسط تیم Chrome ساخته شده است. نصب مهارت‌ها ازطریق modern-web-guidance CLI به‌طور خودکار مهارت‌ها را به‌روز نگه می‌دارد.

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

این کار یک جادوگر تعاملی را برای نصب مهارت‌ها طبق اولویت‌های شما اجرا می‌کند. وقتی گزینه‌ها ارائه شد، عامل(های) کدنویسی‌تان را انتخاب کنید و هم chrome-extensions و هم modern-web-guidance را انتخاب کنید.

Antigravity

هنگام نصب Antigravity، می‌توانید افزونه راهنمای وب نوین را که شامل مهارت افزونه‌ها است انتخاب کنید، یا می‌توانید آن را ازطریق سفارشی‌سازی‌ها > ساخت با افزونه‌های Google > راهنمای وب نوین اضافه کنید.

‫Chrome DevTools برای عامل‌های کدنویسی

می‌توانید Chrome DevTools برای عامل‌ها را به‌عنوان افزونه، برافزا، یا سرور MCP به عامل کدنویسی موردنظرتان اضافه کنید.

در اینجا دستورالعمل‌های مربوط به برخی‌از پرطرفدارترین عامل‌ها آورده شده است.

Antigravity

1. Antigravity IDE را بارگیری کنید (Antigravity توصیه نمی‌شود زیرا به شما اجازه نمی‌دهد پیکربندی سرور MCP را به‌صورت دستی ویرایش کنید).

2. درهنگام راه‌اندازی، یا در تنظیمات > سفارشی‌سازی‌ها، در بخش ساخت با Google، Chrome DevTools را فعال کنید. با این کار فقط مهارت Chrome DevTools نصب می‌شود و سرور MCP نصب نخواهد شد.

   

3. برای افزودن سرور MCP مربوط به Chrome DevTools، به تنظیمات > سفارشی‌سازی بروید، روی دکمه افزودن سرور MCP کلیک کنید، و Chrome DevTools را جستجو کنید.

   

   

   

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 DevTools آزمایش کنید.» وقتی نماینده آزمایش افزونه را در مرورگر شروع می‌کند، 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 DevTools MCP GitHub را بررسی کنید.

دستورالعمل‌های عامل CHROMEWEBSTORE.md

بخش مهمی از انتشار افزونه، تکمیل «داشبورد توسعه‌دهندگان» است. این مهارت با داشتن عامل کدنویسی شما برای ایجاد و نگهداری یک فایل CHROMEWEBSTORE.md که اطلاعات لازم را ردیابی می‌کند، ازجمله توجیهات برای هر اجازه درخواست‌شده در کد، به این موضوع می‌پردازد.

وقتی از عبارت‌هایی مانند «Let's publish this» (بیایید این را منتشر کنیم) یا «Prepare this extension for the store» (این افزونه را برای فروشگاه آماده کن) استفاده می‌کنید، این مهارت فعال می‌شود، اما برای ساده‌سازی گردش‌های کاری عاملی، موارد زیر را به دستورالعمل‌های سیستم عاملتان اضافه کنید (برای مثال، ~/.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» نیاز داشته باشید پیگیری می‌کند و توزیع را آسان‌تر می‌کند.

«راهنمای وب نوین» همچنین شامل مهارت‌هایی است که هرآنچه را برای ارائه تجربه کاربری عالی نیاز دارید پوشش می‌دهد، ازجمله عملکرد، دسترس‌پذیری، و میاناهای برنامه‌سازی کاربردی نوین. برای مثال، مهارت‌های API هوش مصنوعی داخلی تضمین می‌کند که عامل‌های کدنویسی هوش مصنوعی همیشه از جدیدترین نسخه API به‌همراه اطلاعات اضافی درباره قوانین معماری صریح و محدودیت‌های سخت‌افزاری برای استفاده از این APIها استفاده می‌کنند تا مدیریت کارآمد بارگیری‌های مدل، تمرکز بر امنیت، و استراتژی‌های بازگشت به حالت قبلی را ممکن سازند.

این مهارت همچنین به عامل شما کمک می‌کند اطلاعات لازم برای انتشار را ردیابی کند، ازجمله توجیهات برای هر اجازه درخواست‌شده در کد. برای مثال، اگر از عامل کدنویسی بخواهید بااستفاده از Side Panel API افزونه‌ای بسازد و آن را در «نت‌بازار Chrome» منتشر کند، عامل تشخیص می‌دهد که به اجازه sidePanel نیاز دارد. سپس یک فایل CHROMEWEBSTORE.md با توجیه ایجاد می‌کند. وقتی برای ارسال آماده بودید، می‌توانید این توجیه را مرور کنید، درصورت نیاز اصلاحات لازم را انجام دهید، و آن را مستقیماً در «داشبورد توسعه‌دهندگان» کپی کنید.

Chrome DevTools برای عامل‌ها به دستیارهای کدنویسی هوش مصنوعی امکان می‌دهد افزونه‌ها را در نمونه 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» است.

در پروژه بعدی‌تان، آزمایش با این ابزارها را شروع کنید تا ببینید چگونه می‌توانند توسعه افزونه شما را از نمونه اولیه تا انتشار ساده و کارآمد کنند.