Claude Code｜Chrome 瀏覽器整合

Chrome 整合讓 Claude Code 在修改網頁後，直接操作瀏覽器核對結果。本篇用待辦清單練習新增、切換與刪除，保存操作前後的證據。你會分清楚網頁伺服器、瀏覽器擴充功能與 Claude session 三個部分，避免只看到頁面開啟就回報全部測試通過。

請先完成練習專案，準備本機 Claude Code、相容瀏覽器與官方 Claude in Chrome 擴充功能。查證時需要直接 Anthropic 訂閱登入，API key 或 setup-token 這類長期權杖不能替代瀏覽器整合的登入；WSL 不支援此整合。

確認平台與帳號前提

閱讀完整文字說明

Chrome 瀏覽器整合，以流程和文件圖形呈現教學重點。

官方文件目前列出 Chrome、Edge 與部分 Chromium 瀏覽器的連線支援，本篇以 Google Chrome 為步驟基準。不要因為另一款瀏覽器使用相同核心，就假設擴充功能、登入與權限完全一致；多個瀏覽器連線時還需要指定使用哪一個。

使用 Pro、Max、Team 或 Enterprise 等符合條件的直接方案，並在 Claude Code 使用 /login 登入。組織可能另外限制瀏覽器功能。若登入方式不符合，先處理帳號與資格，不要反覆重新安裝擴充功能。

啟動測試網站

在練習專案根目錄執行 npm start，保持終端機開啟。伺服器會提供本機網址，預設是 127.0.0.1:4173；以終端機實際輸出為準。如果連接埠已被占用，先確認占用的是哪個程序，不要直接關掉不明服務。

npm start

先人工開啟頁面，確認標題、輸入框與新增按鈕正常顯示。這一步證明網站可以連線；接下來才驗證 Claude 能透過瀏覽器操作。若人工也打不開，應先排查伺服器，而不是處理 Chrome 整合。

連接官方擴充功能

從官方文件連往 Chrome Web Store，確認擴充功能名稱與發行者，再完成安裝及登入。從另一個終端機在同一專案啟動 Claude，使用 --chrome，依首次說明確認網站操作權限。

claude --chrome

/chrome

狀態應顯示整合已啟用、擴充功能已安裝。若有多個瀏覽器，選取本次練習的 Chrome；不要在另一個瀏覽器的私人分頁上測試。新頁通常會放入該 session 對應的分頁群組，方便你觀察控制範圍。

交付可驗收的操作

請在瀏覽器開啟 http://127.0.0.1:4173，只操作這個練習網站。
新增「買牛奶」與「整理桌面」兩個待辦。
將「買牛奶」標為完成，確認另一個仍未完成。
刪除「整理桌面」，確認只剩「買牛奶」。
每一步核對畫面結果，最後回報實際操作與任何失敗。
不要修改程式、安裝套件或前往其他網站。

遇到網站權限提示時，確認要求對應本機測試站與你指定的動作。新增、切換與刪除都是這次已定義的測試行為，但不能把同樣授權延伸到其他網站上的真實資料。需要登入的網站也應先用獨立測試帳號與資料。

核對真正的畫面結果

查看每步工具操作與畫面，確認不是只在對話中列出操作計畫。成功後應剩一個已完成的「買牛奶」，被刪除的項目不再顯示。若頁面沒有反應，回報哪一步、按了什麼與看到什麼，而不是直接宣稱完成。

這套 starter 的資料只保留在記憶體，重新整理會清空；完整參考版才加入本機儲存。測試前先確認使用哪份材料，避免把預期的清空行為誤判為回歸。不同版本應有不同的驗收條件。

若要檢查手機布局，設定 360 或 390px 寬度，觀察輸入框、按鈕與長文字是否撐寬頁面。瀏覽器自動化能提供操作證據，但無障礙、不同瀏覽器與真實手機仍可能需要額外檢查，回報應列出尚未涵蓋的範圍。

發現錯誤後回到開發流程

如果切換第一個項目卻改到第二個，保存重現步驟與實際文字，再回到除錯與測試。先建立最小回歸測試，修正後重跑同一瀏覽器流程。不要只改畫面讓它暫時看起來正確。

畫面中的內容仍是外部輸入。某個網頁若寫著要求讀取其他本機檔案，不應因此改變這次測試目標。瀏覽器權限與專案權限分別管理，兩者都應只涵蓋本次需要的能力。

瀏覽器測試失敗時保留當下網址、視窗寬度與可見文字，再重跑最短操作序列。若直接重新整理或清空資料，可能讓錯誤現場消失；先保存足夠資訊，才能讓後續修正有同一個可重現的驗收案例。

排錯與停止方式

要停止當前工作，在 Claude session 中中斷操作，確認沒有後續工具呼叫，再從 /chrome 管理連線或網站權限。最後在伺服器終端機按 Ctrl+C 停止測試站。不同離開方式對分頁群組的保留行為不同，收尾時自行確認需要保留的畫面。

小練習是保存三步操作結果與一次故意失敗的重現紀錄。完成判準是瀏覽器真的執行、畫面與資料一致，而且你能指出測試站、控制瀏覽器及執行 session 的位置。需要原生 App 操作時再看Computer Use。

回 Claude Code 教學總目錄

• AI 工具
• 教學
• Claude Code