Cursor:翻译插件进阶之旅

842 阅读3分钟

前言

在前两星期,小明在看英文文档时候,发现他现在用的翻译插件不是很符合小明的需求。选一大段话进行翻译的时候,直接翻译一大段话,小明想要的效果是翻译的时候,把一大段话切分成句,每一句和对应的英文摆在一起,这样逐句对应更加清晰,可以顺便学习一下英语。

之后就让cursor帮他写了一个浏览器插件,墙裂推荐可以用一下 chromewebstore.google.com/detail/%E9%…

效果如下

image.png

这个插件的大体思路就是和background通信,让background帮我们发请求到百度翻译那边,大概就是这么个情况。今天想分享的是如何让cursor再已有项目上一顿修改帮我们迭代功能,主要也是之前让cursor写这个插件时候没记录,现在没得分享了,所以就从迭代优化这部分开始分享吧!

今天小明心血来潮,想好好学习英语,在看文章的时候,把不会的句子,或者单词记录下来,每周拿出来复习一次,这样每周就可以学到新的单词了。所以新需求就是把翻译的东西保存到生词本。优化开始,冲!

优化过程

向cursor提出整体要求

现在这个插件需要新增一个记录功能

  1. 我画词翻译弹窗的时候,需要多加一个保存按钮,中英文以及时间都需要保存
  2. 将保存的内容存到indexDB
  3. 之后帮我做一个插件的html页面,我可以通过popup点击复习生词跳转过去
  4. 该页面按时间帮我列出单词和中文,每一项都有一个小眼睛的按钮,点击按钮后出现中文,好让我复习

image.png

之后刷新浏览器插件一看,没效果

image.png

终于有效果了

image.png

生词本的调试

跟cursor说看不到入口,cursor改完右边就有个查看生词本的按钮了

打开生词本页面报错了

又报错了

页面终于显示出来了

image.png

保存功能到indexDB的调试

点击保存没生效

后面自己打开网页一看,数据直接保存在当前页面的indexDB了

image.png

功能终于实现了

界面有点丑,但功能能用了,保存成功了,而且有小眼睛可以显示翻译结果

image.png

美化一下界面

稍微勉强能凑合,好看了少许,就这样吧

删除功能

image.png

再优化一下保存按钮

现在保存按钮只有在鼠标悬浮上去时候才出现

总结

通过cursor的一顿操作,很快就帮我们把插件迭代完成了,如果觉得这个插件有用的小伙伴可以安装一下 chromewebstore.google.com/detail/%E9%…

源代码在github.com/jackeryjam/… ,有啥功能需要继续实现的欢迎拿去继续找cursor迭代一下

最后推荐一下小明的另一次cursor探索之旅,用Cursor打造股票数据分析页面, 借助cursor从0到1打造一个程序