New Countdown Timer——AI 全流程驱动的 Chrome 扩展开发实录

发表于 本文字数： 2.9k 阅读时长 ≈ 3 分钟

红茶中当以滇红最为馥郁，滇红中又以金芽最为鲜甜。

金芽红茶取自茶株芽头，通常一杯金芽的最佳饮用周期是前六泡，第 1-2 泡茶质未开，汤色偏白，醇浓中略带茶涩，仿佛人之青年；第 3-4 泡茶质舒展，汤色微红，口感香甜醇厚，仿佛人至中年，这也是一杯金芽的最佳饮用时期；第 5-6 泡茶质疏软，茶涩尽褪，口感柔滑中不失爽口，仿佛人之暮年。要得到金芽的最佳口感需要严格把控冲泡时间，水温以 85 度为宜，第一泡冲泡时间不能超过 7 秒，第二泡 14 秒，第三泡 30 秒，第四泡 1 分钟，第五泡 2 分钟，第六泡 5 分钟。因为金芽非常细嫩，冲泡过久容易损伤茶叶内质，茶汤会变得浓浊酸涩，而一旦冲泡时间过久，则整杯茶的生命周期将被破坏，基本就只能换茶重来了。

什么意思呢，就是说一个专注工作的人在上班时间是不可能喝好茶的。

我已经不知道多少次因为工作忘了时间而把茶泡坏，为了解决这个问题，我曾找到一个叫 “countDown timer” 的 chrome 扩展，可以一次预置多组倒计时，泡上茶后启动对应时间的倒计时，结束后就有声音和系统通知提醒，可以及时把我从 IDE 里拖出来。除了界面丑点，这个插件一度完美解决了我的问题，不过近期 chrome 安全策略更新，这个插件不符合新规被禁用了，那就找个替代品吧，结果整个 chrome 商店翻了一遍愣是没有第二个能满足需求的，我又回到了时常因为泡茶失败而懊恼的生活。

在一次又一次看着飘逸杯里的浓茶无能狂怒后，终于在昨天，我忍无可忍，决定复刻一个“New Countdown Timer”。

于是，我打开了 Cursor。

首先我需要一份需求文档。

让 AI 写需求文档也得自己先写个简要版本，但我懒得写，那就找一个包含基础功能的同类插件让 AI 自由发挥吧，于是我找到了这款：

竞品插件

把它的界面截图下来：

交给 AI：

我要开发一个 chrome 倒计时插件，功能如图，为我生成一份详尽的需求文档用于指导开发

AI 给了我这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

# Chrome倒计时插件需求文档

## 1. 项目概述

开发一个Chrome浏览器扩展，提供标签页倒计时功能。用户可以设置特定的时间，插件会进行倒计时并在浏览器工具栏显示剩余时间。

## 2. 功能需求

### 2.1 基础功能
- 用户可设置倒计时的小时和分钟
- 启动倒计时后在浏览器工具栏图标显示剩余时间
- 倒计时过程中可随时取消
- 倒计时结束时发出通知提醒用户

### 2.2 界面需求
- 弹出窗口包含标题"Tab Countdown Timer"
- 提供小时和分钟的输入框
- 提供"Start countdown"按钮开始计时
- 计时开始后显示"Cancel"按钮和剩余时间
- 插件图标在倒计时时动态显示剩余时间

### 2.3 交互需求
- 点击扩展图标打开设置弹窗
- 输入框应支持键盘输入和数字增减
- 倒计时过程中图标应每秒更新一次
- 倒计时结束时发出桌面通知

## 3. 技术规格

### 3.1 架构设计
- 符合Chrome扩展Manifest V3规范
- 使用Service Worker作为后台脚本
- 前端使用HTML/CSS/TypeScript实现
- 采用模块化设计，分离UI和业务逻辑

### 3.2 核心模块
- **弹出界面(Popup)**: 用户设置倒计时时间并启动
- **背景服务(Background)**: 管理倒计时逻辑和存储
- **图标管理(Icon)**: 动态更新工具栏图标显示

### 3.3 数据存储
- 使用chrome.storage.local存储倒计时设置和状态
- 保存上次设置的时间值，提高用户体验

### 3.4 通信机制
- 使用chrome.runtime.sendMessage实现组件间通信
- Background与Popup之间保持状态同步

## 4. 开发规范

### 4.1 文件结构

├── public/
│   ├── manifest.json
│   ├── icons/
│   │   ├── icon16.png
│   │   ├── icon48.png
│   │   ├── icon128.png
│   │   └── timer-template.svg
├── src/
│   ├── popup/
│   │   ├── popup.html
│   │   ├── popup.tsx
│   │   └── popup.css
│   ├── background/
│   │   └── service-worker.ts
│   ├── utils/
│   │   ├── timer.ts
│   │   ├── storage.ts
│   │   └── icon-generator.ts
│   └── types/
│       └── index.ts
├── package.json
├── tsconfig.json
└── webpack.config.js


