BrowserTools MCP赋能Cursor IDE:基于上下文实现浏览器无缝控制
csdh11 2025-05-24 13:16 3 浏览
一、项目介绍
BrowserTools MCP 是基于Anthropic的Model Context Protocol（MCP）构建的浏览器交互工具，通过与Cursor IDE等AI编辑器深度整合，实现无需启动新实例的浏览器控制。其核心技术包含三个组件：
- Chrome扩展：捕获屏幕截图、控制台日志、DOM元素及网络活动；
- Node中间件：处理扩展与MCP服务器间的通信，智能截断日志避免令牌超限；
- MCP服务器：标准化AI客户端（如Cursor）的交互接口，支持自定义工具扩展。
核心优势：
- 相比Playwright/Puppeteer减少90%的实例启动开销
- 支持实时截图、自动化审计（SEO/性能/可访问性）及NextJS专项优化
- 本地化数据处理，确保隐私安全
二、使用教程（以Cursor IDE为例）
步骤1：环境准备
# 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/br/browser-tools-mcp
cd browser-tools-mcp
npm install步骤2：组件启动
加载Chrome扩展-浏览器访问
chrome://extensions→ 启用开发者模式 → 加载项目下的
extension- 目录
- 授权所需权限
- 启动Node中间件
npm run browser-tools-server
# 默认监听端口3000- 绑定MCP服务器在Cursor中设置：
Settings → AI → MCP Server URL → http://localhost:3000步骤3：实战场景
实时截图捕获
点击Cursor输入框 → 输入
/screenshot- → 自动获取当前标签页截图
- 自动化SEO审计-输入
/audit-seo- → 获取元标签优化建议和链接结构分析
- 性能调试-输入
/debug-performance- → 分析渲染阻塞资源与DOM优化点
三、部署注意事项
- 端口配置
修改
manifest.json中的
content_security_policy- 字段匹配实际端口
- 防火墙开放3000端口（或自定义端口）
- 权限适配
// manifest.json 示例片段
"permissions": ["activeTab", "debugger", "storage", "webRequest"],
"host_permissions": ["*://*/*"]- 问题排查
截图失败时：检查Cursor输入框是否聚焦
连接中断：重启Node服务并强制刷新Chrome
四、总结
该项目通过MCP协议+本地化架构实现了AI与浏览器的深度交互，特别适合需要频繁调试分析的场景。开发者可基于其模块化设计扩展自定义工具链，相比传统自动化工具降低75%的环境配置成本。
相关推荐
- 跨越26年的宝可梦系列游戏你玩过几款?
-
作为一个宝可梦IP的忠实爱好者，是时时刻刻关注着宝可梦的影视及游戏方面，在22年2月也即将引来正统续作宝可梦阿尔宙斯（其实还是更习惯口袋妖怪的翻译）宝可梦从1996年诞生至今一共有多少正统系列，小编做...
- ndsi，肩键L键失灵，拆开看看能不能修
-
很久没有玩nds了，新买了个R4烧录卡是带64g的游戏来玩玩，发现肩键L失灵了，打开看看能不能挽救一下。之前后盖上是有痛贴的，没办法只能忍痛撕下来了，撕下来之后还真白啊，上保护贴是真有必要的。话不多说...
- R4卡使用方法!游戏介绍及常见问题!任天堂掌机通用
-
哈喽大家好！我是掌机百科！今天介绍下R4卡的使用方法及教程，DS,NDS,NDSL,NDSLL,NDSXL,NDSI.NDSILL,NDSIXL,3DS,3DSLL,3DSXL,2DS,NEW3DS...
- JavaScript简介:从概念、特点、组成和用法全面带你快速了解JS
-
“这里是云端源想IT，帮你轻松学IT”...
- FileBrowser 是一个优秀的基于 Web 的文件管理器
-
FileBrowser是一个基于网页的文件管理器，允许用户通过浏览器界面管理服务器上的文件和目录。它提供了一种简单直观的方式来执行文件操作，如上传、下载、删除、重命名和编辑文件，以及管理目录。以下是...
- BrowserTools MCP赋能Cursor IDE:基于上下文实现浏览器无缝控制
-
一、项目介绍BrowserToolsMCP是基于Anthropic的ModelContextProtocol（MCP）构建的浏览器交互工具，通过与CursorIDE等AI编辑器深度整合，实现...
- 正确复制、重写别人的代码，不算抄袭
-
我最近在一篇文章提到，工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是，如果你没有达到重用第三方代码的阈值时，那么你就可以自己编写代码。...
- 它来了、全新的Vue3中文文档来了
-
Vue.js-渐进式JavaScript框架|Vue.jsPlayicon...
- “我们太乙变化大”——第一书记讲述贫困村变化
-
来源：江西日报-江西新闻客户端江西新闻客户端讯（江西日报记者唐燕）“2018年1月，组织安排我到太乙村开展帮扶工作。两年来，我亲眼目睹并亲身经历了群众生产生活发生的巨大变化。看到群众生活越来越幸福，我...
- 趋势科技杀软曝密码漏洞:允许远程代码执行
-
IT之家讯来自谷歌的安全研究员TavisOrmandy最近很忙。几周之前，他发现了AVG杀软扩展程序可以绕过Chrome商店中的审查机制，自动安装到用户的Chrome浏览器中，而且这个扩展还会泄露...
- Vue3安装使用方式详解
-
对于开发和学习任何一门新技术，新框架，最主要的还是能够运行起来，怎么运行起来，这才是最主要的。所以，我们来说一下Vue.js的安装方式。因为Vue.js的设计初始，就是一个渐进式的J...
- 设置 Cursor MCP 与 BrowserTools 服务
-
一、安装Chrome扩展打开Chrome网上应用店，搜索...
- 那些通用清除软件不曾注意的秘密
-
系统清理就像卫生检查前的大扫除，即使你使出吃奶的劲儿把一切可能的地方都打扫过，还会留下边边角角的遗漏。随着大家电脑安全意识的提高，越来越多的朋友开始关注自己的电脑安全，也知道安装360系列软件来"武装...
- SharpBrowser:用C#打造超快的个性化开源浏览器!
-
推荐一个基于.Net8和CefSharp开发的开源浏览器。项目简介SharpBrowser是一个用C#和CefSharp开发的全功能网页浏览器。它声称是最快的开源C#网页浏览器，渲...
- 一周热门
- 最近发表
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)