Hướng Dẫn Sử Dụng Công Cụ Trình Duyệt Cho Máy Chủ MCP

Bạn đã bao giờ tự hỏi làm thế nào để đưa tính năng tự động hóa trình duyệt được hỗ trợ bởi AI vào quy trình làm việc của mình chưa? Tôi tình cờ bắt gặp Browser tools mcp khi đang làm việc trong Cursor IDE, và nó đã làm tôi kinh ngạc! Công cụ tuyệt vời này cho phép bạn kết nối Cursor IDE với trình duyệt của mình, tự động hóa các tác vụ như điền biểu mẫu, cào dữ liệu và phát triển web front-end một cách dễ dàng. Trong hướng dẫn này, chúng ta sẽ cùng nhau thiết lập Browser tools mcp với Cursor IDE, khám phá cách khai thác sức mạnh của nó để tự động hóa web. Dù bạn đang gỡ lỗi hay xây dựng, đây là cơ hội để bạn nâng cao trình độ. Hãy cùng đi sâu vào thiết lập thú vị này!

Browser tools mcp là gì?

Browser tools mcp là một máy chủ Model Context Protocol (MCP) kết nối các mô hình AI với trình duyệt web của bạn, cho phép tự động hóa liền mạch. Được phát triển bởi AgentDeskAI, nó cho phép các công cụ như Cursor IDE (cũng như Windsurf, RooCode, Cline, và Claude Desktop, chỉ kể một vài) kiểm soát các hành động của trình duyệt—ví dụ: chụp ảnh màn hình, điều hướng trang, điền biểu mẫu hoặc cào dữ liệu. Được giới thiệu như một phần của hệ sinh thái MCP bởi Anthropic vào tháng 11 năm 2024, nó được thiết kế cho các tương tác an toàn, chuẩn hóa với các công cụ bên ngoài.

Với Browser tools mcp, Cursor IDE giờ đây có thể tự động hóa các tác vụ trình duyệt lặp đi lặp lại hoặc lấy dữ liệu web theo thời gian thực, giúp cuộc sống viết mã của bạn dễ dàng hơn. Hãy tưởng tượng yêu cầu Cursor IDE "cào tiêu đề" hoặc "điền biểu mẫu"—tất cả đều có thể! Hãy thiết lập nó và xem điều kỳ diệu diễn ra.

Thiết lập Môi trường của bạn cho Browser tools mcp

Hãy chuẩn bị hệ thống của bạn để sử dụng Browser tools mcp với Cursor IDE. Rất dễ dàng, vì vậy hãy bắt đầu ngay!

1. Kiểm tra các điều kiện tiên quyết:

• Node.js: Đảm bảo Node.js (phiên bản 16 trở lên) đã được cài đặt. Kiểm tra bằng lệnh node --version trong terminal của bạn, hoặc tải nó từ nodejs.org.
• Google Chrome hoặc Chromium: Bạn sẽ cần cài đặt một trình duyệt dựa trên Chromium cho tiện ích mở rộng.
• Cursor IDE: Chuẩn bị sẵn sàng Cursor IDE (tải xuống từ cursor.com nếu cần—phiên bản 0.45 trở lên được khuyến nghị).
• Kỹ năng cơ bản: Một chút quen thuộc với các lệnh terminal và tiện ích mở rộng của Chrome sẽ hữu ích.
• Phần cứng: CPU 4+ lõi, RAM 16GB+ và dung lượng lưu trữ trống 10GB+ sẽ giúp mọi thứ chạy mượt mà.

2. Tạo thư mục dự án:

• Mở terminal của bạn và thiết lập không gian làm việc:

mkdir browser-tools-mcp
cd browser-tools-mcp

• Đây sẽ là nơi làm việc chính của bạn cho Browser tools mcp.

Bạn đã sẵn sàng để cài đặt Browser tools mcp—hãy tiếp tục!

Cài đặt Browser tools mcp với Cursor IDE

Hãy cài đặt Browser tools mcp và kết nối nó với Cursor IDE. Đây là cách thực hiện từng bước.

Bước 1: Cài đặt Tiện ích mở rộng BrowserTools cho Chrome

Browser tools mcp dựa vào một tiện ích mở rộng của Chrome để thu thập dữ liệu trình duyệt như nhật ký console, yêu cầu mạng và các phần tử DOM.

1. Tải tiện ích mở rộng:

• Vì nó đang chờ phê duyệt trên Chrome Web Store, hãy lấy mã nguồn từ GitHub hoặc nhấp vào đây để tải tiện ích mở rộng:

