前阵子在做几款线上产品的调研,需要对技术选型、服务报价、限制条款等因素做多维度的横向比较和分析。这些信息往往散落在多个网页上,得把它们一页页读完,再整理成一张可以横向对比的表。
这类工作最适合交给本机的 AI Agent 去做。我平时用 Claude Code 和 Codex,改代码、写脚本都很顺。
真正卡住我的是一件很小的事:它看不到我浏览器里已经打开的那十几个标签页,也不知道我在这些页面中实际的访问/操作状态。
为此我试过三条路,但各自均有不小短板:
| 方案 | 复用真实浏览器 | 对话入口 | 跨页操作 |
|---|---|---|---|
| Playwright / CDP | ✗ 另起干净浏览器,登录态与表单带不过去 | 终端或脚本 | 需自行编排流程 |
| 各家官方插件 | ✓ | 编辑器侧边 | 受插件能力限制,且绑定自家模型 |
| Browser MCP | ✓ | 终端 | 每打开一个页面都要补一条指令 |
三条路都能走通,但都极不顺手。归根到底,它们都止步于一个问题:Agent 缺的不是智能,而是对用户浏览上下文的感知与还原。
想清楚之后,我把两者的关系倒了过来:不让 Agent 去够浏览器,而是让浏览器把当前访问的网页信息和状态交给 Agent。
做法是让浏览器当客户端、本机 Agent 当执行器。浏览器把 “用户在看什么” 主动塞给 Agent,让 Agent 结合这个信息来决定下一步做什么。为了让 Agent 更丝滑地操作网页,浏览器也需要未 Agent 提供一系列的工具。
基于这个思路,在 AI 的加持下,我落地了一个开源的浏览器插件:OpenSider
基于这个插件,原来的很多需要在浏览器网页和 Agent UI 来回跳转的工作变得相当简单(只需要在浏览器中直接给 Agent 下达指令,Agent 便能跟你在同一个浏览器上下文工作),Agent 操作网页的能力也大大提升(通过插件提供的 API,Agent 可以在已加载的多个网页间跳转、切换来执行任务,不需要每次工具调用都冷启一个浏览器窗口或标签)。
下面分五个部分介绍这个插件的主要构成:
一、产品形态
插件安装并开启后,浏览器侧边栏中可选择本地已安装的 Agent(CLI) 进行聊天(所有支持 ACP 协议的 Agent 均可连接,如 Claude Code CLI、Github Copilot CLI、OpenCode CLI 等等)。
插件的本质是一个连接层:通过 ChatUI 让用户可以直接与本地 Agent 对话,同时将浏览器状态信息实时同步到会话的上下文中,让 Agent 与用户看到 “同一套页面”。
二、使用方式
插件的使用仅需三步:
- 安装插件(给你正在使用的 Agent 发送安装提示词);
- 启动插件以连接本地 Agent;
- 在 ChatUI 中直接与 Agent 对话。
仍以最初的那次产品调研为例,我在浏览器侧边栏里输入:
「帮我把 A/B/C 这几家产品的定价页都看一遍,出一张横向对比的表格。」
Agent 会自动切到对应标签页,读取定价、套餐等信息,生成对比表并输出结果。整个过程不需要复制链接、切换终端,也不需要重新登录页面。
三、主要功能
- 复用真实浏览器状态: 站点的用户身份(登录态)、填写的表单状态都会保留复用,不需要重新还原现场。
- 就地开始协同: 当前在哪个页面,Agent 就结合这个页面的信息工作。也可以拾取网页元素进行提问。
- 网页自动化: 页面跳转、读取、点击、填表、截图等操作作为工具注入给 Agent,自动化操作在网页中实时呈现(模拟鼠标点击、键盘输入等)。
- Agent和模型均可自由切换: 支持一键切换 Agent/模型,同一会话中也可使用不同的 Agent,不受终端工具束缚。
- 数据、产物均存本地: 会话数据、Agent 产物内容均保存在本地,可以重复使用。
四、技术原理
核心方案: 基于 Chrome Native Messaging Host 实现浏览器与本地 Agent 的桥接:侧边栏连接时启动,断开时退出,进程不常驻。这层 Host 通过 ACP 协议拉起你选择的 CLI,并把网页自动化工具经由同一连接暴露给 Agent。全程不需要额外的后台服务。
插件和页面之间的通信也没有定义新协议,而是直接基于文件通信。一轮完整的交互流程:
- 插件将浏览器标签页等信息写入工作区下的多个文件
- Agent 实时读取这些文件,掌握页面内容和可操作控件
- Agent 需要操作页面时,向 commands/ 目录写入指令
- 插件执行指令,把结果写回 results/
对 Agent 而言,操作一个网页和读写一个文件没有本质区别。
五、安装 OpenSider
为了兼顾不同平台(MacOS/Windows/Linux等系统)和具体的运行环境,OpenSider 没有将安装工具固化为发布产物,而是提供了一个线上 Skill 和一系列的工具脚本(含二进制文件)给 Agent。
仅需将一段安装提示词发给你常用的 Agent 应用,便可在 Agent 的操作引导下完成插件的安装:
帮我安装 OpenSider 浏览器扩展。
请先读取 https://raw.githubusercontent.com/parksben/opensider/main/skills/opensider/SKILL.md,按其安装流程执行。
更多信息
关于该项目的详细信息,请移步 Github 仓库:github.com/parksben/op…
欢迎安装体验并提供反馈,帮助我持续完善这个工具。给一个 Star 便是对该项目的莫大支持,恳谢!
思路巧妙:把“Agent 去够浏览器”反转为“浏览器主动喂上下文”,解决了登录态与多标签页复用的痛点。适合做跨页调研、信息比对等需要真实浏览器环境的场景,值得一试。