2025年10月16日 星期四

Chrome-devtools MCP Server套件, 請AI神器擔任⌈網路爬蟲⌋角色,協助查詢網頁內容(截圖、存檔)。

🚨執行Chrome-Devtools MCP套件,需先備妥Google Gemini CLI執行環境 (亦即將AI神器,以命令提示方式,於本地端電腦執行)。

Chrome DevTools Wrapper 操作教學: 此工具能讓AI神器, 直接操作您的本地端⌈Chrome 瀏覽器⌋,執行網頁瀏覽、擷取內容、自動化測試等任務。


一 .AI使用本地端瀏覽器,經由chrome-devtools-mcp 套件 (它屬Google Gemini CLI擴展EXTENSIONS套件)


 chrome-devtools-mcp 是一個本地端伺服器。
 啟動後,它將成為AI神器(Gemini CLI)和您瀏覽器(Chrome)之間溝通的橋樑。您可以
 透過⌈自然語言(母語對話)⌋對AI神器在命令提示列方式下達指令,AI神器依您的指示,自動下達指令轉換成對瀏覽器的具體操作。
 

二. 如何安裝與啟動


  您已經擁有所有必要的檔案,只需按照以下步驟啟動它:

   1. 進入專案目錄
      AI神器將會執行 cd 命令來進入 chrome-devtools-mcp 資料夾。

   2. 安裝依賴套件
      接著,AI神器會執行 npm install 來安裝所有必要的 Node.js 模組。這個步驟通常只需要在第一次使用或更新後執行。

 三. 啟動伺服器

      最後,金會執行 npm start 來啟動伺服器。您會看到終端機顯示伺服器正在運行的訊息,這表示AI神器已經準備好可以控制瀏覽器了。

AI神器將為您執行以上指令: (此動作是以自然語言下達給Gemini CLI,由AI神器自動產生的部署安裝指令)
Shell cd C:\nodejs\chrome-devtools-mcp && npm install && npm start (進入 chrome-devtools-mcp 目錄,安裝依賴套件並啟動伺服器。)

 

四. 如何使用


  現在伺服器正在運行,您可以直接用⌈自然語言⌋對AI神器下達指示,來操作瀏覽器。它能執行的操作定義在 gemini-extension.json 檔案中。

  您可以嘗試以下指令:

   * "請幫我打開 Google 首頁"
   * "請前往 https://www.wikipedia.org/ 並搜尋 '人工智慧'"
   * "請幫我截取目前頁面的畫面"
   * "請幫我看看頁面上有沒有 'Gemini' 這個詞"
   * "列出目前開啟的所有分頁"

 總結來說,啟動這個擴充功能後,您就可以透過與AI神器對話,讓它直接操作本地端CHROME瀏覽器,完成更複雜的網頁互動任務。
   

💜執行過程大致彙整如下: (各動作之指令,皆為AI神器自動下達,即可自動依您指示查找網頁內容)

✦ 好的,我們開始執行第一個指令。
  正在為您打開 Google 首頁...
✓  navigate_page (chrome-devtools MCP Server) {"url":"https://www.google.com/"}                  

✦ 好的,Google 首頁已經打開。

  接下來,我(AI神器)將前往維基百科並搜尋「人工智慧」。
✓  navigate_page (chrome-devtools MCP Server) {"url":"https://www.wikipedia.org/"}   

✦ 好的,我(AI神器)已經到達維基百科。現在我需要查看頁面元素來找到搜尋框。

 ✓  take_snapshot (chrome-devtools MCP Server) {}  0    

✦ 好的,我(AI神器)已經到達維基百科。現在我需要查看頁面元素來找到搜尋框。

✓  take_snapshot (chrome-devtools MCP Server) {}       

✦ 好的,我(AI神器)已經找到搜尋框 (uid=1_43) 和搜尋按鈕 (uid=1_122)。

  現在,我(AI神器)將輸入「人工智慧」並執行搜尋。

✓  fill (chrome-devtools MCP Server) {"value":"人工智慧","uid":"1_43"}    

✦ 好的,已經成功搜尋「人工智慧」,目前在維基百科的「人工智慧」頁面。

  接下來,我(AI神器)將為您截取目前頁面的畫面,並存檔為 wikipedia_ai_screenshot.png。

 ✓  take_screenshot (chrome-devtools MCP Server) {"filePath":"c:\\nodejs\\wikipedia_ai_screenshot.png"}      


  現在,我(AI神器)來檢查頁面上是否有 "Gemini" 這個詞。

 ✓  wait_for (chrome-devtools MCP Server) {"text":"Gemini"}      

✦ 頁面上找到了 "Gemini" 這個詞。

  最後,為您列出目前所有開啟的分頁。

 ✓  list_pages (chrome-devtools MCP Server) {}     

 

✦ 好的,目前開啟的分頁只有一個:維基百科的「人工智慧」頁面。

  我已經依序執行完您提供的所有指令:
   1. 打開 Google 首頁。
   2. 前往維基百科並搜尋「人工智慧」。
   3. 截取了維基百科頁面的畫面並存檔。
   4. 確認了頁面中包含 "Gemini" 這個詞。
   5. 列出目前開啟的分頁。

  接下來需要我做什麼呢?
 
 
 相關參考資訊:
 Gemini CLI將AI大神,安裝至LOCAL本地端,成為生活中 日文貼身秘書