安裝設定指南

跟著以下步驟,在 3 分鐘內啟用 WebMCP。

0 系統需求

在開始之前,請確認你有以下環境:

1 下載 Chrome Canary

WebMCP 是 Chrome 的實驗性功能,目前只在 Chrome Canary(146 版以上)可用。 Chrome Canary 是 Google Chrome 的每日更新版本,包含最新的實驗性功能。 它可以和你現有的 Chrome 穩定版同時安裝,互不影響。

小提醒:Chrome Canary 和 Chrome 穩定版可以同時安裝。Canary 有獨立的圖示(金色), 不會影響你日常使用的 Chrome。
Applications
Chrome
穩定版
Chrome Canary
實驗版(需要這個)

2 開啟 Chrome Flags

安裝完 Chrome Canary 後,打開它並在網址列輸入:

在網址列輸入
chrome://flags

這會開啟 Chrome 的實驗性功能設定頁面。你會看到很多實驗性旗標(flags)。

chrome://flags
🔍 Search flags
Experiments
WARNING: EXPERIMENTAL FEATURES AHEAD!

3 搜尋並啟用 WebMCP

在 flags 頁面的搜尋框中輸入 WebMCP。 你應該會看到一個或多個相關的 flag。將它們的狀態從 Default 改為 Enabled

chrome://flags/#webmcp
WebMCP
WebMCP for testing
Enables the WebMCP API (navigator.modelContext) for testing web pages with AI agents.
Enabled
找不到 WebMCP flag?也可以嘗試搜尋 Model ContextmodelContext。 確認你的 Chrome Canary 版本是 146 以上(在網址列輸入 chrome://version 查看)。

4 重啟瀏覽器

啟用 flag 後,頁面底部會出現 Relaunch 按鈕。點擊它重啟 Chrome Canary。

Relaunch

← 點擊底部的 Relaunch 按鈕

5 驗證安裝

重啟後,回到本頁面。下方的偵測結果應該全部變成綠色。 你也可以在 Chrome DevTools Console 中輸入以下程式碼來驗證:

Chrome DevTools Console (F12)
// 檢查 API 是否存在
console.log('modelContext' in navigator);  // 應該輸出 true

// 檢查可用方法
console.log(typeof navigator.modelContext.registerTool);  // "function"
console.log(typeof navigator.modelContext.provideContext);  // "function"
console.log(typeof navigator.modelContext.clearContext);  // "function"
全部都輸出 true / "function"?恭喜!你的環境已經準備好了。 可以開始試玩 Declarative APIImperative API 的 Demo。

即時偵測結果

常見問題排解

navigator.modelContext 不存在
  1. 確認你使用的是 Chrome Canary(金色圖示),不是一般的 Chrome
  2. 確認版本是 146 以上(chrome://version
  3. 確認 WebMCP flag 已啟用(chrome://flags 搜尋 WebMCP)
  4. 確認已重啟瀏覽器(不是只重新整理頁面)
registerTool() 拋出錯誤
  • 確認頁面是透過 HTTP/HTTPS 載入(不是 file://
  • 檢查工具的 inputSchema 格式是否正確
  • 確認 nameexecute 都有提供
找不到 WebMCP flag

嘗試以下搜尋關鍵字:

  • WebMCP
  • Model Context
  • modelContext
  • Web Agent

如果都找不到,你的 Canary 版本可能太舊。請更新到最新版。

下一步

設定完成後,你可以:

Declarative API Demo Imperative API Demo 電商 Demo Agent 日誌