这已经是前几个月前的事情了,一直懒得写,今天晚上终于有时间就抽空写一下。
事情是这样的,我哥想要我帮他开发一个软件,他想要的功能是能批量下载 coverbox 网站的图片。coverbox 是一个在线的图片库,提供了很多高质量的图片,他一般的操作是搜索某个关键词,然后手动下载每一张图片,这个过程非常繁琐。因为搜索的结果是一个列表,要想下载高分辨率的图片,需要点击列表中的每一张图片,然后使用浏览器的右键去一个个下载。
初探 Tauri 的坑
最初我的想法是使用 Tauri 去开发一个傻瓜式的桌面应用,这样一键安装完就可以使用了。但是我使用的是最新的 Tauri 2.0,Claude 3.5 的知识库恐怕还没有更新到这个版本,开发了一半发现 AI 不太行,因为这里涉及多个 webview 通信的问题,并且 tauri 多 webview 功能本来就是实验性功能,虽然给 AI 看了文档,但是还是很麻烦,AI 搞来搞去越搞越乱,浪费了我几个小时。
不好意思,我似乎标题党了?不是说好了 20 分钟吗?哈哈哈,下面才是正题。
Chrome 插件开发之旅
本来这个功能很简单,不管是使用 Chrome 插件,还是 Electron 桌面应用,都是可以实现的,但是我最初还是想顺便测试一下 Cursor 的能力,想看看它能不能帮我快速完成这个功能。很明显,对于缺少训练的知识库,AI 的能力是有限的。于是我就放弃了 tauri 的开发,转而使用 Cursor 来开发一个 Chrome 插件。
这样就简单多了,我只需要给 AI 提供一个简单的需求描述,然后让它帮我生成代码。这里需要注意,我是在非常清楚整个 Chrome 插件开发逻辑的情况下写的提示词,于是我在 Cursor 中创建了一个新的项目,写了一些提示词,从头到尾我一句代码都没有修改。
初始提示词
创建一个chrome插件,可以实现以下功能:
1. 点击插件icon后打开页面http://coverbox.henry-hu.com
2. 页面打开后,通过注入的脚本,在页面右上角加上一个控制面板,背景显示为白色,在面板上加上一个输入框表示需要下载的图片的数量,然后添加一个开始下载的按钮,点击按钮后,软件获取当前页面的所有图片链接,然后在控制台打印出来,面板要可以拖动
3. 在控制面板上加上一个设置文件目录的地方,默认为CoverBox
开发过程中对 Cursor 的提问:
- 保存目录 输入框的边框颜色改一下
- 只获取.result-list下面的.list下的img标签的地址,将album-name作为图片名字,生成一个键值对数组,然后打印出来
- 将名字内的- Single替换为空字符串然后去掉前尾空格,将链接内的200x200bb.jpg替换为3000x3000bb.jpg
- 将获取到的数据一个个下载到本地,然后给控制面板加上一个下载进度条
- 下载图片改成使用chrome扩展的下载API实现,实现静默下载
- 现在下载会弹出对话框,能否不弹出,并且将文件都保存在一个相同的目录
- 如何修改Chrome总是询问保存位置的设置?将关闭这个开关的说明放到控制面板上告诉用户如何操作,chrome://settings/downloads 链接也要放到说明中
- 我要项目发布到github,帮我写一份readme介绍怎么使用,帮我生成readme.md文件
- 帮我给github项目写一份描述,一句话介绍,包含中英文
成果与体验
我统计了一下时间,最终耗时差不多也就20分钟左右,不仅完成了插件还帮我写好了 README 文件,还是中英文同时存在的。
真是太棒了!当然最终我哥也很满意。
整个过程非常的丝滑,AI大模型的能力让我大吃一惊,整体上是非常高效的。相比于我之前使用 tauri 的尝试,这次使用 Cursor 开发 Chrome 插件的体验要好得多。
如果你也有类似的需求,或者想要尝试使用 AI 来开发 Chrome 插件,我强烈推荐你去试试。它的 AI 编程能力真的很强大,能够帮助你快速实现功能,节省大量的时间。
很多人会说 AI 编程这么强大,程序员是不是要失业了?我想说,这怎么可能,手握屠龙刀只会让懂代码的人能力更强,以前一秒一刀,现在是一秒十刀。
我的 AI 工具使用心得
最后说一下我日常经常使用的 AI 工具的习惯:
日常代码编写
一般我主力使用 VS Code Copilot 来写代码,在 Copilot 刚上线的时候,我就已经开始付费使用了,每年100刀我觉得是很值的。以前主要是代码补全,付费用户所有模型都可以免费不限量使用,所以一般也可以拿来当 ChatGPT 来使用,解决一些简单的编程问题。
一般我是不会在真正的线上业务代码里面让 Cursor 这种工具胡乱修改的,这种还是风险很大,并且修改面积太大,diff 起来反而很费力。
小功能和脚本开发
如果是一些小的功能,或者是一些脚本类的代码,或者是一些我不太熟悉的编程语言,比如 Rust,比如量化交易策略,我可能会使用 Cursor 来快速生成代码。不过现在 Cursor 太贵了,我主要使用 Windsurf 来替代 Cursor,Windsurf 基本上能力和 Cursor 差不多,但是价格便宜很多。
模型选择
我之前使用的主力模型是 Claude 3.5,后来使用过一段时间 3.7 版本,感觉变化不大。现在主要使用谷歌的 Gemini 2.5 Pro,使用下来这个应该是稳定性最强的,并且写代码是很喜欢给你写好注释,我用 Windsurf 的时候,基本上都是使用 Gemini 2.5 Pro 模型。
自从今年 AI 编程模型能力大增之后,我就立马拿来优化我之前开发的交易策略,主要好处不仅仅是帮你写代码,还可以帮你优化策略的收益,AI 能够帮你找到一些你没有想到的新的思路,并且拥有所有学科的知识,真的是非常爽。
OK,今天就写到这里吧,后面有新的 AI 编程体验再来分享。
Chrome 插件的 GitHub 项目地址:https://github.com/udbmnm/coverbox-download