Hướng dẫn tự động hóa trình duyệt agent-browser
Skill giúp Claude điều khiển trình duyệt thật qua CLI agent-browser bằng snapshot cây trợ năng và tham chiếu ngắn @eN để click, điền form, trích dữ liệu và chụp ảnh.
Tự động hóaTrung cấp★ 1,161⑂ 109Điểm AI 10/10Cập nhật lần cuối: 29 thg 9, 2026
Làm được gì
- Dạy Claude vòng lặp chuẩn:
open→snapshot -i→ hành động theo@eN→ snapshot lại sau mỗi thay đổi trang. - Thao tác trang bằng tham chiếu ngắn từ cây trợ năng thay vì đọc HTML thô, tiết kiệm rất nhiều token.
- Bao trùm đọc trang (
read,get text), click/hover/fill/type/select/upload/drag, chụp ảnh (kể cả full page và ảnh có chú thích), quản lý tab, iframe, hộp thoại. - Hướng dẫn đăng nhập an toàn (auth vault, plugin lấy credential), lưu và phục hồi phiên với
--restore, chạy nhiều trình duyệt song song bằng--session. - Có thêm mock/route network, ghi HAR, quay video workflow, kiểm tra trợ năng bằng axe-core, và bộ lệnh React (cây component, profile re-render, Web Vitals).
- Phần chiến lược
waitvà mục xử lý sự cố rất thực tế: ref hết hiệu lực, overlay chặn click, input không nhận ký tự, iframe khác origin, WebGPU đen màn.
Phù hợp với ai
- Dev và QA cần kiểm thử ứng dụng web lặp lại hoặc tìm lỗi giao diện.
- Người làm dữ liệu cần trích xuất thông tin từ trang yêu cầu đăng nhập.
- Frontend muốn tự động chụp ảnh màn hình sau mỗi thay đổi UI.
- Nhóm React muốn đo re-render và Web Vitals ngay trên trình duyệt.
Ví dụ sử dụng
- "Đăng nhập trang này rồi chụp ảnh dashboard" → snapshot tìm ref ô email/password, điền, click,
wait --url "**/dashboard", rồi screenshot. - "Xuất bảng giá thành JSON" → dùng
eval --stdinvới heredoc để quét các dòng bảng và trả về mảng đối tượng. - "Thử tính năng chat với hai người dùng cùng lúc" → dùng
--session avà--session bcho hai trình duyệt cookie tách biệt.
· · · Hướng dẫn cài đặt · · ·
Dùng thử ngay, không cần cài
Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.
Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình: https://raw.githubusercontent.com/fcakyon/claude-codex-settings/HEAD/plugins/agent-browser/skills/agent-browser/SKILL.md Mình muốn: (viết việc bạn cần ở đây)
Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.
↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên Claude Skill Mart. Copy thư mục plugins/agent-browser/skills/agent-browser từ repo GitHub fcakyon/claude-codex-settings vào ~/.claude/skills/fcakyon-agent-browser/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/fcakyon/claude-codex-settings.git /tmp/claude-codex-settings && mkdir -p ~/.claude/skills && cp -r /tmp/claude-codex-settings/plugins/agent-browser/skills/agent-browser ~/.claude/skills/⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Kiểm tra Node.js đã có:
node -v. - Cài CLI và tải trình duyệt:
npm i -g agent-browser && agent-browser install(trên Linux dùngagent-browser install --with-deps). - Clone repo skill:
git clone https://github.com/fcakyon/claude-codex-settings.git - Sao chép thư mục skill:
mkdir -p ~/.claude/skills && cp -r claude-codex-settings/plugins/agent-browser/skills/agent-browser ~/.claude/skills/ - Chạy
agent-browser doctorđể chắc chắn Chrome và daemon hoạt động (muốn quay video thì cài thêmffmpeg). - Mở lại Claude Code và thử yêu cầu: "mở example.com rồi chụp ảnh trang".
- Xong việc nhớ chạy
agent-browser closeđể đóng trình duyệt.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0