Giờ đây, các tác nhân lập trình AI (chẳng hạn như Antigravity) có thể tạo mã tiện ích với độ chính xác ấn tượng. Tuy nhiên, để khai thác tối đa tiềm năng và đảm bảo kết quả có chất lượng cao, bạn cần cung cấp cho các mô hình này ngữ cảnh và công cụ phù hợp.
Hướng dẫn này giải thích cách thiết lập các công cụ phù hợp trong các tác nhân lập trình và cách các công cụ này có thể giúp bạn xây dựng các tiện ích tốt hơn một cách nhanh chóng hơn.
Chúng tôi đã tạo một kỹ năng cho các tác nhân lập trình được thiết kế riêng cho việc phát triển tiện ích. Kỹ năng này là một phần trong sáng kiến rộng lớn hơn của chúng tôi, Hướng dẫn về web hiện đại. Sáng kiến này cung cấp cho các tác nhân lập trình AI kiến thức chuyên môn về nền tảng web, các phương pháp hay nhất và các mẫu API hiện đại.
Nhưng việc tạo tiện ích chỉ là bước đầu tiên. Để giúp bạn xác minh rằng mã của bạn hoạt động như mong đợi, Chrome DevTools cho các tác nhân cho phép trợ lý lập trình AI gỡ lỗi tiện ích ngay trong Chrome và tận dụng các chức năng gỡ lỗi cũng như thông tin chi tiết về hiệu suất của DevTools.
Thiết lập
Hướng dẫn về web hiện đại
Để sử dụng gói kỹ năng này, hãy cài đặt Hướng dẫn về web hiện đại vào môi trường bạn muốn và thêm kỹ năng tiện ích vào đó. Sau đây là hướng dẫn cho một số công cụ phổ biến.
CLI
Cách cài đặt được đề xuất cho hầu hết các tác nhân lập trình (bao gồm Gemini CLI, Claude Code và Codex) là thông qua modern-web-guidance CLI do nhóm Chrome tạo. Việc cài đặt các kỹ năng thông qua giao diện dòng lệnh (CLI) modern-web-guidance sẽ tự động cập nhật các kỹ năng.
npx modern-web-guidance@latest install --choose
Lệnh này chạy một trình hướng dẫn tương tác để cài đặt các kỹ năng theo lựa chọn ưu tiên của bạn. Khi thấy các lựa chọn, hãy chọn(các) tác nhân mã hoá của bạn và chọn cả chrome-extensions và modern-web-guidance.
Antigravity
Khi cài đặt Antigravity, bạn có thể chọn trình bổ trợ Hướng dẫn về web hiện đại (bao gồm cả kỹ năng về tiện ích) hoặc thêm trình bổ trợ này thông qua Tuỳ chỉnh > Tạo bằng trình bổ trợ của Google > Hướng dẫn về web hiện đại.
Chrome DevTools cho các tác nhân lập trình
Bạn có thể thêm Chrome DevTools cho tác nhân vào tác nhân mã hoá mà bạn chọn dưới dạng một trình bổ trợ, tiện ích hoặc máy chủ MCP.
Sau đây là hướng dẫn cho một số tác nhân phổ biến nhất.
Antigravity
Để sử dụng máy chủ MCP của Chrome DevTools, hãy làm theo hướng dẫn trong tài liệu của Antigravity để cài đặt một máy chủ MCP tuỳ chỉnh. Thêm nội dung sau vào cấu hình máy chủ MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
Nhân viên hỗ trợ khác
Để biết hướng dẫn về cách thiết lập các tác nhân khác, hãy xem tài liệu trên Chrome DevTools MCP GitHub.
Hướng dẫn cho nhân viên hỗ trợ CHROMEWEBSTORE.md
Một phần quan trọng trong việc xuất bản tiện ích là điền thông tin vào Trang tổng quan dành cho nhà phát triển. Kỹ năng này giải quyết vấn đề này bằng cách yêu cầu tác nhân lập trình của bạn tạo và duy trì một tệp CHROMEWEBSTORE.md để theo dõi thông tin cần thiết, bao gồm cả lý do cho từng quyền được yêu cầu trong mã.
Kỹ năng này sẽ được kích hoạt khi bạn sử dụng các cụm từ như "Hãy xuất bản nội dung này" hoặc "Chuẩn bị tiện ích này cho cửa hàng", nhưng để đơn giản hoá quy trình làm việc dựa trên tác nhân, hãy thêm nội dung sau vào hướng dẫn hệ thống của tác nhân (ví dụ: ~/.gemini/GEMINI.md cho Antigravity hoặc ~/.claude/CLAUDE.md cho 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.
Tạo và kiểm thử tiện ích bằng các tác nhân lập trình
Kỹ năng tiện ích có trong Hướng dẫn về web hiện đại giúp các trợ lý ảo theo 3 cách chính:
- Kiến thức mới nhất về API: Nó cung cấp cho các trợ lý ảo thông tin về những API mới nhất, có thể được phát hành sau khi mô hình mà bạn đang sử dụng được huấn luyện.
- Các phương pháp hay nhất: Điều này đảm bảo các tác nhân có quyền truy cập vào tất cả các phương pháp hay nhất mà nhóm của chúng tôi đã học được trong những năm qua khi xây dựng các tiện ích Chrome.
- Chuẩn bị gửi: Công cụ này theo dõi thông tin mà bạn có thể cần để gửi tiện ích của mình lên Cửa hàng Chrome trực tuyến, giúp việc phân phối trở nên dễ dàng hơn.
Hướng dẫn về web hiện đại cũng bao gồm các kỹ năng bao hàm mọi thứ bạn cần để mang lại trải nghiệm người dùng tuyệt vời, chẳng hạn như hiệu suất, khả năng tiếp cận và các API hiện đại. Ví dụ: các kỹ năng API AI tích hợp đảm bảo rằng các tác nhân lập trình AI luôn sử dụng phiên bản mới nhất của API cùng với thông tin bổ sung về các quy tắc kiến trúc rõ ràng và những hạn chế về phần cứng khi sử dụng các API này, để cho phép quản lý hiệu quả việc tải mô hình xuống, tập trung vào tính bảo mật và các chiến lược dự phòng linh hoạt.
Kỹ năng này cũng giúp tác nhân theo dõi thông tin cần thiết để xuất bản, bao gồm cả lý do cho từng quyền được yêu cầu trong mã. Ví dụ: nếu bạn yêu cầu tác nhân lập trình tạo một tiện ích bằng Side Panel API và xuất bản tiện ích đó lên Cửa hàng Chrome trực tuyến, thì tác nhân sẽ nhận ra rằng tiện ích đó cần có quyền sidePanel. Sau đó, tệp này sẽ tạo một tệp CHROMEWEBSTORE.md kèm theo lý do. Khi đã sẵn sàng gửi, bạn có thể xem xét lý do này, điều chỉnh nếu cần và sao chép trực tiếp vào Trang tổng quan dành cho nhà phát triển.
Chrome DevTools cho các tác nhân cho phép trợ lý lập trình AI cài đặt và gỡ lỗi các tiện ích trong một phiên bản Chrome đang chạy, cụ thể là:
- Cài đặt và gỡ cài đặt tiện ích.
- Liệt kê tất cả các tiện ích đã cài đặt và tải lại chúng.
- Kích hoạt các thao tác với tiện ích.
- Kiểm tra mọi thành phần của tiện ích (cửa sổ bật lên, bảng điều khiển bên, trình chạy dịch vụ).
Sau đây là một câu lệnh và video minh hoạ cách hoạt động của câu lệnh đó trong thực tế:
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
Trong trường hợp này, tác nhân sẽ tạo một tệp Manifest V3 và yêu cầu quyền storage vì biết rằng cần duy trì dữ liệu. Giờ đây, tác nhân phần mềm có thể tạo một tiện ích, cài đặt tiện ích đó, xem tiện ích chạy và xác minh độ ổn định của tiện ích mà không cần rời khỏi giao diện trò chuyện.
Đây là một ví dụ đơn giản về câu lệnh. Để tìm hiểu thêm về các kỹ thuật thiết kế câu lệnh khác nhau và tìm ra kỹ thuật phù hợp nhất với trường hợp sử dụng của bạn, hãy xem hướng dẫn của chúng tôi về Thiết kế câu lệnh.
Ví dụ về câu lệnh để đơn giản hoá quy trình phân phối bằng CHROMEWEBSTORE.md
Mặc dù việc cài đặt kỹ năng tiện ích và thêm hướng dẫn vào tác nhân sẽ giúp bạn thực hiện hầu hết các công việc, nhưng việc đưa ra câu lệnh cụ thể có thể mang lại kết quả tốt hơn cho giai đoạn phát triển mà bạn đang thực hiện. Sau đây là hướng dẫn nhanh về cách nhắc tác nhân tạo, cập nhật và duy trì tệp CHROMEWEBSTORE.md.
- Xuất bản lần đầu: Khi tiện ích của bạn đã hoàn thiện các tính năng và bạn muốn tạo sự hiện diện ban đầu trên cửa hàng.
Prepare the extension for publication on the Chrome Web Store.
- Cập nhật các quyền và lý do: Cửa hàng Chrome trực tuyến thực thi chính sách về một mục đích và yêu cầu bạn đưa ra lý do cụ thể cho từng quyền được yêu cầu trong
manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- Xử lý trường hợp bị cửa hàng từ chối: Nếu tiện ích của bạn bị từ chối hoặc bị gắn cờ trong quy trình xem xét, bạn có thể cung cấp trực tiếp lý do từ chối cho tác nhân và yêu cầu tác nhân cập nhật siêu dữ liệu tuân thủ của bạn.
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.
Kết luận
Việc kết hợp các kỹ năng Hướng dẫn về web hiện đại với Chrome DevTools cho các tác nhân phần mềm giúp bạn xây dựng các tính năng chất lượng cao nhanh hơn, đồng thời đảm bảo tiện ích của bạn ổn định và sẵn sàng gửi đến Cửa hàng Chrome trực tuyến.
Hãy bắt đầu thử nghiệm những công cụ này trong dự án tiếp theo để xem chúng có thể giúp bạn đơn giản hoá quy trình phát triển tiện ích từ nguyên mẫu ban đầu đến khi xuất bản như thế nào.