如何在 Puppeteer 中启用 WebMCP 并发现、执行页面注册的 MCP 工具【免费下载链接】puppeteerJavaScript API for Chrome and Firefox项目地址: https://gitcode.com/GitHub_Trending/puppeteer1/puppeteerWebMCP 是一个实验性 API允许网页注册工具再由浏览器或外部 Agent如 LLM发现并调用。Puppeteer 提供了对应的实验性 APIpage.webmcp属性用于读取页面上已注册的工具列表、监听工具增减以及直接执行工具并拿到返回结果。本文的任务是在 Chrome 151 上通过 Puppeteer 启动带--enable-featuresWebMCP标志的浏览器完成「注册工具 → 发现工具 → 执行工具 → 读取结果」这条完整链路。前提条件来自 WebMCP 指南 与 Page API 的明确说明浏览器必须是Chrome 151且需要支持 WebMCP CDP domain启动时必须加--enable-featuresWebMCP标志WebMCP 是实验性 API接口可能变化。启用 WebMCP带标志启动浏览器在 Puppeteer 中WebMCP 支持通过page.webmcp属性访问当浏览器支持该能力时它会随页面导航自动初始化无需手动调用构造函数import puppeteer from puppeteer; const browser await puppeteer.launch({ args: [--enable-featuresWebMCP], }); const page await browser.newPage(); // page.webmcp is now available console.log(page.webmcp);如果启动时漏掉--enable-featuresWebMCP标志页面侧的document.modelContext工具注册不会生效后续page.webmcp.tools()也将拿不到任何工具。在页面中注册工具Puppeteer 只负责「发现与执行」工具本身需要在页面里注册。文档给出两种注册方式见 WebMCP 指南。命令式注册JavaScript通过page.evaluate在页面内调用document.modelContext.registerToolawait page.evaluate(async () { await document.modelContext?.registerTool({ name: calculate_sum, description: Calculates the sum of two numbers, inputSchema: { type: object, properties: { a: {type: number}, b: {type: number}, }, required: [a, b], }, execute: ({a, b}) { return a b; }, }); });registerTool还支持第二个参数传入AbortSignal调用该 signal 的abort()后可以取消这个工具的注册此时 Puppeteer 侧会收到toolsremoved事件该行为在仓库测试 webmcp.test.ts 中有验证。声明式注册HTML formWebMCP 支持将带特定属性的 HTML form 识别为工具await page.setContent( form toolnamesearch_products tooldescriptionSearch for products in the catalog input namequery typetext / button typesubmitSearch/button /form );通过 form 注册的工具可以拿到对应的表单元素句柄const tools page.webmcp.tools(); const searchTool tools.find(t t.name search_products); const formHandle await searchTool.formElement;注意form 必须带tooldescription属性。测试代码显示缺少该属性的 form如form toolnamemytool/form会触发page的issue事件其genericIssueDetails.errorType为FormModelContextMissingToolDescription。发现已注册的工具page.webmcp.tools()返回当前页面注册的所有工具每个WebMCPTool对象带有name、description、inputSchema、frame等属性详见 WebMCPTool APIconst tools page.webmcp.tools(); for (const tool of tools) { console.log(Tool found: ${tool.name} - ${tool.description}); }如果工具是动态注册的用事件监听代替轮询。page.webmcp是一个EventEmitter事件包括toolsadded、toolsremoved、toolinvoked、toolresponded见 WebMCP API// Listen for new tools page.webmcp.on(toolsadded, event { for (const tool of event.tools) { console.log(New tool added: ${tool.name}); } }); // Listen for removed tools page.webmcp.on(toolsremoved, event { for (const tool of event.tools) { console.log(Tool removed: ${tool.name}); } });toolsadded/toolsremoved事件的负载是一个tools数组WebMCPToolsAddedEvent、WebMCPToolsRemovedEvent。一个需要注意的边界工具注册归属于页面上下文。仓库测试 webmcp.test.ts 验证了——整页导航再次page.goto到其他页面会触发toolsremoved并使page.webmcp.tools()变回空列表而同文档导航如仅改 hash不会清空已注册的工具。如果你的自动化流程中会频繁跳转发现逻辑要按「每次导航后重新检查」来写。执行工具并判断结果对发现到的工具调用execute(input, options)第一个参数是匹配该工具inputSchema的输入对象返回一个 Promiseresolve 为WebMCPToolCallResult见 WebMCPTool.executeconst tools page.webmcp.tools(); const tool tools.find(t t.name calculate_sum); if (tool) { const result await tool.execute({a: 5, b: 10}); if (result.status Completed) { console.log(Result:, result.output); } else { console.error(Error:, result.errorText); } }判断结果时主要看WebMCPToolCallResult的几个字段见 WebMCPToolCallResult APIstatus调用状态如Completed、Canceled、Erroroutputstatus为Completed时的工具输出其他状态下不存在errorText错误文本exception如果工具执行的 JavaScript 抛出异常这里携带异常对象call对应的WebMCPToolCall含id、input、tool可用id把一次调用和它的响应关联起来。仓库测试里有一条可直接参照的成功用例注册一个execute: ({text}) hello text的工具后执行tool.execute({text: world})返回status为Completed、output为hello world且errorText与exception均为 undefined。这就是本文场景的验证标准execute的 Promise resolve 后result.status Completed且result.output与页面内execute函数的返回值一致即整条链路跑通。取消执行中的工具execute的第二个参数options.signal接收一个AbortSignal用于取消进行中的执行见 WebMCPToolExecuteOptionsconst controller new AbortController(); // Cancel execution after 2 seconds setTimeout(() { controller.abort(); }, 2000); const result await tool.execute( {query: large data processing}, {signal: controller.signal}, ); if (result.status Canceled) { console.log(Tool execution was canceled.); }测试验证了取消后的结果形态status为Canceledoutput不存在errorText为空字符串。如果传入的 signal 在调用前就已经 abort同样会得到Canceled结果。观测工具的调用与响应除了自己主动execute还可以监听页面或浏览器主动发起的调用page.webmcp.on(toolinvoked, call { console.log(Tool ${call.tool.name} was invoked with input:, call.input); }); page.webmcp.on(toolresponded, response { console.log( Tool ${response.call?.tool.name} responded with status: ${response.status}, ); if (response.status Completed) { console.log(Output:, response.output); } else if (response.status Canceled) { console.log(Invocation was canceled); } else { console.log(Error:, response.errorText); } });toolinvoked事件的负载是 WebMCPToolCall包含调用id、输入参数和被调用的工具对象toolresponded的负载就是上文提到的WebMCPToolCallResult。WebMCPTool对象本身也带toolinvoked事件可以只监听某一个工具的调用。限制与验证清单只支持 Chrome 151 的 CDP 模式且必须显式传--enable-featuresWebMCPAPI 为实验性质可能随版本变化Page API 中webmcp属性标注为 Experimental。WebMCP与WebMCPTool的构造函数均为内部实现不应直接new或继承统一通过page.webmcp获取。验证顺序可以按仓库测试的方式page.goto一个页面 → 注册工具 → 等待toolsadded→page.webmcp.tools()检查name/description/inputSchema→execute后断言status Completed和output值。完整用例可参考 test/src/cdp/webmcp.test.ts。更多细节见 docs/guides/webmcp.md 与 WebMCP API 文档。【免费下载链接】puppeteerJavaScript API for Chrome and Firefox项目地址: https://gitcode.com/GitHub_Trending/puppeteer1/puppeteer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考