找回密码
 立即注册
首页 业界区 业界 利用 chrome-devtools MCP 让 AI 操作便携版浏览器(可 ...

利用 chrome-devtools MCP 让 AI 操作便携版浏览器(可指定 Data)

诞楮 5 小时前
说明:文中出现的具体视频链接、演示路径、用户名、端口号等均为示例,读者需按需替换。
1. 需求

(1)使用 chrome-devtools-mcp 打开 https://www.bilibili.com/video/BV1fEsfzrEc7/?spm_id_from=333.1007.tianma.1-2-2.click&vd_source=7c7ae5cc1dbb2453e1eb43950a4264a3  (读者需按需替换)
(2)暂停视频播放
(3)查找并点击该视频页面的所有“点击查看”文本元素
2. 背景与试验

  上述需求要查看哔站视频评论,必须要登录才行。但是,通常 AI 工具调用浏览器完成任务时,不支持持久化用户数据目录(不支持指定 Data 目录,每次都会创建临时目录)。
  在 Cursor 2.x 中,通过 Cursor 2.x 内置的 Browser Automation 和 chrome-devtools mcp 两种方式进行试验。每次调用 Chrome 打开哔站后,都无法直接查看评论,更无法点击评论中的“点击查看”文本元素。每次都需要手动登录哔站后,才能完成点击评论中的“点击查看”文本元素的任务,这很繁琐。
3. 问题:Cursor 2.x 能否在启动 Chrome 时指定 Data 目录?

(1)Browser Automation 方式不支持指定 Data 目录。
  经 Cursor 深入研究 https://github.com/worryzyy/awesome-cursor-download  ,已经核实 Browser Automation 方式不支持持久化用户数据目录(每次创建临时目录)。
(2)chrome-devtools mcp 方式支持指定 Data 目录。
  经 Cursor 深入研究 https://developer.chrome.com/blog/chrome-devtools-mcp  ,chrome-devtools mcp 有两种方式支持指定 Data 目录。
  一种方式是在 C:\Users\WinUser01.cursor\mcp.json(读者需按需替换)添加类似下面的配置:
  1. {
  2. "mcpServers": {
  3.    "chrome-devtools": {
  4.      "command": "npx",
  5.      "args": [
  6.        "chrome-devtools-mcp@latest",
  7.        "--chrome-arg=--user-data-dir=C:\\Users\\YourName\\chrome-mcp-profile"
  8.      ]
  9.    }
  10. }
  11. }
复制代码
  另一种方式是先启动携带 --remote-debugging-port=9222、指定 Data 目录的 Chrome 进程(可以是安装版、也可以是便携版),并在 C:\Users\WinUser01.cursor\mcp.json(读者需按需替换)添加类似下面的配置,让 Cursor 2.x 直接调用已经启动的 Chrome 进程来完成任务:
  1. {
  2.   "mcpServers": {
  3.     "chrome-devtools": {
  4.       "command": "npx",
  5.       "args": [
  6.         "chrome-devtools-mcp@latest",
  7.         "--browser-url=http://127.0.0.1:9222"
  8.       ]
  9.     }
  10.   }
  11. }
复制代码
4. 实现步骤

  下面,将在 Cursor 2.x 环境、以便携版 Chrome 为例,说明具体的实现步骤。
(1)先安装配置好 Cursor 2.x。打开 Cursor 2.x 的“Settings”窗口,左侧“Tools & MCP”,右侧点击“New MCP Server”编辑 C:\Users\WinUser01.cursor\mcp.json(读者需按需替换),添加以下内容,端口号为 9222(可以根据需要更改,但必须与后面 start-chrome-and-cursor-OK.vbs 中启动 Chrome 进程时指定的端口号一致):
  1. {
  2.   "mcpServers": {
  3.     "chrome-devtools": {
  4.       "command": "npx",
  5.       "args": [
  6.         "chrome-devtools-mcp@latest",
  7.         "--browser-url=http://127.0.0.1:9222"
  8.       ]
  9.     }
  10.   }
  11. }
复制代码
  配置好之后,需要关闭 Cursor、并结束内存中的所有 Cursor 进程,再重启 Cursor 才能生效。重启后,打开“Settings”窗口,左侧“Tools & MCP”右侧“Installed MCP Servers”下面显示有“chrome-devtools (27 tools enabled)”、且末尾开关显示绿色开启状态,便说明 chrome-devtools MCP 已经配置成功。
       
1.png
                 
2.png
(2)由于现在版本的 Cursor 在关闭后,Cursor 进程还会残留在内存中(估计是bug),同时为避免内存中存在多个 Chrome 进程的相互干扰,所以下面在启动 Chrome、Cursor 进程前,强制结束内存中的所有 Chrome、Cursor 进程。
  为了便于自动化快捷操作,可以编制 start-chrome-and-cursor-OK.vbs(文件内容附后)来完成先结束内存中的所有 Chrome、Cursor 进程,再启动定制的 Chrome 便携版进程、再启动 Cursor 进程。
  注意:启动的 "d:\WinUser.dat\Program Files\ChromePortable\Chrome-bin\chrome.exe" 为便携版 Chrome 路径,"d:\WinUser.dat\Program Files\ChromePortable\Data" 为指定的用户 Data 目录,读者需按需替换。
5. 使用 start-chrome-and-cursor-OK.vbs 实现需求

  接下来,创建一个项目目录,比如:e:\CursorMcp\BrowerMcp01(读者需按需替换),将 start-chrome-and-cursor-OK.vbs 文件拷贝到该目录,双击 start-chrome-and-cursor-OK.vbs 便可以自动结束内存中的所有 Chrome、Cursor 进程,再启动定制的 Chrome 便携版进程、再启动 Cursor 进程。
  用 Cursor 2.x 打开项目目录,在 Chat 窗口中选择 Agent 模式,模型选择 Sonnet 4.5 即可,直接输入下面的任务发送即可自动完成(视频网址请按需替换):
(1)使用 chrome-devtools-mcp 打开 https://www.bilibili.com/video/BV1fEsfzrEc7/?spm_id_from=333.1007.tianma.1-2-2.click&vd_source=7c7ae5cc1dbb2453e1eb43950a4264a3  (读者需按需替换)
(2)暂停视频播放
(3)查找并点击该视频页面的所有“点击查看”文本元素
6. chrome-devtools MCP 查找“点击查看”元素,并进行点击

  下图是 chrome-devtools MCP 查找到的第一个“点击查看”元素(红框标注):
       
3.png
  下图是 chrome-devtools MCP 已经自动点击查找到的“点击查看”元素、展开评论(红框标注),总共查找到并自动点击3个“点击查看”元素(红框标注):
       
4.png
7. 附:start-chrome-and-cursor-OK.vbs 文件内容
  1. ' start-chrome-and-cursor-OK.vbs
  2. Option Explicit
  3. ' 全局对象变量
  4. Dim objWMI, objShell, objFSO
  5. Dim chromePath, cursorPath, currentDir
  6. Dim maxWaitTime, waitInterval
  7. ' 配置参数
  8. maxWaitTime = 10000  ' 最大等待时间(毫秒)
  9. waitInterval = 200   ' 检查间隔(毫秒)
  10. ' 创建必要对象
  11. Set objWMI = GetObject("winmgmts:\\.\root\cimv2")
  12. Set objShell = CreateObject("WScript.Shell")
  13. Set objFSO = CreateObject("Scripting.FileSystemObject")
  14. ' 获取当前脚本所在目录
  15. currentDir = objFSO.GetParentFolderName(WScript.ScriptFullName)
  16. ' 便携版 Chrome 路径和启动参数
  17. chromePath = "d:\WinUser.dat\Program Files\ChromePortable\Chrome-bin\chrome.exe"
  18. Dim chromeArgs
  19. ' 使用下划线 _ 作为行继续符(VBScript 不支持 CMD 的 ^ 符号)
  20. chromeArgs = "--user-data-dir=""d:\WinUser.dat\Program Files\ChromePortable\Data"" " & _
  21.              "--disable-background-networking " & _
  22.              "--disable-features=CustomizeChromeSidePanel " & _
  23.              "--disable-hang-monitor " & _
  24.              "--disable-session-crashed-bubble " & _
  25.              "--hide-crash-restore-bubble " & _
  26.              "--disable-restore-session-state " & _
  27.              "--remote-debugging-port=9222"
  28. ' ============================================================================
  29. ' 步骤 1: 结束所有 Chrome 进程
  30. ' ============================================================================
  31. Call KillAllProcesses("chrome.exe")
  32. Call WaitForProcessesToTerminate("chrome.exe", maxWaitTime)
  33. ' ============================================================================
  34. ' 步骤 2: 结束所有 Cursor 进程
  35. ' ============================================================================
  36. Call KillAllProcesses("Cursor.exe")
  37. Call WaitForProcessesToTerminate("Cursor.exe", maxWaitTime)
  38. ' ============================================================================
  39. ' 步骤 3: 启动便携版 Chrome
  40. ' ============================================================================
  41. If Not objFSO.FileExists(chromePath) Then
  42.     WScript.Quit 1
  43. End If
  44. objShell.Run """" & chromePath & """ " & chromeArgs, 1, False
  45. WScript.Sleep 3000
  46. ' ============================================================================
  47. ' 步骤 4: 验证 Chrome CDP 连接(可选)
  48. ' ============================================================================
  49. Call VerifyChromeCDP()
  50. ' ============================================================================
  51. ' 步骤 5: 启动 Cursor
  52. ' ============================================================================
  53. cursorPath = FindCursorPath()
  54. If cursorPath <> "" Then
  55.     objShell.Run """" & cursorPath & """ """ & currentDir & """", 1, False
  56.     WScript.Sleep 1000
  57. End If
  58. ' 清理资源
  59. Set objWMI = Nothing
  60. Set objShell = Nothing
  61. Set objFSO = Nothing
  62. WScript.Quit 0
  63. ' ============================================================================
  64. ' 函数: 结束指定名称的所有进程
  65. ' 参数: processName - 进程名称(如 "chrome.exe")
  66. ' 返回: 结束的进程数量
  67. ' ============================================================================
  68. Function KillAllProcesses(processName)
  69.     Dim colProcessList, objItem
  70.     Dim killedCount
  71.    
  72.     killedCount = 0
  73.     Set colProcessList = objWMI.ExecQuery("SELECT * FROM Win32_Process WHERE Name = '" & processName & "'")
  74.    
  75.     If colProcessList.Count > 0 Then
  76.         For Each objItem In colProcessList
  77.             On Error Resume Next
  78.             objItem.Terminate()
  79.             If Err.Number = 0 Then
  80.                 killedCount = killedCount + 1
  81.             End If
  82.             On Error Goto 0
  83.         Next
  84.     End If
  85.    
  86.     Set colProcessList = Nothing
  87.     KillAllProcesses = killedCount
  88. End Function
  89. ' ============================================================================
  90. ' 函数: 等待指定名称的所有进程结束
  91. ' 参数: processName - 进程名称(如 "chrome.exe")
  92. ' 参数: maxWaitMs - 最大等待时间(毫秒)
  93. ' ============================================================================
  94. Function WaitForProcessesToTerminate(processName, maxWaitMs)
  95.     Dim elapsedTime, colProcessList
  96.    
  97.     elapsedTime = 0
  98.    
  99.     Do While elapsedTime < maxWaitMs
  100.         Set colProcessList = objWMI.ExecQuery("SELECT * FROM Win32_Process WHERE Name = '" & processName & "'")
  101.         
  102.         If colProcessList.Count = 0 Then
  103.             Set colProcessList = Nothing
  104.             Exit Function
  105.         End If
  106.         
  107.         Set colProcessList = Nothing
  108.         WScript.Sleep waitInterval
  109.         elapsedTime = elapsedTime + waitInterval
  110.     Loop
  111. End Function
  112. ' ============================================================================
  113. ' 函数: 查找 Cursor 可执行文件路径
  114. ' 返回: Cursor.exe 的完整路径,未找到则返回空字符串
  115. ' ============================================================================
  116. Function FindCursorPath()
  117.     Dim paths(4)
  118.     Dim i, testPath
  119.    
  120.     ' 定义可能的 Cursor 安装路径
  121.     paths(0) = objShell.ExpandEnvironmentStrings("%LOCALAPPDATA%") & "\Programs\cursor\Cursor.exe"
  122.     paths(1) = objShell.ExpandEnvironmentStrings("%APPDATA%") & "\Local\Programs\cursor\Cursor.exe"
  123.     paths(2) = "C:\Program Files\Cursor\Cursor.exe"
  124.     paths(3) = objShell.ExpandEnvironmentStrings("%ProgramFiles(x86)%") & "\Cursor\Cursor.exe"
  125.    
  126.     ' 尝试从注册表获取路径
  127.     On Error Resume Next
  128.     testPath = objShell.RegRead("HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Uninstall\Cursor\InstallLocation")
  129.     If Err.Number = 0 And testPath <> "" Then
  130.         testPath = testPath & "\Cursor.exe"
  131.         If objFSO.FileExists(testPath) Then
  132.             FindCursorPath = testPath
  133.             Exit Function
  134.         End If
  135.     End If
  136.     On Error Goto 0
  137.    
  138.     ' 检查每个路径
  139.     For i = 0 To UBound(paths)
  140.         If objFSO.FileExists(paths(i)) Then
  141.             FindCursorPath = paths(i)
  142.             Exit Function
  143.         End If
  144.     Next
  145.    
  146.     FindCursorPath = ""
  147. End Function
  148. ' ============================================================================
  149. ' 函数: 验证 Chrome CDP 连接(静默验证)
  150. ' ============================================================================
  151. Function VerifyChromeCDP()
  152.     Dim httpObj, url
  153.    
  154.     On Error Resume Next
  155.    
  156.     Set httpObj = CreateObject("MSXML2.XMLHTTP")
  157.     url = "http://localhost:9222/json/version"
  158.    
  159.     httpObj.Open "GET", url, False
  160.     httpObj.setTimeouts 2000, 2000, 2000, 2000
  161.     httpObj.Send
  162.    
  163.     Set httpObj = Nothing
  164.     On Error Goto 0
  165. End Function
复制代码
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

相关推荐

您需要登录后才可以回帖 登录 | 立即注册