Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Dev Browser — Tự động hoá trình duyệt giữ trạng thái

Kỹ năng tự động hoá trình duyệt bằng các script nhỏ, giữ nguyên trạng thái trang để điều hướng, điền form, chụp ảnh và thu thập dữ liệu web.

Lập trìnhTrung cấp★ 67,531⑂ 5,507Điểm AI 10/10Cập nhật lần cuối: 9 thg 8, 2026

Làm được gì

  • Khởi chạy một server trình duyệt dựa trên Playwright, tạo các trang có tên ("login", "checkout") tồn tại xuyên suốt nhiều lần chạy script.
  • Hướng dẫn quy trình vòng lặp: viết script nhỏ → chạy → đọc kết quả → quyết định bước tiếp theo, thay vì một script khổng lồ.
  • Khi không biết cấu trúc trang, dùng getAISnapshot() để lấy cây accessibility dạng YAML rồi tương tác qua tham chiếu [ref=e5].
  • Hỗ trợ chụp ảnh (kể cả full page), hàm chờ tải trang, mẫu debug sau khi lỗi và hướng dẫn scrape lớn bằng cách bắt/replay request mạng.
  • Hai chế độ: mở Chromium mới, hoặc gắn extension vào Chrome người dùng đang đăng nhập sẵn.

Phù hợp với ai

  • Người cần tự động hoá công việc web lặp lại: tải báo cáo, gửi form, kiểm tra giá/tồn kho.
  • Lập trình viên muốn click-test ứng dụng web đang phát triển và xem ảnh chụp thực tế.
  • Nhân sự data/marketing cần lấy dữ liệu từ site yêu cầu đăng nhập.

Ví dụ sử dụng

  1. "Mở URL này, điền form đăng nhập rồi chụp ảnh dashboard" → tạo trang login, submit, lưu tmp/screenshot.png.
  2. "Tôi không rõ layout, hãy bấm link 'new'" → xem snapshot rồi selectSnapshotRef("...", "e2") để click.
  3. "Thu thập 5.000 sản phẩm" → bắt request API nội bộ, hiểu schema và replay phân trang thay vì cuộn DOM.

· · · 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/code-yeongyu/oh-my-openagent/HEAD/packages/omo-opencode/src/features/builtin-skills/dev-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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
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 packages/omo-opencode/src/features/builtin-skills/dev-browser từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/dev-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/code-yeongyu/oh-my-openagent.git /tmp/omo && mkdir -p ~/.claude/skills && cp -r /tmp/omo/packages/omo-opencode/src/features/builtin-skills/dev-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.

  1. Kiểm tra Node.js (LTS) và npm: node -v
  2. Clone repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. Copy thư mục skill: mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/dev-browser ~/.claude/skills/
  4. Cài phụ thuộc: cd ~/.claude/skills/dev-browser && npm i (nếu cần: npx playwright install chromium)
  5. Đọc references/installation.md kèm theo để biết cấu hình riêng cho từng hệ điều hành (đặc biệt Windows).
  6. Chạy chế độ mặc định: ./server.sh & và chờ dòng Ready xuất hiện.
  7. Khởi động lại Claude Code, thử yêu cầu: "mở example.com và cho tôi tiêu đề trang".
  8. Muốn dùng Chrome đang đăng nhập: chạy npm run start-extension & rồi mở extension (tải ở trang releases) để kết nối.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION