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 (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, để 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ả có chất lượng cao, bạn cần cung cấp cho chúng 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 lập trình tác nhân đượ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 hơn của chúng tôi, Hướng dẫn về web hiện đại, 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.

Tuy nhiên, 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 các trợ lý viết mã dựa trên 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

Modern Web Guidance

Để sử dụng gói kỹ năng này, 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

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 cả 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

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 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

1. Tải Antigravity IDE xuống (Bạn không nên dùng Antigravity vì ứng dụng 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 Settings (Cài đặt) > Customization (Tuỳ chỉnh), nhấp vào nút Add MCP server (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. Xin 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 2 thông 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 các API AI tích hợp 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 của Chrome Hello World. Kiểm thử bằng Chrome DevTools". Khi tác nhân bắt đầu kiểm thử tiện ích trong trình duyệt, Chrome sẽ cho bạn thấy một hộp thoại yêu cầu 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 hiện đ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

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: Tính năng này 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 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.

Modern Web Guidance cũng bao gồm các kỹ năng bao hàm mọi thứ bạn cần để mang đến 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à các 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 bảo mật và các chiến lược dự phòng phù hợp.

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 viết mã 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 trực tuyến Chrome, thì tác nhân sẽ nhận ra rằng tiện ích đó cần có quyền sidePanel. Sau đó, tác nhân sẽ tạo một tệp CHROMEWEBSTORE.md kèm theo lý do. Khi bạn đã 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 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 tính ổn định của tiện ích mà bạn 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 thao tá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.

• Lần đầu xuất bản: 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 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 lý do cụ thể cho từng quyền được yêu cầu trong manifest.json của bạn.

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 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.