Chrome DevTools برای عامل‌ها به عامل شما امکان می‌دهد جلسه مرورگر را شروع کند و بااستفاده از سرور MCP، افزونه‌های Chrome را نصب کند یا با آن‌ها تعامل داشته باشد. این کار به عامل کدنویسی شما اجازه می‌دهد چرخه عمر افزونه را کنترل کند: نصب، بارگیری مجدد، و راه‌اندازی کنش‌ها.
به‌جای اینکه هر بار که کد را تغییر می‌دهید، افزونه ازهم بازشده را به‌صورت دستی بار کنید، در صفحه مدیریت افزونه‌ها روی دکمه بار کردن مجدد کلیک کنید، و افزونه را به‌صورت دستی راه‌اندازی کنید تا آن را آزمایش کنید، به عامل هوش مصنوعی خود دستور دهید کل فرایند را به‌صورت خودکار مدیریت کند. این قابلیت شکاف بین تولید کد ایستا و آزمایش زنده افزونه را پر می‌کند.
می‌توانید از ابزارهای افزونه‌ها برای انجام کارهای زیر استفاده کنید:
- نصب افزونه‌ها: نصب افزونه Chrome از حالت فشرده خارج‌شده از مسیر دایرکتوری محلی.
- فهرست کردن افزونه‌ها: فهرست همه افزونه‌های نصب‌شده Chrome را، ازجمله نام، شناسه، نسخه، و وضعیت فعال بودن آن‌ها، بازیابی کنید.
- بار کردن مجدد افزونه‌ها: افزونه Chrome از حالت فشرده خارج‌شده را با شناسه آن مجدداً بار کنید تا تغییرات کد فوراً اعمال شود.
- راه‌اندازی کنش‌ها: راه‌اندازی کنش پیش‌فرض افزونه با شناسه آن،
مثل باز کردن منو یا اجرای کنش اسکریپت پس‌زمینه (به
chrome.action در اسناد
میانای برنامه‌سازی کاربردی مراجعه کنید).
- حذف نصب افزونه‌ها: افزونه Chrome را با شناسه آن از جلسه مرورگر بردارید.
پیش‌نیازها
قبل‌از استفاده از ابزارهای افزونه، مطمئن شوید که موارد زیر را دارید:
- پرچم آزمایشی: دسته «افزونه‌ها» به‌طور پیش‌فرض در DevTools برای «نمایندگان» فعال نیست. باید سرور MCP را با
پرچم
--categoryExtensionsپیکربندی کنید. - افزونه‌های از حالت فشرده خارج‌شده: ابزارهایی مانند
install_extensionبه مسیر مطلق به پوشه افزونه از حالت فشرده خارج‌شده نیاز دارند، که آن‌ها را برای توسعه محلی ایده‌آل می‌کند. دسترسی فایل به پوشه افزونه: سرور فقط می‌تواند فایل‌های داخل ریشه‌های فضای کاری خود را بخواند. این‌ها ریشه‌هایی هستند که کارخواه MCP شما ارائه می‌دهد، مثل فهرستگان پروژه شما. اگر سرویس‌گیرنده شما ریشه‌ها را ارائه نکند، سرور فقط می‌تواند به فهرست موقت سیستم‌عامل دسترسی داشته باشد. در macOS، این دایرکتوری
/tmpنیست. اگر پوشه افزونه خارج از این ریشه‌ها باشد،install_extensionبا خطایAccess deniedناموفق می‌شود. برای مجاز کردن پوشه‌ای دیگر، پرچم--filesystemRoot(نام مستعار--workspace) را به آرگومان‌های سرور اضافه کنید:"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]برای جزئیات بیشتر، مجاز کردن دسترسی به فایل خارج از دایرکتوری موقت را ببینید.
موارد استفاده برای ابزارهای افزونه‌های Chrome
به نماینده‌تان دستور دهید چرخه حیات افزونه‌تان را هنگام توسعه و رفع اشکال مدیریت کند.
توجه: مراحل اجرای نماینده نمونه‌هایی از رفتار احتمالی هستند. عامل شما ممکن است متفاوت عمل کند.
تکرار و بار کردن مجدد سریع افزونه
بار کردن مجدد افزونه به‌صورت دستی پس‌از هر تغییر فایل، توسعه را کند می‌کند. به عاملتان دستور دهید تا اصلاح کد را اعمال کند و فوراً افزونه را مجدداً بار کند تا رفتار جدید را بدون دخالت دستی درستی‌سنجی کند.
نمونه پیام‌واره:
می‌توانید از رویکردی کلی استفاده کنید:
Verify the extension has access to the active tab.
یا می‌توانید جزئیات بیشتری ارائه دهید:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
اجرای نماینده نمونه: نماینده شما فایل manifest.json را در سیستم فایل شما ویرایش می‌کند. سپس ابزار reload_extension را بااستفاده از شناسه ارائه‌شده فرا می‌خواند.
درنهایت، ابزار trigger_extension_action را فرا می‌خواند تا افزونه را فعال کند
و تأیید کند که هیچ خطای اجازه‌ای در کنسول ایجاد نشده است.
آزمایش کردن کنش پیش‌فرض افزونه در صفحه هدف
اغلب لازم است نحوه تعامل کنش افزونه یا دستورگان محتوا با وب‌سایت خاصی را آزمایش کنید. با دستور دادن به عاملتان برای پیمایش به سایت، نصب افزونه، و راه‌اندازی آن، این فرایند را خودکارسازی کنید.
نمونه پیام‌واره:
می‌توانید از رویکردی کلی استفاده کنید:
Test my extension on example.com and verify it works correctly.
یا می‌توانید جزئیات بیشتری ارائه دهید:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
نمونه اجرای عامل: عامل شما بااستفاده از navigate_page به نشانی وب هدف پیمایش می‌کند. سپس از install_extension با مسیر مطلق ارائه‌شده استفاده می‌کند. پس‌از بار شدن افزونه، trigger_extension_action را اجرا می‌کند تا
کلیک کاربر را شبیه‌سازی کند. درنهایت، از list_console_messages برای تأیید اینکه
اسکریپت محتوا اجرا شده و خروجی موردانتظار را تولید کرده است استفاده می‌کند.
درستی‌سنجی افزونه‌های نصب‌شده و پاک‌سازی
درطول آزمایش خودکارشده، ممکن است لازم باشد بررسی کنید که افزونه با نسخه صحیح بار شده است یا نه، یا آن را بردارید تا برای آزمایش بعدی وضعیت پاکی تضمین شود.
نمونه پیام‌واره:
Uninstall 'My Test Extension' from the browser.
اجرای عامل نمونه: عامل شما از ابزار list_extensions برای
بازیابی فهرست افزونه‌های نصب‌شده و فراداده‌های آن‌ها استفاده می‌کند. این دستور برونداد را تجزیه می‌کند تا شناسه مرتبط با «افزونه آزمایشی من» را شناسایی کند. سپس از ابزار
uninstall_extension با آن شناسه استفاده می‌کند تا آن را به‌طور ایمن از مرورگر بردارد.
افزونه جدیدی ایجاد کنید و آن را آزمایش کنید
شروع یک افزونه جدید Chrome از ابتدا معمولاً نیاز به ایجاد فایل‌های دیگ بخار و بارگیری دستی دایرکتوری باز نشده در مرورگر برای آزمایش آن دارد. با دستور دادن به عاملتان برای تولید کد اولیه، بار کردن افزونه، و درستی‌سنجی عملکرد پایه آن، به‌صورت سرتاسری، در یک مرحله، از این راه‌اندازی دستی صرف‌نظر کنید.
پیام‌واره نمونه:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to a 'gray-bg-ext' folder in my project, navigate to example.com, load the extension, and verify that it works.
اجرای عامل نمونه: عامل شما «مانیفست نسخه ۳»
manifest.json و کارگزار سرویس پس‌زمینه‌ای را ایجاد می‌کند که به رویداد
chrome.action.onClicked گوش می‌دهد. سپس به صفحه آزمایش می‌رود،
install_extension را فراخوانی می‌کند، و از trigger_extension_action برای شبیه‌سازی کلیک کاربر
استفاده می‌کند. درنهایت، DOM را بازرسی می‌کند یا نماگرفتی می‌گیرد تا تأیید کند که پس‌زمینه خاکستری شده است و ثابت کند که کد تکراری کار می‌کند.