git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

2. Tải tiện ích mở rộng chưa đóng gói:

• Mở Chrome và truy cập chrome://extensions/.

• Bật Chế độ nhà phát triển (chuyển đổi ở góc trên bên phải).

• Nhấp vào "Load unpacked" và chọn thư mục chrome-extension bên trong kho lưu trữ đã clone hoặc chọn thư mục bạn đã tải xuống trước đó.

• Xác nhận rằng "BrowserToolsMCP" xuất hiện trong danh sách tiện ích mở rộng của bạn—hãy ghim nó để dễ truy cập!

Bước 2: Thiết lập Máy chủ BrowserTools MCP trong Cursor

Bây giờ, hãy kết nối máy chủ MCP với Cursor IDE để giao tiếp với trình duyệt.

• Mở Cài đặt Cursor IDE (Ctrl+, hoặc Cmd+, trên Mac).

• Điều hướng đến Features → MCP Servers.
• Nhấp vào “Add new MCP server”.

• Điền thông tin chi tiết:
• Name: browser-tools (hoặc bất kỳ tên duy nhất nào bạn thích).
• Select: command.
• Paste the Command:

npx @agentdeskai/browser-tools-mcp@1.2.0

• Lưu ý: Trên Windows, nếu npx không được nhận dạng, hãy chạy lệnh where npx trong terminal của bạn để tìm đường dẫn (ví dụ: C:\Users\YourName\AppData\Roaming\npm\npx) và sử dụng nó một cách rõ ràng.
• Lưu cấu hình. Bạn sẽ thấy các công cụ được liệt kê với chỉ báo màu xanh lá cây bên cạnh “browser-tools.” Nếu nó không hiển thị, hãy làm mới Cursor IDE hoặc đợi vài giây.

Bước 3: Chạy Máy chủ BrowserTools (Tùy chọn nhưng được khuyến nghị)

Để có thêm các tính năng như chụp ảnh màn hình và nhật ký tổng hợp, hãy chạy máy chủ BrowserTools một cách riêng biệt:

• Trong terminal của bạn, chạy:

npx @agentdeskai/browser-tools-server@1.2.0

• Máy chủ này mặc định lắng nghe trên cổng 3025. Đảm bảo không có tiến trình nào khác đang sử dụng cổng này (kiểm tra bằng lệnh netstat -a -n | find "3025" trên Windows hoặc lsof -i :3025 trên Mac/Linux).
• Bước này tăng cường giao tiếp websocket cho tính năng chụp ảnh màn hình và chế độ kiểm tra—cực kỳ hữu ích!

Bước 4: Sử dụng Công cụ dành cho nhà phát triển của Chrome với BrowserTools MCP

Hãy tích hợp Browser tools mcp với DevTools của Chrome.

