Tạo tiện ích bằng các tác nhân lập trình

Giờ đây, các tác nhân lập trình AI như Antigravity có thể tạo mã tiện ích với độ chính xác ấn tượng. Tuy nhiên, để thực sự khai thác tiềm năng của các mô hình này và đảm bảo kết quả chất lượng cao, bạn cần cung cấp cho chúng bối 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 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 tiện ích tốt hơn nhanh 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, Modern Web Guidance, 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 xây dựng tiện ích chỉ là bước đầu tiên. Để giúp bạn xác minh rằng mã hoạt động như mong đợi, Chrome DevTools cho tác nhân cho phép trợ giúp lập trình AI gỡ lỗi tiện ích ngay trong Chrome và hưởng lợi từ 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

Modern Web Guidance

Để sử dụng gói kỹ năng, hãy cài đặt Modern Web Guidance 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

Bạn nên cài đặt hầu hết các tác nhân lập trình (bao gồm cả Gemini CLI, Claude Code và Codex) thông qua modern-web-guidance CLI do nhóm Chrome xây dựng. Việc cài đặt các kỹ năng thông qua modern-web-guidance CLI sẽ tự động cập nhật các kỹ năng.

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

Thao tác này sẽ 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 lập trình của bạn rồi 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ợ Modern Web Guidance (bao gồm kỹ năng tiện ích) hoặc có thể thêm trình bổ trợ này thông qua phần Customizations (Tuỳ chỉnh) > Build With Google Plugins (Xây dựng bằng trình bổ trợ của Google) > Modern Web Guidance.

Chrome DevTools cho 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 lập trình mà bạn chọn dưới dạng 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

1. Tải Antigravity IDE xuống (Bạn không nên dùng Antigravity vì công cụ này không cho phép bạn chỉnh sửa cấu hình máy chủ MCP theo cách thủ công).

2. Khi khởi động hoặc trong phần Cài đặt > Tuỳ chỉnh, trong mục Xây dựng bằng Google, hãy bật Chrome DevTools. Thao tác này sẽ chỉ cài đặt kỹ năng Chrome DevTools chứ không cài đặt máy chủ MCP.

   

3. Để thêm máy chủ MCP của Chrome DevTools, hãy chuyển đến phần Cài đặt > Tuỳ chỉnh, nhấp vào nút Thêm máy chủ MCP rồi tìm Chrome DevTools.

   

   

   

4. Nhấp vào Open MCP Config (Mở cấu hình MCP) để mở cấu hình máy chủ MCP. Lưu ý rằng bạn phải đóng phần cài đặt để xem tệp cấu hình trong IDE.

   

5. Thêm hai tham số cấu hình sau: --categoryExtensions (để bật các công cụ tiện ích) và --autoConnect (để bật tính năng kết nối với một Hồ sơ Chrome hiện có, đây là yêu cầu bắt buộc khi sử dụng API AI tích hợp sẵn của Chrome hoặc yêu cầu đăng nhập).

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

6. Để bật tính năng gỡ lỗi từ xa, hãy mở Chrome, chuyển đến chrome://inspect/#remote-debugging rồi chọn Cho phép gỡ lỗi từ xa cho phiên bản trình duyệt này.

   

7. Khởi động lại Antigravity IDE.

8. Tạo một không gian làm việc mới và tạo một câu lệnh thử nghiệm: "Tạo một tiện ích Chrome Hello World. Kiểm thử bằng Chrome DevTools. Khi nhân viên hỗ trợ bắt đầu kiểm thử tiện ích trong trình duyệt, Chrome sẽ hiện một hộp thoại yêu cầu cấp quyền gỡ lỗi từ xa. Chọn Cho phép. Khi phiên gỡ lỗi từ xa được bật, Chrome sẽ hiển thị biểu ngữ "Chrome đang được phần mềm kiểm tra tự động kiểm soát".

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

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

Tác nhân 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 GitHub MCP của Chrome DevTools.

Chỉ dẫn cho tác nhân 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 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 yêu cầu cấp quyền 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 tiện ích này" hoặc "Chuẩn bị tiện ích này cho cửa hàng". Tuy nhiên, để đơn giản hoá quy trình làm việc của 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.

Xây dựng 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 Modern Web Guidance giúp các tác nhân theo 3 cách chính:

• Kiến thức mới nhất về API: Công cụ này cung cấp cho tác nhân thông tin về các API mới nhất, có thể đã được phát hành sau khi mô hình bạn đang sử dụng được huấn luyện.
• Các phương pháp hay nhất: Đảm bảo các tác nhân có thể tiếp cận 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 nhiều năm xây dựng tiện ích của Chrome.
• Mức độ sẵn sàng gửi: Công cụ này theo dõi thông tin bạn có thể cần để gửi tiện ích của mình đế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.

Modern Web Guidance cũng bao gồm các kỹ năng liên quan đến mọi yếu tố bạn cần để mang lại trải nghiệm người dùng xuất sắc, chẳng hạn như hiệu suất, khả năng hỗ trợ tiếp cận và các API hiện đại. Ví dụ: các kỹ năng API AI tích hợp sẵn đả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 API mới nhất cùng với thông tin bổ sung về các quy tắc kiến trúc rõ ràng và các quy tắc ràng buộc về phần cứng khi sử dụng các API này, để cho phép quản lý hiệu quả các lượt tải xuống mô hình, tập trung vào 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 yêu cầu cấp quyền trong mã. Ví dụ: nếu bạn yêu cầu tác nhân lập trình xây dựng 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 đó, hệ thống 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 lại 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 tác nhân cho phép trợ giúp lập trình AI cài đặt và gỡ lỗi 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ả tiện ích đã cài đặt và tải lại các tiện ích đó.
• Kích hoạt các thao tác của tiện ích.
• Kiểm tra mọi nền tảng 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 tính năng này 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 nên tạo một tệp Manifest V3 và yêu cầu quyền storage vì tác nhân biết rằng cần phải lưu trữ dữ liệu. Giờ đây, tác nhân có thể tạo một tiện ích, cài đặt, xem tiện ích đó chạy và xác minh độ ổn định của tiện ích mà không cần bạ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.

Câu lệnh mẫu để đơ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 cho tác nhân sẽ giúp bạn hoàn thành hầu hết 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 của bạn. Sau đây là hướng dẫn nhanh về cách yêu cầu 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 về 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 quyền và lý do: Cửa hàng Chrome trực tuyến thực thi chính sách về mục đích duy nhất và yêu cầu bạn đưa ra lý do chi tiết cho mọi yêu cầu cấp quyền trong tệp 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ị từ chối trên cửa hàng: Nếu tiện ích của bạn bị từ chối hoặc bị gắn cờ trong quá trình xem xét, bạn có thể cung cấp lý do từ chối trực tiếp 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ủ.

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 của Modern Web Guidance với Chrome DevTools cho tác nhân không chỉ giúp bạn xây dựng các tính năng chất lượng cao nhanh hơn mà còn đảm bảo tiện ích của bạn hoạt động ổ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 các công cụ này trong dự án tiếp theo để xem cách chúng có thể đơn giản hoá quy trình phát triển tiện ích của bạn, từ nguyên mẫu ban đầu đến khi xuất bản.