Chrome DevTools สำหรับ Agent ช่วยให้ Agent เริ่มเซสชันเบราว์เซอร์และติดตั้งหรือโต้ตอบกับส่วนขยาย Chrome โดยใช้เซิร์ฟเวอร์ MCP ได้ ซึ่งจะช่วยให้ Agent การเขียนโค้ดควบคุมวงจรของส่วนขยายได้ ไม่ว่าจะเป็นการติดตั้ง การโหลดซ้ำ และการทริกเกอร์การดำเนินการ
แทนที่จะโหลดส่วนขยายที่คลายแพ็กด้วยตนเอง คลิกปุ่มโหลดซ้ำในหน้าการจัดการส่วนขยายทุกครั้งที่เปลี่ยนโค้ด และทริกเกอร์ส่วนขยายด้วยตนเองเพื่อทดสอบ ให้สั่งให้ AI Agent จัดการกระบวนการทั้งหมดด้วยตนเอง ซึ่งจะช่วยลดช่องว่างระหว่างการสร้างโค้ดแบบคงที่กับการทดสอบส่วนขยายแบบสด
คุณสามารถใช้เครื่องมือส่วนขยายเพื่อทำสิ่งต่อไปนี้
- ติดตั้งส่วนขยาย: ติดตั้งส่วนขยาย Chrome ที่คลายแพ็กแล้วจากเส้นทางไดเรกทอรีในเครื่อง
- แสดงรายการส่วนขยาย: ดึงข้อมูลรายการส่วนขยาย Chrome ทั้งหมดที่ติดตั้งไว้ ซึ่งรวมถึงชื่อ รหัส เวอร์ชัน และสถานะที่เปิดใช้
- โหลดส่วนขยายซ้ำ: โหลดส่วนขยาย Chrome ที่คลายแพ็กแล้วซ้ำตามรหัสเพื่อใช้การเปลี่ยนแปลงโค้ดทันที
- ทริกเกอร์การดำเนินการ: ทริกเกอร์การดำเนินการเริ่มต้นของส่วนขยายตามรหัส
เช่น การเปิดเมนูหรือการดำเนินการสคริปต์เบื้องหลัง (ดู
chrome.action ในเอกสารประกอบ
API)
- ถอนการติดตั้งส่วนขยาย: นำส่วนขยาย Chrome ออกจากเซสชันเบราว์เซอร์ตามรหัส
ข้อกำหนดเบื้องต้น
ก่อนใช้เครื่องมือส่วนขยาย โปรดตรวจสอบว่าคุณมีสิ่งต่อไปนี้
- แฟล็กทดลอง: หมวดหมู่ส่วนขยายจะไม่ได้เปิดใช้งานโดยค่าเริ่มต้นใน DevTools สำหรับ Agent คุณต้อง กำหนดค่าเซิร์ฟเวอร์ MCP ด้วยแฟล็ก
--categoryExtensions - ส่วนขยายที่คลายแพ็กแล้ว: เครื่องมืออย่าง
install_extensionต้องใช้เส้นทางแบบสัมบูรณ์ไปยังโฟลเดอร์ส่วนขยายที่คลายแพ็กแล้ว ซึ่งเหมาะสำหรับการพัฒนาในเครื่อง สิทธิ์เข้าถึงไฟล์ในโฟลเดอร์ส่วนขยาย: เซิร์ฟเวอร์จะอ่านไฟล์ได้เฉพาะภายในรูทของพื้นที่ทำงานเท่านั้น ซึ่งเป็นรูทที่ไคลเอ็นต์ MCP ของคุณระบุ เช่น ไดเรกทอรีโปรเจ็กต์ หากไคลเอ็นต์ไม่ได้ระบุรูท เซิร์ฟเวอร์จะเข้าถึงได้เฉพาะไดเรกทอรีชั่วคราวของระบบปฏิบัติการเท่านั้น ใน macOS ไดเรกทอรีนี้ไม่ใช่
/tmpหากโฟลเดอร์ส่วนขยายอยู่นอกรูทเหล่านี้install_extensionจะล้มเหลวโดยมีข้อผิดพลาดAccess deniedหากต้องการอนุญาตโฟลเดอร์อื่น ให้เพิ่มแฟล็ก--filesystemRoot(นามแฝง--workspace) ลงในอาร์กิวเมนต์ของเซิร์ฟเวอร์"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]ดูรายละเอียดเพิ่มเติมได้ที่หัวข้ออนุญาตการเข้าถึงไฟล์นอก ไดเรกทอรี
กรณีการใช้งานสำหรับเครื่องมือส่วนขยาย Chrome
สั่งให้ Agent จัดการวงจรของส่วนขยายขณะพัฒนาและแก้ไขข้อบกพร่อง
หมายเหตุ: ขั้นตอนการดำเนินการของ Agent เป็นตัวอย่างลักษณะการทำงานที่อาจเกิดขึ้น Agent ของคุณอาจทำงานแตกต่างออกไป
ทำซ้ำและโหลดส่วนขยายซ้ำอย่างรวดเร็ว
การโหลดส่วนขยายซ้ำด้วยตนเองหลังจากการเปลี่ยนแปลงไฟล์ทุกครั้งจะทำให้การพัฒนาช้าลง สั่งให้ Agent ใช้การแก้ไขโค้ดและโหลดส่วนขยายซ้ำทันทีเพื่อยืนยันลักษณะการทำงานใหม่โดยไม่ต้องดำเนินการด้วยตนเอง
ตัวอย่างพรอมต์
คุณสามารถใช้แนวทางทั่วไปได้ดังนี้
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.
ตัวอย่างการดำเนินการของ Agent: Agent จะแก้ไขไฟล์ manifest.json ในระบบไฟล์ของคุณ จากนั้นจะเรียกใช้เครื่องมือ reload_extension โดยใช้รหัสที่ระบุ
สุดท้ายจะเรียกใช้เครื่องมือ trigger_extension_action เพื่อเปิดใช้งานส่วนขยายและยืนยันว่าไม่มีข้อผิดพลาดด้านสิทธิ์ปรากฏในคอนโซล
ทดสอบการดำเนินการเริ่มต้นของส่วนขยายในหน้าเป้าหมาย
คุณมักจะต้องทดสอบวิธีที่สคริปต์เนื้อหาหรือการดำเนินการของส่วนขยายโต้ตอบกับเว็บไซต์ที่เฉพาะเจาะจง ทำให้กระบวนการนี้เป็นแบบอัตโนมัติโดยสั่งให้ Agent ไปยังเว็บไซต์ ติดตั้งส่วนขยาย และทริกเกอร์ส่วนขยาย
ตัวอย่างพรอมต์
คุณสามารถใช้แนวทางทั่วไปได้ดังนี้
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.
ตัวอย่างการดำเนินการของ Agent: Agent จะไปยัง URL เป้าหมายโดยใช้ navigate_page จากนั้นจะใช้ install_extension กับเส้นทางแบบสัมบูรณ์ที่ระบุ หลังจากโหลดส่วนขยายแล้ว Agent จะดำเนินการ trigger_extension_action เพื่อจำลองการคลิกของผู้ใช้ สุดท้ายจะใช้ list_console_messages เพื่อยืนยันว่าสคริปต์เนื้อหาทำงานและสร้างเอาต์พุตที่คาดไว้
ยืนยันส่วนขยายที่ติดตั้งและล้างข้อมูล
ระหว่างการทดสอบอัตโนมัติ คุณอาจต้องยืนยันว่าส่วนขยายโหลดอย่างถูกต้องด้วยเวอร์ชันที่เหมาะสม หรือนำส่วนขยายออกเพื่อให้แน่ใจว่าอยู่ในสถานะที่สะอาดสำหรับการทดสอบครั้งถัดไป
ตัวอย่างพรอมต์
Uninstall 'My Test Extension' from the browser.
ตัวอย่างการดำเนินการของ Agent: Agent จะใช้เครื่องมือ list_extensions เพื่อดึงข้อมูลรายการส่วนขยายที่ติดตั้งและข้อมูลเมตาของส่วนขยาย จากนั้นจะแยกวิเคราะห์เอาต์พุตเพื่อระบุรหัสที่เชื่อมโยงกับ "ส่วนขยายทดสอบของฉัน" จากนั้นจะใช้เครื่องมือ uninstall_extension กับรหัสดังกล่าวเพื่อนำส่วนขยายออกจากเบราว์เซอร์อย่างปลอดภัย
สร้างส่วนขยายใหม่และทดสอบ
การเริ่มต้นส่วนขยาย Chrome ใหม่ตั้งแต่ต้นมักจะต้องสร้างไฟล์ Boilerplate และโหลดไดเรกทอรีที่คลายแพ็กแล้วลงในเบราว์เซอร์ด้วยตนเองเพื่อทดสอบ ข้ามการตั้งค่าด้วยตนเองนี้โดยสั่งให้ Agent สร้างโค้ดเริ่มต้น โหลดส่วนขยาย และยืนยันฟังก์ชันการทำงานพื้นฐานแบบครบวงจรในขั้นตอนเดียว
ตัวอย่างพรอมต์
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.
ตัวอย่างการดำเนินการของ Agent: Agent จะสร้าง manifest.json พื้นฐานของ Manifest V3 และบริการที่ทำงานอยู่เบื้องหลังที่รอรับเหตุการณ์ chrome.action.onClicked จากนั้นจะไปยังหน้าทดสอบ เรียกใช้ install_extension และใช้ trigger_extension_action เพื่อจำลองการคลิกของผู้ใช้ สุดท้ายจะตรวจสอบ DOM หรือถ่ายภาพหน้าจอเพื่อยืนยันว่าพื้นหลังเปลี่ยนเป็นสีเทา ซึ่งแสดงให้เห็นว่า Boilerplate ทำงานได้