• Mở bất kỳ trang web nào trong Chrome (ví dụ: https://example.com).
• Nhấp chuột phải và chọn “Inspect” (Kiểm tra) để mở Chrome DevTools.
• Điều hướng đến bảng “BrowserTools” (được thêm bởi tiện ích mở rộng).

Từ đây, bạn có thể:

• Chụp ảnh màn hình thủ công (tự động dán vào Cursor IDE là tùy chọn).
• Đặt đường dẫn lưu ảnh màn hình (mặc định là Downloads/mcp-screenshots).
• Xóa nhật ký đã lưu.
• Điều chỉnh giới hạn ghi nhật ký và cài đặt cắt bớt.

Quan trọng: Nhật ký sẽ bị xóa mỗi khi bạn làm mới trang hoặc khởi động lại máy chủ MCP.

Bước 5: Xác minh mọi thứ đang hoạt động

Kiểm tra thiết lập trong Cursor IDE.

• Trong trò chuyện của Cursor IDE ("Ctrl" hoặc "Cmd" + L), thử các lệnh như “Capture console logs from the current page” (Thu thập nhật ký console từ trang hiện tại) hoặc “Take a screenshot of https://example.com.” (Chụp ảnh màn hình của https://example.com.)
• Kiểm tra xem nhật ký có xuất hiện trong trò chuyện hoặc terminal không, và xác nhận ảnh màn hình được lưu vào thư mục đã chỉ định.
• Nếu không có gì hiển thị, đảm bảo máy chủ MCP đang chạy và tiện ích mở rộng của Chrome đã được kết nối.

Bạn vừa thiết lập Browser tools mcp với Cursor IDE—làm tốt lắm!

Sử dụng Browser tools mcp để Tự động hóa Trình duyệt

Với Browser tools mcp đã được kết nối, hãy tự động hóa một số tác vụ trình duyệt trong Cursor IDE.

1. Kiểm tra Điều hướng Cơ bản:

• Trong trò chuyện của Cursor IDE, gõ: “Open the website ‘https://example.com’ in Chrome.” (Mở trang web ‘https://example.com’ trong Chrome.)
• Browser tools mcp sẽ khởi chạy Chrome (nếu chưa mở) và điều hướng đến trang web. Cursor IDE sẽ xác nhận: “I’ve opened https://example.com in Chrome.” (Tôi đã mở https://example.com trong Chrome.)
• Nếu thất bại, kiểm tra trạng thái của tiện ích mở rộng Chrome và máy chủ MCP.

2. Tự động hóa Điền Biểu mẫu:

• Thử: “Go to ‘https://example.com/contact’ and fill out the contact form with name ‘Alex Smith’, email ‘alex@example.com’, and message ‘Hello!’” (Truy cập ‘https://example.com/contact’ và điền vào biểu mẫu liên hệ với tên ‘Alex Smith’, email ‘alex@example.com’, và tin nhắn ‘Xin chào!’)
• Browser tools mcp sẽ điều hướng, định vị biểu mẫu và điền vào. Cursor IDE có thể trả lời: “I’ve filled out the contact form with the details you provided.” (Tôi đã điền vào biểu mẫu liên hệ với thông tin bạn cung cấp.) Hãy xem Chrome hoạt động—khá tuyệt vời!

3. Cào Dữ liệu Web:

• Hỏi: “Scrape the headlines from ‘https://news.example.com’.” (Cào các tiêu đề từ ‘https://news.example.com’.)
• Browser tools mcp sẽ truy cập trang, trích xuất các tiêu đề (sử dụng dữ liệu DOM) và trả về chúng trong Cursor IDE, như: “Here are the latest headlines: ‘Breaking News 1’, ‘Breaking News 2’.” (Đây là các tiêu đề mới nhất: ‘Tin nóng 1’, ‘Tin nóng 2’.)
• Đối với các trang phức tạp, hãy chỉ định mục tiêu (ví dụ: “Extract headlines from class ‘news-title’” - Trích xuất các tiêu đề từ lớp ‘news-title’).

Browser tools mcp mở ra một thế giới khả năng tự động hóa trong Cursor IDE!

Mẹo để Tận dụng Tối đa Browser tools mcp

Để nâng cao trải nghiệm Browser tools mcp của bạn với Cursor IDE:

• Hãy Cụ thể: Sử dụng các lệnh chính xác (ví dụ: “Click the button with ID ‘submit-btn’” - Nhấp vào nút có ID ‘submit-btn’) để tự động hóa chính xác.
• Kiểm tra Quyền: Đảm bảo tiện ích mở rộng của Chrome có quyền truy cập vào các tab đang hoạt động và chụp màn hình.
• Giữ Máy chủ Luôn Chạy: Đừng đóng cửa sổ terminal đang chạy máy chủ MCP—khởi động lại nếu cần.
• Khám phá Các Tính năng: Thử chụp ảnh màn hình hoặc phân tích nhật ký để gỡ lỗi—kiểm tra kho lưu trữ GitHub để biết thêm!

Trải nghiệm của Tôi với Browser tools mcp

Làm việc với Browser tools mcp trong Cursor IDE thật thú vị! Việc thiết lập diễn ra suôn sẻ, và việc tự động hóa các tác vụ trình duyệt cảm thấy liền mạch. Ảnh chụp màn hình và nhật ký trong Cursor IDE là trợ giúp rất lớn cho việc gỡ lỗi. Nếu bạn gặp trục trặc, hãy xác minh cổng (3025) và kết nối tiện ích mở rộng.

Lời kết: Hành trình Browser tools mcp của bạn

Bạn đã thiết lập Browser tools mcp với Cursor IDE và mở khóa phép màu tự động hóa trình duyệt! Từ điều hướng các trang web đến cào dữ liệu, bạn đã sẵn sàng xử lý các tác vụ web một cách dễ dàng. Thử nghiệm với nhiều ý tưởng tự động hóa hơn—như theo dõi giá hoặc các tác vụ phát triển web front-end! Để biết thêm, hãy kiểm tra kho lưu trữ github của browser-tools-mcp. Đừng quên xem Apidog nếu bạn đang tìm kiếm một giải pháp thay thế Postman tốt hơn và tiếp tục phát huy hành trình Browser tools mcp của bạn!