OpenCode Browser 扩展能做什么：与 Chrome DevTools MCP 的差异

Soulock
2026年06月20日
- 技术

两种方案的架构对比

OpenCode Browser（扩展方式）        Chrome DevTools MCP（CDP 方式）

OpenCode                             OpenCode
   ↓                                    ↓
Native Messaging                     MCP Server
   ↓                                    ↓
Chrome Extension                     Chrome DevTools Protocol (CDP)
   ↓                                    ↓
DOM / Tab 操作                       完整 DevTools 能力

OpenCode Browser 扩展连接方式更轻量，不需要打开 --remote-debugging-port，官方说明”No DevTools Protocol, no security prompts”。

OpenCode Browser 能做什么

能力	支持
导航（跳转 URL）	✅
点击元素	✅
输入文本	✅
获取页面 DOM / 文本	✅
截图	✅
读取 `<script>` 标签内容	✅
读取 `window.localStorage` / `sessionStorage`	取决于扩展实现
监听 Network 请求（XHR/fetch/WebSocket）	❌
设置 JS 断点	❌
查看 Webpack/闭包内变量	❌
Memory Snapshot / Performance Profile	❌
拦截/修改请求	❌

Chrome 扩展标准 API（chrome.scripting.executeScript）可以在页面上下文执行脚本，所以凡是挂在 window 上的对象（window.__NEXT_DATA__、window.__INITIAL_STATE__ 等）都可以读取。

但 webpack 闭包内的局部变量：

;(() => {
    const token = "abc123";   // ← 扩展拿不到这个
})();

无论是 OpenCode Browser 还是普通扩展都无法直接访问，必须通过 DevTools Protocol 的 Runtime.evaluate 或断点能力才能拿到。

什么时候用 Chrome DevTools MCP

如果目标是：

分析混淆 JS、逆向加密参数
Hook XHR / fetch / WebSocket 请求
查看 React/Vue 组件状态树
抓取动态签名、Token
设置断点、单步执行

应该改用支持 CDP 的 MCP 方案，例如通过 --remote-debugging-port=9222 启动 Chrome，再连接 CDP：

google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/debug-profile

然后 MCP Server 通过 WebSocket 连接 ws://localhost:9222 调用 CDP 接口。

CDP 可以做到：

Sources → 设置断点
Network → 查看所有请求/响应
Console → 执行任意 JS
Memory → Heap Snapshot

如果目标是指纹浏览器（Adspower 等）

OpenCode Browser 扩展控制 Chrome 不能隐藏浏览器指纹（Canvas、WebGL、TLS、WebRTC 等），这些由浏览器本身决定。

需要多账号防关联的场景通常走另一条路：

OpenCode / Playwright
   ↓
Adspower / MultiLogin 本地 API
   ↓
指纹浏览器实例

通过 Adspower 提供的 REST API 创建/启动指纹浏览器，再用 Playwright 连接其 CDP 端口操作页面。

小结

OpenCode Browser 扩展的定位是自动化操作真实浏览器（点击、填表、截图、爬内容），适合不需要深层 JS 调试的 RPA 和 AI Agent 场景。需要分析 JS 执行过程或拦截网络请求时，应切换到 CDP 方案。