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

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

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

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

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

راه‌اندازی

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

برای استفاده از بسته مهارت‌ها، Modern Web Guidance را در محیط مورد نظر خود نصب کنید و مهارت افزونه‌ها را به آن اضافه کنید. در اینجا دستورالعمل‌های برخی از ابزارهای محبوب آمده است.

رابط خط فرمان

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

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

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

ضد جاذبه

هنگام نصب Antigravity، می‌توانید افزونه Modern Web Guidance را انتخاب کنید که شامل مهارت افزونه‌ها می‌شود، یا می‌توانید آن را از طریق Customizations > Build With Google Plugins > Modern Web Guidance اضافه کنید.

ابزارهای توسعه کروم برای کدنویسان

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

در اینجا دستورالعمل‌هایی برای برخی از محبوب‌ترین کارگزاران آمده است.

ضد جاذبه

برای استفاده از سرور Chrome DevTools MCP، دستورالعمل‌های موجود در مستندات Antigravity را برای نصب یک سرور MCP سفارشی دنبال کنید. موارد زیر را به پیکربندی سرورهای MCP اضافه کنید:

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

کلود کد

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

سایر عوامل

برای دستورالعمل‌های مربوط به راه‌اندازی سایر عامل‌ها، مستندات موجود در Chrome DevTools MCP GitHub را بررسی کنید.

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

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

این مهارت زمانی فعال می‌شود که از عباراتی مانند «بیایید این را منتشر کنیم» یا «این افزونه را برای فروشگاه آماده کنیم» استفاده کنید، اما برای ساده‌سازی گردش کار agentic خود، موارد زیر را به دستورالعمل‌های سیستم agent خود اضافه کنید (برای مثال، ~/.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.

افزونه خود را با عوامل کدنویسی بسازید و آزمایش کنید

مهارت توسعه‌ای که در راهنمای وب مدرن گنجانده شده است، به سه روش کلیدی به کارشناسان کمک می‌کند:

• دانش به‌روز API: این دانش، جدیدترین APIها را به عامل‌ها آموزش می‌دهد، که ممکن است پس از آموزش مدلی که شما استفاده می‌کنید، منتشر شده باشند.
• بهترین شیوه‌ها: این تضمین می‌کند که نمایندگان به تمام بهترین شیوه‌هایی که تیم ما در طول سال‌ها ساخت افزونه‌های کروم آموخته است، دسترسی داشته باشند.
• آمادگی برای ارسال: این افزونه اطلاعاتی را که ممکن است برای ارسال افزونه خود به فروشگاه وب کروم نیاز داشته باشید، پیگیری می‌کند و توزیع را آسان‌تر می‌کند.

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

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

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

• افزونه‌ها را نصب و حذف نصب کنید.
• تمام افزونه‌های نصب‌شده را فهرست کرده و آن‌ها را مجدداً بارگذاری کنید.
• فعال کردن اقدامات توسعه‌ای.
• تمام سطوح افزونه خود (پنجره بازشو، پنل کناری، سرویسکار) را بررسی کنید.

در اینجا یک دستورالعمل و یک ویدیو وجود دارد که نحوه عملکرد آن را در عمل نشان می‌دهد:

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

در این حالت، عامل باید یک فایل Manifest V3 ایجاد کند و درخواست مجوز storage کند زیرا می‌داند که باید داده‌ها را ذخیره کند. اکنون عامل می‌تواند یک افزونه بسازد، آن را نصب کند، اجرای آن را تماشا کند و پایداری آن را تأیید کند، بدون اینکه شما رابط چت را ترک کنید.

این یک مثال ساده از Prompt است. برای کسب اطلاعات بیشتر در مورد تکنیک‌های مختلف Prompt و یافتن آنچه که برای مورد استفاده شما بهتر عمل می‌کند، راهنمای ما در مورد مهندسی Prompt را بررسی کنید.

مثال‌هایی برای ساده‌سازی توزیع با CHROMEWEBSTORE.md ارائه دهید

اگرچه نصب افزونه و افزودن دستورالعمل‌ها به عامل شما بخش عمده‌ای از کار را انجام می‌دهد، اما دقیق بودن در دستورالعمل‌ها می‌تواند نتایج بهتری را برای مرحله توسعه‌ای که در آن هستید، ایجاد کند. در اینجا یک راهنمای سریع در مورد نحوه وادار کردن عامل خود به ایجاد، به‌روزرسانی و نگهداری فایل CHROMEWEBSTORE.md شما ارائه شده است.

• انتشار برای اولین بار : زمانی که افزونه شما از نظر امکانات کامل شده است و می‌خواهید اولین حضور فروشگاهی خود را ایجاد کنید.

Prepare the extension for publication on the Chrome Web Store.

• به‌روزرسانی مجوزها و توجیهات : فروشگاه وب کروم سیاست تک‌منظوره را اجرا می‌کند و برای هر مجوز درخواستی در 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.

نتیجه‌گیری

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

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