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

背景

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

核心思想

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

材料准备

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

步骤

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

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

image1110×426 30.8 KB

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

   ecdf4f24-c2a7-4c06-80f0-e098605004771920×940 52.7 KB

    

3. 记录流程到 prd.md 中

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

4. 按 f12，打开浏览器控制台
   

   image1920×910 141 KB

    

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

   image1918×888 141 KB

    

6. 把光标移动到 「密码登录」 图标按钮上
   

   image1914×892 152 KB

    

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

   image1298×900 156 KB

    

9. 记录流程到 prd.md 中

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

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

    image1170×167 54.3 KB

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

image1252×652 149 KB

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

    image1457×599 39.9 KB

     

12. 记录流程到 prd.md 中

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

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

    image1918×888 141 KB

     

14. 鼠标移动到 「手机号/邮箱」 输入框上
    

    image1914×936 146 KB

     

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

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

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

    image1366×878 184 KB

     

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

    image1893×320 90.2 KB

     

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

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

image1280×336 51.9 KB

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

    image1918×888 141 KB

     

23. 鼠标移动到 「密码」 输入框上
    

    image1425×705 68.8 KB

     

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

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

image1265×380 53.6 KB

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

    image1297×703 153 KB

     

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

    image1279×601 108 KB

     

28. 光标聚焦到 「手机号/邮箱」 输入框，输入密码
29. 记录流程到 prd.md 中

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

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

    image1918×888 141 KB

     

31. 鼠标移动到 「登录」 按钮上
    

    image1298×892 104 KB

     

32. 点击鼠标左键，自动定位到 「登录」 按钮对应的 html 代码块
    

    image1336×568 81.6 KB

     

33. 记录流程到 prd.md 中

8. 定位 「登录」 按钮：

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

    image1295×617 145 KB

     

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

    image1282×381 60.6 KB

     

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

    image1624×523 41 KB

     

37. 记录流程到 prd.md 中

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

image1271×398 66.8 KB

38. 打开 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

     

39. 等待 codex 提示实现完成。
    

    image954×788 84.6 KB

     

40. 打开 chrome 浏览器，选择加载未打包的浏览器插件
    

    image543×712 49 KB
    

    image1911×187 18.4 KB

     

41. 选择项目目录，点击确定，完成加载

image1219×448 55.8 KB

image1894×447 69.8 KB

image442×662 35.5 KB

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

image1910×642 47.9 KB

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

    image495×637 51.8 KB

     

44. 观察插件工作情况，预期能够完成自动化登录过程。
    

    image1776×681 108 KB

     

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

    image827×194 18.5 KB

     

46. 等待 codex 修复完成
    

    image910×664 67.1 KB

     

47. 去扩展程序页面重载插件
    

    image1747×501 81.1 KB

     

48. 再次测试
    

    image495×637 51.8 KB

     

49. 观察到登录成功，本次浏览器自动化开发任务圆满成功
    

    image1727×787 52.3 KB