### 4.2 代码规范
- 使用TypeScript强类型
- 遵循函数式编程模式
- 使用ESLint和Prettier保证代码质量
- 添加适当的注释和文档

## 5. 实现步骤

### 5.1 初始环境搭建
1. 创建项目基础结构
2. 配置TypeScript和Webpack
3. 设置基础manifest.json

### 5.2 功能开发顺序
1. 实现基本弹出界面
2. 开发计时器核心逻辑
3. 实现工具栏图标动态更新
4. 添加通知功能
5. 完善设置保存和恢复功能

### 5.3 测试策略
1. 单元测试各功能模块
2. 集成测试确保组件协同工作
3. 用户界面测试
4. 浏览器兼容性测试

## 6. 性能与安全考虑

### 6.1 性能优化
- 最小化后台脚本资源占用
- 使用requestAnimationFrame优化图标更新
- 合理设置检查间隔减少CPU占用

### 6.2 安全措施
- 实施内容安全策略(CSP)
- 权限最小化原则
- 安全处理用户输入

## 7. 发布计划

### 7.1 打包与部署
- 使用webpack生成生产环境构建
- 准备Chrome Web Store所需资源

### 7.2 版本规划
- v1.0: 基础倒计时功能
- v1.1: 添加自定义提示音
- v1.2: 支持多个同时运行的计时器
- v2.0: 添加定时任务功能

## 8. 维护与支持
- 建立错误日志和分析机制
- 制定用户反馈收集渠道
- 定期检查Chrome API更新以确保兼容性

## 9. 资源需求
- 开发人员: 1-2名前端开发
- 设计资源: 图标和界面设计
- 开发时间: 估计2-3周

## 10. 风险评估
- Chrome API政策变更可能影响功能
- 后台持续运行导致的电池消耗问题
- 跨浏览器兼容性挑战

实习生水平，凑合用吧。

然后做实施前的准备。

把前端技术栈改成 react，然后第 7 点往后的部分没用都删掉，把结果保存到一个 markdown 文件中，然后拿着这份文件让 AI 帮我做一下准备工作：

我要开发一个 chrome 倒计时插件，首先根据需求文档为我在当前文件夹初始化项目，然后梳理出需要准备的外部资料，比如设计素材、上架 chrome 插件商店的资料等

然后 AI 帮我初始化了一个类库都是两年前版本的前端项目，哎，手动升级一下，凑合用吧。

同时也给我列这样一份需求清单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
## 需要准备的外部资料
1. 设计素材
图标资源：
标准图标：16px、48px、128px（存放在public/icons/目录）
扩展图标模板（timer-template.svg）用于动态生成倒计时图标
商店宣传图：
商店详情页大图：1280 x 800 像素
商店缩略图：640 x 400 像素
商店小图标：128 x 128 像素
品牌设计元素：
配色方案（目前使用蓝色主题，可以根据需要调整）
字体选择（当前使用系统字体）
2. Chrome插件商店上架资料
基本信息：
插件名称：Tab Countdown Timer
简短描述（最多132字符）
详细描述（最多16,000字符）
分类选择（工具/生产力）
语言支持列表
法律文件：
隐私政策文档（说明插件如何处理用户数据）
服务条款（如适用）
媒体资源：
至少一张截图（1280 x 800 或 640 x 400）
宣传视频（可选）
宣传网站链接（可选）
开发者信息：
开发者/发布者名称
联系邮箱（公开展示）
支持网站链接（可选）
3. 其他资源
声音文件：
倒计时结束提醒音效（如需要）
国际化资源：
不同语言的翻译文件（如需支持多语言）
_locales目录下的消息文件
4. 测试资源
浏览器兼容性测试：兼容Chrome不同版本的测试计划
用户测试反馈表格或方案
最后，您需要支付Chrome Web Store开发者注册费（一次性支付5美元）才能发布插件。
以上资料准备齐全后，您就可以开始开发和测试插件，最终上传到Chrome Web Store进行发布。

大致看一遍，重点需要准备的是 logo 素材和提示音文件。

首先 logo，文生图方面还是 ChatGPT/Sora 最擅长，于是打开 ChatGPT：

设计一个用于倒计时的 logo，logo 的字母 c 是 countdown 的首字母，选择深绿色为主色调，因为作者的主要使用场景是泡茶的时候倒计时，防止长时间冲泡茶汤太浓。

然后就得到了这个：

icon

妈的，完美！

