很多人问过我同一个问题：
「OA系统太老太烂，审批要看几十个字段，有没有什么办法让AI帮忙做判断？」
我做了一个，给他们看。
花了一天时间，做了一件事：给任意OA/ERP审批系统装上一个AI助手，不改系统、不找IT、不需要任何后端接口。
点一下插件图标，右侧滑出面板，AI自动读取页面信息，5秒内给你一份分析报告——风险在哪、金额对不对、建议批还是不批。
这篇文章记录整个过程，以及一份完整的安装指南，让你也能照着装上。
一、为什么要做这个
先说问题本质。
审批效率低，表面上是系统界面烂，实际上是 信息理解成本太高。
一个报价审批单，里面可能同时包含：采购金额、历史价格对比、供应商评级、预算余额、审批权限规定……
审批人要在30秒内做判断，但信息散落在七八十个字段里，没有人帮你做摘要。
这个问题在绝大多数企业都存在，不分行业，不分系统新旧。
现有的解法通常有两种：
方案A：改系统。 找IT、写需求、排期、开发、测试、上线——快的话三个月，慢的话不知道。
方案B：RPA机器人。 贵、配置复杂、维护成本高，一旦页面改版就得重新配。
我想要的是第三种： 不动系统，直接在浏览器层加一个AI层。
这条路走得通，而且比想象中简单。
二、做了什么，技术上是怎么跑的
整个系统由三个部分组成：
第一层：Chrome 插件（浏览器侧）
负责读取页面、呈现对话。点击图标，页面向左移动，右侧滑入一个 AI 面板，iPhone 侧滑的感觉。
面板做了几个核心能力：
1 自动读取页面信息：打开面板即自动扫描当前页面的所有表单字段、审批记录、审批意见，无需手动操作。
2 四层降级兜底：DOM解析→全选复制→视觉截图识别→标准接口，任何一层失败自动降级，确保数据一定能读到。
3 流式输出对话：AI 回答逐行出现，不会让用户盯着空白等10秒。
4 支持文件上传：可以直接拖入合同、附件，AI 结合页面信息一起分析。
5 Skill 技能系统：针对不同业务（报价审批、合同审核、费用报销）可以加载不同的分析逻辑，用 Markdown 文件管理，业务人员自己就能改。
第二层：本地桥接服务（bridge.py）
一个轻量的 Python HTTP 服务，运行在本地 39876 端口。
插件无法直接调用本地大模型，必须通过这个桥接服务中转。
它做三件事：接收插件请求 → 调用 AI 引擎 → 把结果流式推给插件。
关键点： 全程本地运行，数据不上云。审批数据是敏感信息，不适合发到第三方接口。
第三层：Qoder CLI（AI引擎）
这是实际执行推理的大模型引擎，在本机上运行，已登录账号。
桥接服务调用它，它回答，答案通过 SSE 流式协议实时推回插件面板。
三、开发过程中踩的坑（给技术同学看）
如果你也想自己开发类似的东西，这几个坑必须提前知道。
坑1：Chrome MV3 的 async callback 陷阱
插件用 Manifest V3，消息监听里如果用了 async 关键字包裹回调， return true 会失效， sendResponse 通道被 Chrome 直接关掉。结果就是——"注入读取中"转圈，永远不出来。
解法：改为纯 callback 链，同步 return true，里面嵌套异步操作。
坑2：有 default_popup 时 onClicked 不触发
manifest 配置了 default_popup，点击图标只会弹窗， action.onClicked 永远不响应。想做侧边栏必须移除 default_popup。
坑3：communicate() 导致伪流式
原本用 proc.communicate(timeout=120) 等待 CLI 全部输出完再分段发送，用户看到的效果是等8秒、然后全部跳出来——这根本不是流式。改成 iter(readline) + bufsize=1 逐行推送，才是真正的流式。
四、安装指南（非技术同学照做即可）
整个安装分三步，大约需要 10 分钟。
前置条件
开始之前，确认你电脑上已经安装了：
✅ Python 3.8+ ✅ Chrome 浏览器 ✅ Qoder CLI（已登录）
验证 Python：打开终端，输入 python3 --version，能看到版本号即可。
验证 Qoder CLI：终端输入 qodercli status，显示已登录账号即可。
第一步：解压安装包
向我索取安装包（文末说明），解压到任意位置，推荐放到桌面或固定目录：
解压后目录结构如下：
第二步：启动本地桥接服务
Mac 用户：
cd chmod +x start_bridge.sh ./start_bridge.sh
双击运行 start_bridge.bat
看到以下输出，说明启动成功：
[bridge] 启动成功，监听 http://localhost:39876
⚠️ 注意：桥接服务窗口不能关闭，它需要一直在后台运行。每次使用插件前先确认它在跑。
第三步：加载 Chrome 插件
1 打开 Chrome，地址栏输入 chrome://extensions/ 按回车
2 右上角打开「 开发者模式 」开关
3 点击「 加载已解压的扩展程序 」
4 选择 ai-approval-assistant 文件夹（注意：选文件夹，不是zip文件）
5 扩展列表出现「AI 审批助手」，说明加载成功
第四步：使用
1 打开你的 OA 审批页面
2 点击浏览器右上角的「AI 审批助手」图标
3 右侧面板滑入，自动读取页面信息（底部状态栏显示「已读取」）
4 在顶部选择对应的「Skill」（如：报价审批分析），点击发送或直接提问
5 AI 开始流式输出分析结果，逐行出现，支持
五、常见问题
六、如何自定义 Skill
Skill 是这套系统最值钱的部分。
它决定了 AI 用什么逻辑分析你的审批单。
每个 Skill 是一个 Markdown 文件，放在 skills/ 目录下，例如：
skills/报价审批分析.md skills/合同审核.md skills/费用报销.md
文件里写清楚：这个场景要关注哪些字段、什么情况要预警、输出格式是什么。
业务同学可以自己改，不需要懂代码。
改完之后，在插件设置抽屉里点「刷新 Skill 列表」就生效，不需要重启任何东西。
七、获取安装包
安装包不公开发布，找我单独要。
原因是这套东西目前还处于快速迭代阶段，版本更新比较频繁，统一管理更方便维护。
给我发消息说「我要安装包」，附上你的使用场景，我会回复你。
如果你在企业里有批量部署的需求，或者想针对特定业务场景定制 Skill，也可以直接聊。
本文所有技术实现均基于本地运行，数据不上传任何云端。
——詹老师