Gỡ lỗi tiện ích Chrome bằng các tác nhân AI

José Luis Zapata
Matthias Rohmer

Chrome DevTools cho tác nhân cho phép tác nhân của bạn bắt đầu một phiên trình duyệt và cài đặt hoặc tương tác với các tiện ích Chrome bằng máy chủ MCP. Điều này cho phép tác nhân mã hoá kiểm soát vòng đời của tiện ích: cài đặt, tải lại và kích hoạt các thao tác.

Thay vì tải một tiện ích chưa đóng gói theo cách thủ công, nhấp vào nút tải lại trong trang quản lý tiện ích mỗi khi bạn thay đổi mã và kích hoạt tiện ích theo cách thủ công để kiểm thử, hãy hướng dẫn tác nhân AI quản lý toàn bộ quy trình một cách tự động. Điều này giúp thu hẹp khoảng cách giữa việc tạo mã tĩnh và kiểm thử tiện ích trực tiếp.

Bạn có thể sử dụng các công cụ tiện ích để làm những việc sau:

  • Cài đặt tiện ích: Cài đặt một tiện ích Chrome chưa đóng gói từ đường dẫn thư mục cục bộ.
  • Liệt kê tiện ích: Truy xuất danh sách tất cả tiện ích Chrome đã cài đặt, bao gồm tên, mã nhận dạng, phiên bản và trạng thái bật.
  • Tải lại tiện ích: Tải lại một tiện ích Chrome đã giải nén theo mã nhận dạng để áp dụng ngay các thay đổi về mã xử lý ứng dụng.
  • Hành động kích hoạt: Kích hoạt hành động mặc định của một tiện ích theo mã nhận dạng của tiện ích đó, chẳng hạn như mở trình đơn hoặc thực thi một hành động tập lệnh nền (xem chrome.action trong tài liệu API).
    • Gỡ cài đặt tiện ích: Xoá một tiện ích Chrome khỏi phiên trình duyệt theo mã nhận dạng của tiện ích đó.

Điều kiện tiên quyết

Trước khi sử dụng các công cụ của tiện ích, hãy đảm bảo bạn có:

  • Cờ thử nghiệm: Danh mục Tiện ích không được bật theo mặc định trong Công cụ cho nhà phát triển dành cho tác nhân. Bạn phải định cấu hình máy chủ MCP bằng cờ --categoryExtensions.
  • Tiện ích đã giải nén: Các công cụ như install_extension yêu cầu đường dẫn tuyệt đối đến thư mục tiện ích đã giải nén, nên rất phù hợp cho việc phát triển cục bộ.

  • Quyền truy cập tệp vào thư mục tiện ích: Máy chủ chỉ có thể đọc tệp trong thư mục gốc của không gian làm việc. Đây là các thư mục gốc mà ứng dụng MCP cung cấp, chẳng hạn như thư mục dự án. Nếu ứng dụng của bạn không cung cấp gốc, máy chủ chỉ có thể truy cập vào thư mục tạm thời của hệ điều hành. Trên macOS, thư mục này không phải là /tmp. Nếu thư mục tiện ích nằm ngoài các thư mục gốc này, install_extension sẽ không thành công và báo lỗi Access denied. Để cho phép một thư mục khác, hãy thêm cờ --filesystemRoot (bí danh --workspace) vào các đối số máy chủ:

    "args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]

    Để biết thêm thông tin chi tiết, hãy xem phần Cho phép truy cập vào tệp bên ngoài thư mục tạm thời.

Trường hợp sử dụng các công cụ tiện ích của Chrome

Hướng dẫn tác nhân quản lý vòng đời của tiện ích trong khi phát triển và sửa lỗi.

Lưu ý: Các bước thực thi của tác nhân là ví dụ về hành vi tiềm ẩn. Tác nhân của bạn có thể hành động khác.

Nhanh chóng lặp lại và tải lại tiện ích

Việc tải lại tiện ích theo cách thủ công sau mỗi lần thay đổi tệp sẽ làm chậm quá trình phát triển. Hướng dẫn tác nhân của bạn áp dụng bản sửa lỗi mã và tải lại tiện ích ngay lập tức để xác minh hành vi mới mà không cần can thiệp thủ công.

