前言
在前两星期,小明在看英文文档时候,发现他现在用的翻译插件不是很符合小明的需求。选一大段话进行翻译的时候,直接翻译一大段话,小明想要的效果是翻译的时候,把一大段话切分成句,每一句和对应的英文摆在一起,这样逐句对应更加清晰,可以顺便学习一下英语。
之后就让cursor帮他写了一个浏览器插件,墙裂推荐可以用一下 chromewebstore.google.com/detail/%E9%…
效果如下
这个插件的大体思路就是和background通信,让background帮我们发请求到百度翻译那边,大概就是这么个情况。今天想分享的是如何让cursor再已有项目上一顿修改帮我们迭代功能,主要也是之前让cursor写这个插件时候没记录,现在没得分享了,所以就从迭代优化这部分开始分享吧!
今天小明心血来潮,想好好学习英语,在看文章的时候,把不会的句子,或者单词记录下来,每周拿出来复习一次,这样每周就可以学到新的单词了。所以新需求就是把翻译的东西保存到生词本。优化开始,冲!
优化过程
向cursor提出整体要求
现在这个插件需要新增一个记录功能
- 我画词翻译弹窗的时候,需要多加一个保存按钮,中英文以及时间都需要保存
- 将保存的内容存到indexDB
- 之后帮我做一个插件的html页面,我可以通过popup点击复习生词跳转过去
- 该页面按时间帮我列出单词和中文,每一项都有一个小眼睛的按钮,点击按钮后出现中文,好让我复习
之后刷新浏览器插件一看,没效果
终于有效果了
生词本的调试
跟cursor说看不到入口,cursor改完右边就有个查看生词本的按钮了
打开生词本页面报错了
又报错了
页面终于显示出来了
保存功能到indexDB的调试
点击保存没生效
后面自己打开网页一看,数据直接保存在当前页面的indexDB了
功能终于实现了
界面有点丑,但功能能用了,保存成功了,而且有小眼睛可以显示翻译结果
美化一下界面
稍微勉强能凑合,好看了少许,就这样吧
删除功能
再优化一下保存按钮
现在保存按钮只有在鼠标悬浮上去时候才出现
总结
通过cursor的一顿操作,很快就帮我们把插件迭代完成了,如果觉得这个插件有用的小伙伴可以安装一下 chromewebstore.google.com/detail/%E9%…
源代码在github.com/jackeryjam/… ,有啥功能需要继续实现的欢迎拿去继续找cursor迭代一下
最后推荐一下小明的另一次cursor探索之旅,用Cursor打造股票数据分析页面, 借助cursor从0到1打造一个程序