用 Chrome 插件让 AI 控制网页

这案例干啥的

就是装个 Chrome 插件,让 AI 能"看到"你当前打开的网页,还能在上面点按钮、填表单。比 Playwright 更"真实",因为它就在你日常用的浏览器里干活。

相当于给 AI 装了双能操作你浏览器的手。

啥时候用

• 需要登录态的操作(Playwright 还得自己搞 cookie,插件直接用你浏览器的登录)
• 操作内部系统,Playwright 装不上证书之类的
• 想让 AI 帮你"看一眼这个页面"然后回答问题
• 自动化填表、抓数据,但页面需要真人登录

准备工作

• Chrome 浏览器
• 装好对应的 AI 控制 Chrome 插件
• Codex 能跟插件通信(看插件文档配好)
• 想清楚要操作哪个网页、干啥

怎么搞

第一步:装插件、配通信

按插件说明装好,确保 Codex 能调用插件的能力。一般插件会开个本地端口或者用 WebSocket 跟外部通信。

第二步:打开目标页面

在 Chrome 里正常打开你要操作的页面,登录好,确保页面是"操作就绪"状态。

第三步:告诉 Codex 干啥

比如:

我现在 Chrome 打开的是公司 OA 报销页面。帮我读取页面上的"本月待报销"列表,把每条的金额、事由、日期整理成表格,存到 ~/reports/expense-2026-08.csv 里。

第四步:AI 操作

Codex 通过插件:

1. 拿到当前页面的 DOM 结构
2. 解析出表格数据
3. 写到 CSV 文件

第五步:让 AI 帮你填表(可选)

反过来:

我 Chrome 打开的是个填表的页面。根据 ~/data/profile.json 里的信息,帮我把表单填了,别点提交,我自己检查后点。

第六步:验证

切到 Chrome 看,表单填好了没,数据对不对。

验证结果

• AI 能"看到"当前页面内容(读取正确)
• 操作(点击、填写)生效在页面上
• 没有误操作其他页面或者关闭标签
• 数据抓取/填写的内容跟预期一致

注意事项

提示

操作前先让 AI "描述下它看到的页面",确认它读的是对的页面、对的元素。AI 偶尔会搞混标签页。

注意

插件能控制你的浏览器,意味着能用你的登录态干任何事。务必装可信的插件,用完关掉插件权限。别让 AI 在你不知道的时候操作敏感页面(网银、支付)。

我的经验

我用这个最多的场景:公司内部系统又烂又难用,每次填表要点十几个按钮。让 AI 接管,我说"按这个模板填",它一路点过去填好,我只管最后提交。

还有个用法--让 AI"看着页面"回答我问题。比如"这个页面上,我这月总共待报销多少?",它读 DOM 直接算,比我自己算快。

下一步

• 跟 Playwright MCP 对比,看哪个场景用哪个
• 试试 DKFile 把抓的数据发布出去
• 配合 飞书 CLI 把抓的内容发群里