opencode-browser 插件
opencode-browser 插件
参考来源：https://github.com/different-ai/opencode-browser、https://www.npmjs.com/package/@different-ai/opencode-browser
1. 它是什么
@different-ai/opencode-browser 是一个给 OpenCode 用的浏览器自动化插件。它不是新起一个干净浏览器，而是直接控制你正在使用的 Chromium 浏览器（如 Chrome、Edge、Brave、Arc），因此可以复用现有登录状态、Cookie、书签和本地会话。
它的核心目标是：让 OpenCode 直接操作你真实浏览器里的真实页面。
2. 适合解决什么问题
这个插件特别适合下面几类场景：
- 让 AI 直接在你已登录的网站里点页面、查信息、做验证
- 调试前端页面时，复用你当前浏览器状态，不必重新登录
- 自动化执行一些低频但重复的网页操作
- 在真实用户环境下验证页面行为，而不是在新开的无状态浏览器里验证
和 Playwright 这类工具相比，它更偏向“复用真实浏览器环境”，而不是“启动新的自动化浏览器实例”。
3. 核心特点
3.1 直接控制真实浏览器
支持以下 Chromium 内核浏览器：
- Chrome
- Edge
- Brave
- Arc
- Chromium
3.2 复用现有用户态数据
它会直接使用你当前浏览器配置，因此通常可以直接继承：
- 登录态
- Cookie
- 本地存储
- 书签
- 已打开标签页上下文
3.3 不依赖 DevTools Remote Debugging
项目说明里明确强调：
- No MCP
- No WebSocket port
- No DevTools Protocol
这意味着它绕开了传统浏览器自动化常见的一些问题，比如：
- 远程调试端口冲突
- Chrome 新版本对默认 Profile 的调试限制
- 每次启动都弹安全提示
3.4 基于 Native Messaging 架构
底层通信链路为：
OpenCode Plugin <-> Local Broker <-> Native Host <-> Chrome Extension
这样做的好处是：
- 本地通信更稳定
- 不需要额外暴露调试端口
- 更适合多会话管理
3.5 支持多会话与标签页所有权
项目里还有一个很重要的设计：per-tab ownership（每标签页所有权）。
简单理解就是：
- 不同 OpenCode 会话可以并行使用浏览器
- 但同一个标签页会有归属关系
- 可以减少多个会话同时抢同一个 tab 导致的混乱
4. 安装前提
安装前建议先确认以下条件：
- 已安装 OpenCode
- 已安装 Node.js（建议 18+）
- 本机有 Chromium 内核浏览器
- 允许手动加载浏览器扩展
如果你在 Windows 下使用，通常建议直接用管理员权限或确保用户目录具备写入权限，避免扩展目录或 Native Host 清单落地失败。
5. 安装方法
官方推荐安装命令：
bunx @different-ai/opencode-browser@latest install
也可以用：
npx @different-ai/opencode-browser@latest install
5.1 安装过程会做什么
安装器通常会自动完成这些动作：
- 把浏览器扩展复制到本地目录
- 引导你去
chrome://extensions加载扩展 - 解析固定扩展 ID
- 安装 Native Messaging Host manifest
- 自动更新
opencode.json或opencode.jsonc
5.2 OpenCode 配置示例
如果安装器没帮你自动写入，也可以手动加到 OpenCode 配置里：
{
"$schema": "https://opencode.ai/config.json",
"plugin": ["@different-ai/opencode-browser"]
}
6. 使用方法
安装完成并重启 OpenCode 后，就可以把它当成浏览器能力来使用。
6.1 常见用法示例
示例 1：打开网页并查看内容
打开 GitHub 首页，并帮我查看 trending 页面前 5 个项目。
示例 2：使用已登录状态操作页面
打开我的控制台页面，检查最近一个报表是否生成成功。
示例 3：验证前端页面
打开本地前端页面，点击登录按钮，检查是否有报错。
示例 4：做真实浏览器环境下的交互验证
进入订单页面，筛选今天的数据，并告诉我列表里前 10 条记录。
7. 调试与命令行工具
这个插件还提供了 CLI 方式直接调工具，适合调试。
7.1 查看可用工具
npx @different-ai/opencode-browser tools
7.2 查看浏览器状态
npx @different-ai/opencode-browser tool browser_status
7.3 查询页面文本
npx @different-ai/opencode-browser tool browser_query --args '{"mode":"page_text"}'
这类命令适合排查：
- 扩展是否接通
- Native Host 是否正常
- 当前浏览器上下文是否可被 OpenCode 访问
8. 更新与卸载
8.1 更新
bunx @different-ai/opencode-browser@latest update
或：
npx @different-ai/opencode-browser@latest update
8.2 卸载
npx @different-ai/opencode-browser uninstall
卸载后还建议手动确认两件事：
- 浏览器扩展已从
chrome://extensions移除 opencode.json中的插件条目已删除
9. 常见问题
9.1 为什么它和 Playwright 不一样
因为它不是拉起一个新的自动化浏览器，而是直接控制你当前真实在用的浏览器。优点是更贴近真实使用环境，缺点是更依赖你的本地浏览器状态。
9.2 为什么它适合已登录页面
因为它直接复用现有 Profile，所以登录态通常天然可用。
9.3 为什么说它没有 DevTools 安全提示
因为它的实现路线不是常见的远程调试端口方式，而是浏览器扩展 + Native Messaging。
9.4 如果浏览器没反应怎么办
建议按这个顺序排查：
- 扩展是否已加载
- Native Host 是否已安装成功
- OpenCode 配置里是否已启用插件
- 用
browser_status直接检查连接状态
10. 什么时候适合用它
如果你的需求是下面这类，opencode-browser 很适合：
- 需要复用真实登录态
- 需要在真实浏览器中检查前端页面
- 需要 AI 替你执行一些网页操作
- 不想处理 DevTools 调试端口和安全提示
如果你的需求更偏向：
- 完全自动化测试
- 干净环境回归测试
- CI/CD 无头执行
那更适合 Playwright / Puppeteer 一类方案。
11. 总结
一句话概括：
@different-ai/opencode-browser的价值，不是“让 OpenCode 能开浏览器”，而是“让 OpenCode 能直接操作你正在使用的真实浏览器”。
它最适合的场景，就是那些依赖真实登录态、真实页面环境、真实标签上下文的网页操作与验证工作。
如果你平时已经在用 OpenCode 做前端调试、网页检查、后台系统巡检，这个插件会非常实用。