作者分享了利用 AI (Gemini) 开发一款番茄钟 Chrome 扩展程序的经历。最初尝试用简单的书签脚本实现，但因功能限制和频繁出错而放弃。最终，作者决定制作一个完整的扩展程序，虽然过程充满反复的调试与修正，但成功打造出一款功能稳定的工具。这个番茄钟不仅支持自定义时间、颜色和图标，还具备任务记录、数据导出和统计图表等高级功能。
从简单的想法到更复杂的挑战
作者最初的目标是制作一个极简的番茄钟，即把代码粘贴到浏览器书签中就能直接使用的版本。
- 初步尝试: 制作一个简单的书签脚本，点击后在页面上显示一个25分钟的倒计时器。
- 遇到的问题: 由于代码长度限制，这个简单的版本频繁失效。此外，它功能单一，无法自定义时间，并且在切换页面后需要重新启动。
明明本來是因為懶惰，不想花太多時間，結果反而因為做成書籤版本一直跑不出來，浪費了更多時間呢⋯⋯
正因为这些限制，作者最终决定转向开发一个功能更完善的 Chrome 扩展程序。
开发 Chrome 扩展程序的核心步骤
根据 Gemini 的指导，开发一个扩展程序主要需要准备三个核心文件，并将它们加载到 Chrome 中。
核心文件:
manifest.json: 定义扩展程序的权限和基本信息，相当于程序的“身份证”。popup.html: 用户点击扩展程序图标时看到的界面。popup.js: 控制计时、数据存储等所有功能的逻辑代码。
安装方法:
- 在 Chrome 网址栏输入
chrome://extensions/进入扩展程序页面。 - 打开右上角的 “开发者模式”。
- 点击“加载拆解封装的扩展功能”，选择存放上述文件的文件夹。
- 将新出现的扩展程序图标钉选到工具栏。
- 在 Chrome 网址栏输入
反复的调试与功能完善
将初始版本加载到浏览器后，开发过程进入了“错误、修正、再出错”的无限循环。
- 遇到的主要问题包括：
- 暂停按钮在第二次点击后无反应。
- 已创建的任务书签无法删除。
- 计时器的小图标无法拖动。
- 设置好的图片无法正常显示。
- 倒计时完成后，提醒通知只在一个页面弹出。
- 修改一个问题后，导致原本正常的功能出现新问题。
在修复这些问题的同时，作者还根据需求增加了新功能，如 数据图表（圆饼图和长条图）和 数据导出 功能。
最终成品的样貌与功能
经过反复测试和修改，一个功能相对稳定的版本诞生了。
自定义设置:
- 可以自由设定 工作时间 和 休息时间。
- 可以为不同的任务（书签）设置不同的 边框颜色。
- 支持通过图片网址更换 自定义图标。
核心功能:
- 任务记录: 完成一个番茄钟后，会弹出窗口提示输入任务记录。
- 数据统计: 内置长条图和圆饼图，直观展示专注时间分布。
- 数据导出: 可以将所有专注记录导出为 CSV 文件。
- 数据管理: 支持一键清除所有历史数据。
作者表示，虽然还有一些想加入的功能，但为了避免引入新问题，决定暂时停止继续开发。目前计划将文件上传至云端，供有兴趣的用户测试并提供反馈。