关于如何使用 codex 实现浏览器自动化插件，以 codex 为例-白嫖中分享网

使用 codex 完成一个简单的浏览器自动化插件实践记录

背景

现在 ai agent 让编写浏览器插件这件事情变得异常简单，让我们可以从重复的页面操作中解放出来，比如一些自动化测试，自动化填表等等。但是很多刚接触 ai agent 的朋友没有这方面的经验，不知道从何入手。本文就以实验报告的形式，一步步完成一个简单的浏览器自动化 ai agent，抛砖引玉，希望对刚刚接触这块的朋友有所启发。哪里有不足也欢迎指正。

核心思想

把人在页面上的每一个操作都记录到「流程文档」中（定位元素，点击元素，输入内容等），并且记录下关键元素的 html 块（为代码复现操作提供依据。）。形成文档之后，拿给 ai agent 转化成一个浏览器插件项目。

材料准备

一个准备自动化的网站，这里以 deepseek 网页为例：https://chat.deepseek.com/
一个空的文档，用来记录自动化流程
一个浏览器，用来打开网页和分析摘抄关键 html 内容，测试阶段还将用来安装插件和测试功能。
一个 ai agent，这里以 codex 为例。（大家也可以自行选择顺手的 ai agent）
一个目录，用来存放插件代码。我这里使用用户目录下的 projects/auto-deepseek

步骤

创建一个 prd.md 文档（txt 也可以，名字随意），随便存放在你能看到的位置，用一个你顺手的文档编辑器打开它，先把当前的目标写进去。比如：

# 产品说明书
## 目标
一个浏览器插件，用来自动化 deepseek 的登录以及发送请求
## 预期
用户在插件中输入用户名密码，可以自动登录 deepseek
## 插件页面设计
用户名输入框一个
密码输入框一个
开始按钮一个
## 插件流程

在浏览器打开目标网页：https://chat.deepseek.com/（如果是登录状态就退出一下）

ecdf4f24-c2a7-4c06-80f0-e098605004771920×940 52.7 KB
记录流程到 prd.md 中

1. 打开网址 https://chat.deepseek.com/ ，进入登录页面，等待页面加载完成

按 f12，打开浏览器控制台

image1920×910 141 KB
点击「检查」图标（或者使用 Ctrl+Shift+C 快捷键），切换光标到检查状态

image1918×888 141 KB
把光标移动到「密码登录」图标按钮上

image1914×892 152 KB
点击左键，底部的 html 代码会自动聚焦到元素对应的 html 代码块
右键点击该代码块，选择右键菜单中的「以 HTML 格式修改」

image1298×900 156 KB
记录流程到 prd.md 中

2. 定位 「密码登录」 图标按钮：

ctrl+A(全选), Ctrl+C(复制), 加入到流程说明文档 prd.md 中

image1170×167 54.3 KB

<button role="button" ..... </button>

点击「密码登录」图标按钮，可以观察到已经变成了密码登录

image1457×599 39.9 KB
记录流程到 prd.md 中

3. 点击 「密码登录」 图标按钮

光标切换检查状态：点击「检查」图标（或者使用 Ctrl+Shift+C 快捷键），切换光标到检查状态

image1918×888 141 KB
鼠标移动到「手机号/邮箱」输入框上

image1914×936 146 KB
点击鼠标左键，自动定位到「手机号/邮箱」对应的 html 代码块
记录流程到 prd.md 中

4. 定位 「手机号/邮箱」 输入框：

右键点击该代码块，选择右键菜单中的「以 HTML 格式修改」

image1366×878 184 KB
ctrl+A(全选), Ctrl+C(复制) 该代码块的内容，粘贴到 prd.md 中

image1893×320 90.2 KB
光标聚焦到「手机号/邮箱」输入框，输入用户名
记录流程到 prd.md 中

5. 输入用户在插件上提供的手机号/邮箱

光标切换检查状态：点击「检查」图标（或者使用 Ctrl+Shift+C 快捷键），切换光标到检查状态

image1918×888 141 KB
鼠标移动到「密码」输入框上

image1425×705 68.8 KB
点击鼠标左键，自动定位到「密码」对应的 html 代码块
记录流程到 prd.md 中

6. 定位 「密码」 输入框：

右键点击该代码块，选择右键菜单中的「以 HTML 格式修改」

image1297×703 153 KB
ctrl+A(全选), Ctrl+C(复制) 该代码块的内容，粘贴到 prd.md 中

image1279×601 108 KB
光标聚焦到「手机号/邮箱」输入框，输入密码
记录流程到 prd.md 中

7. 输入用户在插件上提供的密码

光标切换检查状态：点击「检查」图标（或者使用 Ctrl+Shift+C 快捷键），切换光标到检查状态

image1918×888 141 KB
鼠标移动到「登录」按钮上

image1298×892 104 KB
点击鼠标左键，自动定位到「登录」按钮对应的 html 代码块

image1336×568 81.6 KB
记录流程到 prd.md 中

8. 定位 「登录」 按钮：

右键点击该代码块，选择右键菜单中的「以 HTML 格式修改」

image1295×617 145 KB
ctrl+A(全选), Ctrl+C(复制) 该代码块的内容，粘贴到 prd.md 中

image1282×381 60.6 KB
点击「登录」按钮, 等待页面跳转完成，如果跳转到 https://chat.deepseek.com/页面，则表示登录成功。

image1624×523 41 KB
记录流程到 prd.md 中

9. 点击登录按钮，等待页面跳转，如果跳转到 https://chat.deepseek.com/页面，则表示登录成功。

打开 codex，选择创建好的代码目录，把 prd.md 上传上去，输入提示词：在当前项目目录下依据 prd.md 文档说明的流程实现 chrome 插件，【可选提示词】：如果登录成功，在页面上放个烟花动画（增加仪式感）

image433×352 38.2 KB

image805×464 62.7 KB

image1068×394 21.3 KB

image810×464 61.4 KB

image1071×769 21.2 KB
等待 codex 提示实现完成。

image954×788 84.6 KB
打开 chrome 浏览器，选择加载未打包的浏览器插件

image543×712 49 KB

image1911×187 18.4 KB
选择项目目录，点击确定，完成加载

42. 登出 deepseek，为测试做好准备

把用户名密码填写到浏览器插件中，点击开始按钮

image495×637 51.8 KB
观察插件工作情况，预期能够完成自动化登录过程。

image1776×681 108 KB
观察到没有一次性成功，不要气馁，这个是正常情况，把错误信息拿给 ai 进行修复即可（这里我把登录输入框的 html 又一次给了 ai，其实是可以考虑去页面上拿更多信息给到 ai，我这里是偷懒了）

image827×194 18.5 KB
等待 codex 修复完成

image910×664 67.1 KB
去扩展程序页面重载插件

image1747×501 81.1 KB
再次测试

image495×637 51.8 KB
观察到登录成功，本次浏览器自动化开发任务圆满成功

image1727×787 52.3 KB