github 地址： github.com/SunFei12345...
本次的开发借助的ai编辑器 是 trea， 借助的模型是gpt5
效果展示：
视频浏览
掘金文章阅读
背景
在浏览器一些文章的时候， 我们大部分都需要自己去滚动鼠标滑轮去往下看
在浏览视频的时候， 我们需要自己手动滚动浏览器查看想要点进去的视频封面。
比如我们在掘金看文章，我想要浏览器自己滚动，同时可以根据每个人的阅读速度，去调整滚动的速度。 这样就解放了双手。
亦或者在哔哩哔哩首页查看自己感兴趣的视频，我们就往下滑呀滑。 如果有这种自动滚动浏览器的插件我们就可以让页面自己滚动，找到感兴趣的视频， 我们就暂停点进去。
这虽然是一个小小的功能， 但是对我个人而言，感觉帮助还是蛮大的， 因为我也是因为这个困扰而想到开发这样的插件。虽然我没有去谷歌的扩展插件市场里面去搜索， 我想大概率是有这样的插件的。 不过目前有了ai， 开发的速度大大缩减，尤其是对于这种小工具/小项目/小插件的开发。 所以我更倾向自己借助ai去制作，不仅可以扩展自己的知识面，同时对于学习使用ai也是有帮助的。
需求设计阶段
我们需要将自己的需求和目的提出。让ai为我们准备好一个详细的prd文档，准备好之后我们再进行实施开发， 切记不要一上来就说我要开发一个xxx插件，请进行开发。 如果没有prd文档的约束， 后面大概率是返工修改等等。 所以在设计prd的时候我们就需要和ai进行沟通，包括哪些是需要的，哪些功能是不需要的， 实现的方式用什么，等等。
提示词：
我目前的需求是需要开发一个谷歌浏览器的插件， 主要用途就是 用户可以通过此插件， 自动滚动浏览器的屏幕， 同时支持调整滚动的速率， 支持暂停然后继续从当前暂停的位置继续滚动。 滚动到底部的时候，提示 并请求用户是否返回至顶部，或者重新滚动。 目前的需求是这样的。 我需要你设计出来一份详细的prd。 然后进行实施。
可见ai给出了一份详细的说明书，包括了
产品概述用户和场景功能范围包括了 必须实现的功能， 可选的实现功能， 应该添加的功能。交互和信息架构ui表现- ...等等
也就是说，ai把我们考虑到的，没考虑到的全部涵盖的，同时给了一个基础版本涵盖的功能以及中期和后期的版本建设规划。
在第二轮对话中，我主要就这份prd 进行修改。
方案细化阶段
"方案细化"这个阶段，是为了把已经达成共识的方向转化为一套可执行、可验证、可交付的具体计划，从而把不确定性降到最低、把返工成本降到最低、把执行效率提到最高。
- 目的（一句话） 将"做什么"和"怎么做"从概念层面落到文件、接口、状态与用例的细节层面，确保进入开发即刻可动手、少走弯路。
在这个阶段我们可以快读过一遍他给出的细化方案实施的每一步骤，如果有哪些不合适我们可以针对性的更改。这样大大减少了后期跟ai battle 的阶段。
方案实施阶段
紧接着就是根据细化方案去实施计划， 这时候我们可以全速驾驶让他根据细化方案去编写代码，这个过程也很快的。 然后编写完之后我们就可以快速去本地浏览器进行效果的验证， 
浏览器加载本地插件
加载扩展
- 打开 Chrome → 地址栏输入 chrome://extensions → 打开"开发者模式"。
- 点击"加载已解压的扩展程序"，选择文件夹：/Users/fl/Desktop/自动滚动浏览器插件开发。
验证
- 打卡哔哩哔哩 或者 掘金首页， 然后右上角启用扩展，点击开始就会自动滚动页面了。
使用说明
安装
- 打开 Chrome 浏览器，输入
chrome://extensions/ - 开启"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择插件文件夹即可
基本使用
悬浮面板
页面右下角会出现控制面板：
- 播放/停止：开始或停止自动滚动
- +/-：调节滚动速度
- 顶部：返回页面顶部
快捷键
Alt+S：启动/停止滚动Alt+P：暂停/恢复滚动Alt+↑：加速滚动Alt+↓：减速滚动
弹出窗口
点击浏览器工具栏的插件图标，可以：
- 控制滚动状态
- 精确调节速度
- 打开设置页面
设置选项
在设置页面可以：
- 调整默认滚动速度
- 开启/关闭悬浮面板
常见问题
- 悬浮面板不显示：刷新页面或重新加载插件
- 按钮无反应：检查插件权限，重新安装
- 滚动不流畅：调整速度到合适数值
提示：插件适用于阅读长文章、浏览社交媒体等场景。