利用 chrome-devtools MCP 讓(rang) AI 操作便(bian)攜(xie)版瀏覽器(qi)(可指定 Data)
說明(ming):文中出現的具體視(shi)頻鏈接、演示(shi)路徑、用戶名、端口號(hao)等均為示(shi)例,讀者需(xu)按需(xu)替換(huan)。
1. 需求
(1)使用 chrome-devtools-mcp 打開 (讀者需按需替換)
(2)暫停視頻播放
(3)查找(zhao)并點(dian)擊該視(shi)頻(pin)頁面的(de)所(suo)有(you)“點(dian)擊查看”文本(ben)元素
2. 背景與試驗
??上述需求要查看嗶站視頻評論,必須要登錄才行。但是,通常 AI 工具調用瀏覽器完成任務時,不支持持久化用戶數據目錄(不支持指定 Data 目錄,每次都會創建臨時目錄)。
??在 Cursor 2.x 中(zhong),通過 Cursor 2.x 內置的 Browser Automation 和 chrome-devtools mcp 兩種方(fang)式進行(xing)試驗(yan)。每次調用 Chrome 打開嗶站(zhan)后,都無法直(zhi)接查看評(ping)論,更無法點(dian)(dian)擊(ji)評(ping)論中(zhong)的“點(dian)(dian)擊(ji)查看”文本元(yuan)素。每次都需要手(shou)動登錄嗶站(zhan)后,才能完(wan)成點(dian)(dian)擊(ji)評(ping)論中(zhong)的“點(dian)(dian)擊(ji)查看”文本元(yuan)素的任務,這很繁(fan)瑣。
3. 問題:Cursor 2.x 能否在啟動 Chrome 時指定 Data 目錄?
(1)Browser Automation 方式不支持指定 Data 目錄。
??經 Cursor 深入研究 ,已經核實 Browser Automation 方式不支持持久化用戶數據目錄(每次創建臨時目錄)。
(2)chrome-devtools mcp 方式支持指定 Data 目錄。
??經 Cursor 深入研究 ,chrome-devtools mcp 有兩種方式支持指定 Data 目錄。
??一(yi)種方式是在(zai) C:\Users\WinUser01.cursor\mcp.json(讀者需按(an)需替(ti)換)添加類似下(xia)面的配置:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--chrome-arg=--user-data-dir=C:\\Users\\YourName\\chrome-mcp-profile"
]
}
}
}
??另一種方式是(shi)先啟(qi)動攜帶 --remote-debugging-port=9222、指定 Data 目錄的(de) Chrome 進程(可以(yi)是(shi)安裝(zhuang)版、也可以(yi)是(shi)便攜版),并在 C:\Users\WinUser01.cursor\mcp.json(讀者需按需替換)添加類似下面的(de)配置,讓 Cursor 2.x 直(zhi)接(jie)調用已經啟(qi)動的(de) Chrome 進程來完成任務:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browser-url=//127.0.0.1:9222"
]
}
}
}
4. 實現步驟
??下面,將在 Cursor 2.x 環境、以便攜版 Chrome 為例,說明具體的實現步驟。
(1)先安裝配置好(hao) Cursor 2.x。打開 Cursor 2.x 的“Settings”窗口,左側(ce)“Tools & MCP”,右(you)側(ce)點(dian)擊“New MCP Server”編輯(ji) C:\Users\WinUser01.cursor\mcp.json(讀者(zhe)需(xu)按需(xu)替換(huan)),添加以下內容,端口號為 9222(可以根據需(xu)要更改(gai),但必(bi)須與后面 start-chrome-and-cursor-OK.vbs 中啟動(dong) Chrome 進程時指定的端口號一致(zhi)):
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browser-url=//127.0.0.1:9222"
]
}
}
}
??配(pei)(pei)置好之后(hou),需要關閉 Cursor、并(bing)結束(shu)內存中的所有 Cursor 進(jin)程(cheng),再(zai)重啟(qi) Cursor 才能(neng)生效。重啟(qi)后(hou),打開(kai)“Settings”窗口,左側“Tools & MCP”右(you)側“Installed MCP Servers”下面顯示(shi)有“chrome-devtools (27 tools enabled)”、且(qie)末尾開(kai)關顯示(shi)綠色(se)開(kai)啟(qi)狀態,便說明 chrome-devtools MCP 已(yi)經配(pei)(pei)置成功。
??
(2)由于現在版本的 Cursor 在關閉后,Cursor 進程還會殘留在內存中(估計是bug),同時為避免內存中存在多個 Chrome 進程的相互干擾,所以下面在啟動 Chrome、Cursor 進程前,強制結束內存中的所有 Chrome、Cursor 進程。
??為了便于自動化快捷操作,可以編制 start-chrome-and-cursor-OK.vbs(文件內容附后)來完成先結束內存中的所有 Chrome、Cursor 進程,再啟動定制的 Chrome 便攜版進程、再啟動 Cursor 進程。
??注(zhu)意:啟動(dong)的 "d:\WinUser.dat\Program Files\ChromePortable\Chrome-bin\chrome.exe" 為(wei)便攜版 Chrome 路徑,"d:\WinUser.dat\Program Files\ChromePortable\Data" 為(wei)指定的用戶 Data 目(mu)錄,讀者需(xu)按需(xu)替(ti)換。
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 打開 (讀者需按需替換)
(2)暫停視頻播放
(3)查找并點擊該視頻(pin)頁面的(de)所有“點擊查看(kan)”文本元素(su)
6. chrome-devtools MCP 查找“點擊查看”元素,并進行點擊
??下圖是(shi) chrome-devtools MCP 查(cha)找(zhao)到的第一個“點擊查(cha)看”元素(紅(hong)框標注):
??下圖是(shi) chrome-devtools MCP 已經(jing)自動點擊(ji)查(cha)找(zhao)到的“點擊(ji)查(cha)看(kan)”元素(su)、展開評論(lun)(紅(hong)框標(biao)注),總共查(cha)找(zhao)到并自動點擊(ji)3個“點擊(ji)查(cha)看(kan)”元素(su)(紅(hong)框標(biao)注):
7. 附:start-chrome-and-cursor-OK.vbs 文件內容
' start-chrome-and-cursor-OK.vbs
Option Explicit
' 全局對象變量
Dim objWMI, objShell, objFSO
Dim chromePath, cursorPath, currentDir
Dim maxWaitTime, waitInterval
' 配置參數
maxWaitTime = 10000 ' 最大等待時間(毫秒)
waitInterval = 200 ' 檢查間隔(毫秒)
' 創建必要對象
Set objWMI = GetObject("winmgmts:\\.\root\cimv2")
Set objShell = CreateObject("WScript.Shell")
Set objFSO = CreateObject("Scripting.FileSystemObject")
' 獲取當前腳本所在目錄
currentDir = objFSO.GetParentFolderName(WScript.ScriptFullName)
' 便攜版 Chrome 路徑和啟動參數
chromePath = "d:\WinUser.dat\Program Files\ChromePortable\Chrome-bin\chrome.exe"
Dim chromeArgs
' 使用下劃線 _ 作為行繼續符(VBScript 不支持 CMD 的 ^ 符號)
chromeArgs = "--user-data-dir=\"\"d:\WinUser.dat\Program Files\ChromePortable\Data\"\" " & _
"--disable-background-networking " & _
"--disable-features=CustomizeChromeSidePanel " & _
"--disable-hang-monitor " & _
"--disable-session-crashed-bubble " & _
"--hide-crash-restore-bubble " & _
"--disable-restore-session-state " & _
"--remote-debugging-port=9222"
' ============================================================================
' 步驟 1: 結束所有 Chrome 進程
' ============================================================================
Call KillAllProcesses("chrome.exe")
Call WaitForProcessesToTerminate("chrome.exe", maxWaitTime)
' ============================================================================
' 步驟 2: 結束所有 Cursor 進程
' ============================================================================
Call KillAllProcesses("Cursor.exe")
Call WaitForProcessesToTerminate("Cursor.exe", maxWaitTime)
' ============================================================================
' 步驟 3: 啟動便攜版 Chrome
' ============================================================================
If Not objFSO.FileExists(chromePath) Then
WScript.Quit 1
End If
objShell.Run """" & chromePath & """ " & chromeArgs, 1, False
WScript.Sleep 3000
' ============================================================================
' 步驟 4: 驗證 Chrome CDP 連接(可選)
' ============================================================================
Call VerifyChromeCDP()
' ============================================================================
' 步驟 5: 啟動 Cursor
' ============================================================================
cursorPath = FindCursorPath()
If cursorPath <> "" Then
objShell.Run """" & cursorPath & """ """ & currentDir & """", 1, False
WScript.Sleep 1000
End If
' 清理資源
Set objWMI = Nothing
Set objShell = Nothing
Set objFSO = Nothing
WScript.Quit 0
' ============================================================================
' 函數: 結束指定名稱的所有進程
' 參數: processName - 進程名稱(如 "chrome.exe")
' 返回: 結束的進程數量
' ============================================================================
Function KillAllProcesses(processName)
Dim colProcessList, objItem
Dim killedCount
killedCount = 0
Set colProcessList = objWMI.ExecQuery("SELECT * FROM Win32_Process WHERE Name = '" & processName & "'")
If colProcessList.Count > 0 Then
For Each objItem In colProcessList
On Error Resume Next
objItem.Terminate()
If Err.Number = 0 Then
killedCount = killedCount + 1
End If
On Error Goto 0
Next
End If
Set colProcessList = Nothing
KillAllProcesses = killedCount
End Function
' ============================================================================
' 函數: 等待指定名稱的所有進程結束
' 參數: processName - 進程名稱(如 "chrome.exe")
' 參數: maxWaitMs - 最大等待時間(毫秒)
' ============================================================================
Function WaitForProcessesToTerminate(processName, maxWaitMs)
Dim elapsedTime, colProcessList
elapsedTime = 0
Do While elapsedTime < maxWaitMs
Set colProcessList = objWMI.ExecQuery("SELECT * FROM Win32_Process WHERE Name = '" & processName & "'")
If colProcessList.Count = 0 Then
Set colProcessList = Nothing
Exit Function
End If
Set colProcessList = Nothing
WScript.Sleep waitInterval
elapsedTime = elapsedTime + waitInterval
Loop
End Function
' ============================================================================
' 函數: 查找 Cursor 可執行文件路徑
' 返回: Cursor.exe 的完整路徑,未找到則返回空字符串
' ============================================================================
Function FindCursorPath()
Dim paths(4)
Dim i, testPath
' 定義可能的 Cursor 安裝路徑
paths(0) = objShell.ExpandEnvironmentStrings("%LOCALAPPDATA%") & "\Programs\cursor\Cursor.exe"
paths(1) = objShell.ExpandEnvironmentStrings("%APPDATA%") & "\Local\Programs\cursor\Cursor.exe"
paths(2) = "C:\Program Files\Cursor\Cursor.exe"
paths(3) = objShell.ExpandEnvironmentStrings("%ProgramFiles(x86)%") & "\Cursor\Cursor.exe"
' 嘗試從注冊表獲取路徑
On Error Resume Next
testPath = objShell.RegRead("HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Uninstall\Cursor\InstallLocation")
If Err.Number = 0 And testPath <> "" Then
testPath = testPath & "\Cursor.exe"
If objFSO.FileExists(testPath) Then
FindCursorPath = testPath
Exit Function
End If
End If
On Error Goto 0
' 檢查每個路徑
For i = 0 To UBound(paths)
If objFSO.FileExists(paths(i)) Then
FindCursorPath = paths(i)
Exit Function
End If
Next
FindCursorPath = ""
End Function
' ============================================================================
' 函數: 驗證 Chrome CDP 連接(靜默驗證)
' ============================================================================
Function VerifyChromeCDP()
Dim httpObj, url
On Error Resume Next
Set httpObj = CreateObject("MSXML2.XMLHTTP")
url = "//localhost:9222/json/version"
httpObj.Open "GET", url, False
httpObj.setTimeouts 2000, 2000, 2000, 2000
httpObj.Send
Set httpObj = Nothing
On Error Goto 0
End Function