这个图距离正式可用就只差一个圆角，于是我下意识的打开了 Photoshop，接下来我将要画一个圆角矩形路径、将路径缩放到与图片一样大、将路径转换成选区、反选选区、删除选区内容、保存……好麻烦，犹豫片刻我关掉了 Photoshop，找了一个在线处理图片圆角的网站，顺便还能转换尺寸，点击下鼠标搞定。

我感觉自己被 AI 带坏了。

声音素材就简单了，从素材网站下载一个放到指定目录就行，当然，我特地选了一个倒茶的声音。

接下来开始开发。

来：

我已经把标准图标准备好了并放到指定目录下，现在完成这个项目的具体开发工作，如果过程中发现需要其他素材请告诉我

然后吭哧吭哧的

1
开发=>运行=>报错=>开发=>运行=>报错……

经过多轮调试后，我得到了一个具备倒计时基础功能的 chrome 扩展。

可以开始注入我的核心需求了：

更新需求文档，增加自定义定时器存储功能，可以让用户预先设置一系列定时器，每次启动插件展示定时器列表，可以快捷的启动列表中的一个定时器，每个定时器除了可以设置不同时间外还可以设置不同的声音和颜色，以便于区分

这一步 AI 给出的结果是不可用的，没有通过需求反推出需要增加的界面，以及界面间新的交互逻辑，即便 Claude 3.7 在项目达到一定完成度后，继续拔高式的提需求就会明显感觉理解力不足，其他模型就更不用提了，只能用做提词器，距离 agent 差很远。

于是从这里开始，我由全托管开发模式改为结对编程模式：

基于新的需求插件应该包含两个主要界面：1. 定时器列表；2. 创建/编辑定时器；检查需求文档各个部分确保符合新需求

终于，我得到了完全体的《Chrome 倒计时插件需求文档》。

扭头就拿着文档打开新会话：

需求文档补充了自定义定时器管理功能，根据更新后的文档完成项目迭代，仔细检查现有项目功能和文档之间的区别，完成升级开发

继续吭哧吭哧的

1
开发=>运行=>报错=>开发=>运行=>报错……

又经过多轮调试后，终于开发完成了。

history

开发完成，等待审核。

整个项目到现在总共用了 6~7 个小时就来到提交审核环节，审核资料也都是 AI 写的，效果很好，写命题短文这种事是目前 AI 最擅长的。

提交审核

放几个插件截图

回顾与总结。

这个项目算是全流程都由 AI 生成，包括需求文档编写、素材设计、代码开发、审核资料填写，就连本篇总结文章我都尝试让 AI 写，但试了几个模型效果都差得很远，可能是我的 prompt 不太行。

类似这种高度依赖 AI 完成的项目我还做过几个，比如写智能合约，写后端，这些都是我不具备的技术栈，但都借助 AI 顺利完成了。这在有的人眼里可能会觉得 AI 很神奇，仿佛一夜之间工程师失去了存在的必要，编程也好像变得有手就行。

但我作为从业十年多的开发者，却越来越觉得 AI 只是一种很好用的工具，像过去屡次出现过的那些好用工具一样，AI 只能加速某些进程，但它不是炼金术，并不能无中生有。

以我自身为例，我到现在也不知道怎样从零开始开发一个 chrome 扩展，如果没有 AI 我必须花很多时间去读开发文档，然后在实践中踩坑、试错，直到完全了解 chrome 扩展的每一个开发细节，然后我才算完全掌握了这项“技术”。

但这门技术本质上只是一种借助代码与 chrome 沟通的语言，跟现实世界一样，语言只是思想的载体，它并不重要，要开发一个 chrome 扩展真正重要的是了解什么是 chrome、chrome 与扩展的关系、扩展的能力边界，这些问题所蕴含的思想才是创造的必要条件，正是带着这些这些问题的答案，我才能驱使着 AI 到达那个我曾无数次到达过的终点。

技术语言作为抵达创造终点的一种途径，从理论上就不是必须的。实际上 AIGC 今天在做的事就是试图充当人与技术间的翻译官，让一切人与一切技术之间的语言隔阂不存在了，但从创造的角度，这几乎没有改变任何事，你本来能做的仍然能做，你本来不能做的还是不能做，仿佛我们有一辆可以自动驾驶的汽车，谁都可以驾驶它，但不是谁都知道目的地。

AI的价值是加速，但凡事都有代价，这加速的代价是什么呢？是停滞。如果只是依赖AI ，工程师会失去在实践中积累、沉淀的机会，从而阻断量变引发质变这个成长所必要的进程。仿佛苹果树开出了前所未有的茂盛花朵，但这花蕊中并没有花粉；而我们可以运用任何技术，却再也学不会任何技术了。

从这个角度看 AI 确实很像魔法，只不过是黑魔法，有所收获，也有所献祭。