Câu lệnh mẫu:

Bạn có thể sử dụng phương pháp chung:

Verify the extension has access to the active tab.

Hoặc bạn có thể mô tả chi tiết hơn:

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.

Ví dụ về việc thực thi tác nhân: Tác nhân của bạn chỉnh sửa tệp manifest.json trên hệ thống tệp của bạn. Sau đó, công cụ này sẽ gọi công cụ reload_extension bằng mã nhận dạng được cung cấp. Cuối cùng, nó sẽ gọi công cụ trigger_extension_action để kích hoạt tiện ích và xác minh rằng không có lỗi nào về quyền xuất hiện trong bảng điều khiển.

Kiểm tra hành động mặc định của tiện ích trên trang mục tiêu

Bạn thường cần kiểm thử cách một tập lệnh nội dung hoặc hành động của tiện ích tương tác với một trang web cụ thể. Tự động hoá quy trình này bằng cách hướng dẫn tác nhân chuyển đến trang web, cài đặt tiện ích và kích hoạt tiện ích đó.

Câu lệnh mẫu:

Bạn có thể sử dụng phương pháp chung:

Test my extension on example.com and verify it works correctly.

Hoặc bạn có thể cung cấp thông tin chi tiết hơn:

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.

Ví dụ về việc thực thi tác nhân: Tác nhân của bạn chuyển đến URL đích bằng cách sử dụng navigate_page. Sau đó, nó sẽ dùng install_extension với đường dẫn tuyệt đối được cung cấp. Sau khi tiện ích được tải, tiện ích sẽ thực thi trigger_extension_action để mô phỏng một lượt nhấp của người dùng. Cuối cùng, tiện ích này sử dụng list_console_messages để xác nhận rằng tập lệnh nội dung đã chạy và tạo ra kết quả như mong đợi.

Xác minh các tiện ích đã cài đặt và dọn dẹp

Trong quá trình kiểm thử tự động, bạn có thể cần xác minh xem một tiện ích có được tải đúng phiên bản hay không hoặc xoá tiện ích đó để đảm bảo trạng thái sạch cho lần kiểm thử tiếp theo.

Câu lệnh mẫu:

Uninstall 'My Test Extension' from the browser.

Ví dụ về cách thực thi tác nhân: Tác nhân của bạn sử dụng công cụ list_extensions để truy xuất danh sách các tiện ích đã cài đặt và siêu dữ liệu của các tiện ích đó. Lệnh này phân tích cú pháp đầu ra để xác định mã nhận dạng được liên kết với "Tiện ích kiểm thử của tôi". Sau đó, tiện ích này sẽ sử dụng công cụ uninstall_extension cùng với mã nhận dạng đó để xoá cookie khỏi trình duyệt một cách an toàn.

Tạo một tiện ích mới và thử nghiệm tiện ích đó

Để bắt đầu một tiện ích Chrome mới từ đầu, bạn thường phải tạo các tệp nguyên mẫu và tải thư mục đã giải nén vào trình duyệt theo cách thủ công để kiểm thử. Bỏ qua bước thiết lập thủ công này bằng cách hướng dẫn tác nhân tạo mã ban đầu, tải tiện ích và xác minh chức năng cơ bản của tiện ích từ đầu đến cuối trong một bước duy nhất.

Câu lệnh mẫu:

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.

Ví dụ về việc thực thi tác nhân: Tác nhân của bạn tạo một manifest.json Manifest V3 cơ bản và một trình chạy dịch vụ nền để lắng nghe sự kiện chrome.action.onClicked. Sau đó, ứng dụng sẽ chuyển đến trang kiểm thử, gọi install_extension và sử dụng trigger_extension_action để mô phỏng một lượt nhấp của người dùng. Cuối cùng, công cụ này sẽ kiểm tra DOM hoặc chụp ảnh màn hình để xác nhận rằng nền đã chuyển sang màu xám, chứng minh rằng mã nguyên mẫu đang hoạt động.