VI EN
Claude Code

Claude Code + Chrome: để agent tự mở trình duyệt, đọc console và test UI

Binh 3 phút đọc Read this article in English

Tóm tắt

Với claude --chrome, Claude tự mở tab, click, đọc console và DOM rồi sửa code trong cùng phiên, dùng luôn trạng thái đăng nhập của bạn. Giới hạn quyền theo site và chỉ bật khi cần để đỡ tốn context.

Quy trình sửa giao diện quen thuộc: Claude sửa code, bạn mở trình duyệt, F12, chép lỗi console, dán lại cho Claude, lặp lại. Bạn trở thành "người chuyển tin" giữa agent và trình duyệt. Claude Code with Chrome cắt bỏ khâu đó: qua extension Claude in Chrome, Claude tự mở tab, click, điền form, đọc console và DOM, rồi quay lại sửa code trong cùng một phiên. Trình duyệt chạy hiển thị thật, dùng luôn trạng thái đăng nhập của bạn.

Làm được gì?

ViệcVí dụ prompt
Debug bằng console"Mở trang dashboard, xem console có lỗi gì khi tải trang"
Test luồng người dùng"Mở localhost:3000, submit form đăng nhập với dữ liệu sai, kiểm tra thông báo lỗi"
So với thiết kế"Dựng trang theo mockup rồi mở trình duyệt đối chiếu"
Web app đã đăng nhập"Viết bản cập nhật dự án từ commit gần đây vào Google Doc này"
Trích dữ liệu"Lấy tên, giá, tình trạng từng sản phẩm, lưu thành CSV"
Ghi lại thao tác"Quay GIF luồng checkout từ thêm giỏ hàng đến trang xác nhận"

Cài đặt trong 3 bước

  1. Cài extension Claude in Chrome (bản 1.0.36 trở lên) từ Chrome Web Store. Chạy được trên Chrome, Edge và các trình duyệt Chromium như Brave, Arc.
  2. Khởi động: claude --chrome. Lần đầu có hộp thoại giới thiệu cách cấp quyền theo site.
  3. Gõ /chrome để xem trạng thái ("Status: Enabled", "Extension: Installed"), kết nối lại hoặc bật Enabled by default.

Yêu cầu: gói trả phí trực tiếp của Anthropic (Pro, Max, Team, Enterprise), đăng nhập bằng /login. Dùng API key, token dài hạn, hay qua Bedrock/Vertex/Foundry thì không có tính năng này. Chưa hỗ trợ WSL.

Quyền và an toàn

  • Quyền theo site quản lý trong extension. Mỗi hành động có thể hỏi "Claude in Chrome wants to…", kèm tuỳ chọn cho phép mọi thao tác trên site đó trong phiên.
  • Gặp trang đăng nhập hoặc CAPTCHA, Claude dừng và nhờ bạn tự xử lý.
  • Repo không tự bật được Chrome: nếu .claude/settings.json của dự án cố bật biến CLAUDE_CODE_ENABLE_CFC, Claude Code bỏ qua. Một repo bạn clone về không được phép kết nối Claude vào trình duyệt của bạn.
  • Không upload file nhạy cảm: Claude từ chối upload file như .env, .pem, .key hay thư mục .ssh; mỗi lần upload tối đa 10 MB.

Rủi ro cần nhớ

  • Claude dùng phiên đăng nhập thật của bạn: Gmail, ngân hàng, trang quản trị. Nội dung trên web có thể chứa prompt injection. Giới hạn quyền site chỉ ở các trang cần thiết.
  • GIF và ảnh chụp ghi lại mọi thứ hiển thị, kể cả thông tin tài khoản. Xem lại trước khi chia sẻ.
  • Tốn context: bật "Enabled by default" khiến định nghĩa tool trình duyệt luôn nằm trong context. Chỉ bật khi cần bằng --chrome.
  • Hộp thoại alert/confirm chặn sự kiện của trình duyệt; phải tự đóng rồi bảo Claude tiếp tục.

Chrome, Playwright MCP hay browser-use?

Chrome integration hợp khi cần trình duyệt thật của bạn và trạng thái đăng nhập sẵn có, ngay trong phiên code. Playwright MCP hợp khi cần trình duyệt sạch, lặp lại được cho test tự động. browser-use hợp khi xây agent riêng trong ứng dụng.

Áp dụng thế nào?

  • Dev frontend: Thêm vào prompt sửa UI câu "mở localhost, kiểm tra console và chụp màn hình sau khi sửa" để Claude tự kiểm chứng.
  • Tech Lead: Dùng profile Chrome riêng cho Claude, không đăng nhập tài khoản quản trị production.
  • PM/QA: Mô tả luồng người dùng bằng lời và để Claude chạy thử, ghi GIF làm bằng chứng cho bug report.

Nguồn & tham khảo

  1. Use Claude Code with Chrome — Claude Code Docs
Thêm bài về Claude Code