0

Cho AI agent điều khiển Chrome đang đăng nhập của bạn qua MCP: hướng dẫn cài đặt FSB với Cursor và Cline

Mình là tác giả của FSB, một dự án mã nguồn mở (MIT) gồm extension Chrome và MCP server. Bài này hướng dẫn cài đặt từng bước, giải thích cách nó hoạt động và nói thẳng những chỗ còn hạn chế.

Vấn đề

Cursor hay Claude Code viết code rất ổn, nhưng khi cần mở trang quản trị, lọc issue hay điền form thì phải tự làm tay. Có hai cách quen thuộc:

  1. Chạy trình duyệt headless bằng Playwright hoặc Puppeteer. Sạch sẽ nhưng chưa đăng nhập gì cả, gặp SSO, 2FA hay captcha là tắc.
  2. Chụp màn hình rồi để model click theo tọa độ. Dùng được ở mọi trang nhưng chậm, tốn token, và model chỉ thấy pixel, không biết nút nào đang disabled hay input có name gì.

FSB đi hướng khác: dùng chính Chrome bạn đang đăng nhập và gửi cho model cấu trúc DOM thay vì ảnh.

Kiến trúc

  • Extension Chrome (MV3) chạy trong profile bình thường của bạn.
  • MCP server fsb-mcp-server (npm, transport stdio) nói chuyện với extension qua WebSocket nội bộ ws://localhost:7225.
  • Client MCP (Cursor, Claude Code, Cline, VS Code) thấy khoảng 70 tool như navigate, read_page, click, list_tabs.

Không cần API key, phần suy luận do model của client đảm nhận.

Bước 1: Cài MCP server

Yêu cầu Node.js 18.20 trở lên và Chrome (Edge, Brave, Chromium cũng được).

# Cursor
npx -y fsb-mcp-server@latest install --cursor

# Cline
npx -y fsb-mcp-server@latest install --cline

# Chỉ xem trước nội dung sẽ ghi
npx -y fsb-mcp-server@latest install --cursor --dry-run

Nếu muốn tự sửa file cấu hình, thêm đoạn sau vào mcpServers:

{
  "mcpServers": {
    "fsb": {
      "command": "npx",
      "args": ["-y", "fsb-mcp-server@latest"]
    }
  }
}

Với Cline, file nằm ở cline_mcp_settings.json (bản VS Code: trong globalStorage/saoudrizwan.claude-dev/settings/; bản CLI: ~/.cline/data/settings/).

Bước 2: Cài extension

Cài FSB từ Chrome Web Store: https://chromewebstore.google.com/detail/badgafnfchcihdfnjneklogedcdkmjfk và giữ ít nhất một cửa sổ Chrome thường đang mở. Extension tự kết nối tới bridge.

Bước 3: Kiểm tra

npx -y fsb-mcp-server@latest doctor

Thấy Ext: yes là extension đã kết nối. Trong client, server fsb hiện trạng thái connected cùng danh sách tool. Nếu gặp ORIGIN_PIN_MISMATCH, chạy npx -y fsb-mcp-server@latest pair --reset rồi tắt hẳn và mở lại trình duyệt.

Nếu doctor báo lỗi Configuration kiểu "no model provider", đừng lo: lỗi này chỉ ảnh hưởng chế độ autopilot run_task, các tool MCP vẫn chạy bình thường.

Thử một tác vụ

Trong Cursor, gõ:

Mở danh sách issue đang mở được assign cho mình trên GitHub, đếm số lượng theo từng label.

Agent sẽ gọi list_tabs, navigate, read_page trên phiên đã đăng nhập, không dừng ở màn hình login. Kết quả lấy từ DOM nên ít bị đọc nhầm tiêu đề hay con số.

Mấy điểm thiết kế đáng chú ý

  • Mật khẩu không đi qua model. Credential nằm trong kho mã hóa, model chỉ yêu cầu "điền thông tin đăng nhập cho trang này", extension tự điền.
  • Session replay. Mỗi lần chạy được ghi lại, xem lại từng bước khi có lỗi.
  • Nhiều client cùng lúc. Server đầu tiên giữ cổng 7225, các server sau vào làm relay.

Hạn chế hiện tại

  • Mỗi lần chỉ một profile Chrome kết nối được.
  • Lệnh đầu tiên ngay sau khi kết nối có thể báo extension chưa gắn; đợi khoảng 4 giây là chạy.
  • Agent thao tác trên trình duyệt thật với phiên đăng nhập thật, nên hãy theo dõi khi dùng với trang nhạy cảm.

Mã nguồn

https://github.com/fullselfbrowsing/FSB

Mình rất muốn nghe góp ý về cách trình bày DOM cho model, hoặc trường hợp nào bạn thấy nó chạy sai.


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí