我用Cursor开发的第一个Chrome插件

cursor Develop my first Chrome plugin

Posted by shake on September 2, 2024

今天真的记得纪念一下,是我第一次开发软件,并且做出来的软件,还是非常有实战价值的。下面就记录一下过程。

AI辅助编程,甚至AI直接编程,最近都是比较热门,媒体很多时候都是在无脑吹,到底AI写代码到了什么程度呢? 这个确实是需要研究一下,因为孩子日后是否需要学编程这件事情上,做一个验证。

目前最热门的AI编程组合是:Cursor+Claude,这个Cursor内部已经集成,并且可以免费用2周。所以我就利用这个机会来一次体验,看看真实版本一行代码不写,是否可以完成一个不错的软件。

其实我是看了油管的视频,有博主分享他的开发过程,整个过程排错,确是没人都不太相同。那么我也来一次,看看效果如何。

我对Cursor没做任何设置,指定了一个空目录,作为这次开发的代码存放地方。

提示词

你是一个经验丰富的chrome扩展程序的开发者。请帮我开发一个chrome 扩展来帮助用户快速阅读网页内容。 交互如下:

1.点击应用图标,会弹出一个窗口,上方左边是一个可以选择语言的下拉框(包括“简体中文”,“English”两个选项),默认选择是”简体中文”。右边是”总结”按钮。下方显示提示:请点击”总结”按钮开始总结当前页面内容,如果切换成English,提示也会自动切换为英文提示,同时,”总结”按钮也会显示为”Summarize”.

2.总结的过程以streaminq的方式显示,提升用户等待结果的用户体验,总结的过程中”总结”按钮显示为disable状态。总线过程中,窗口大小要自动延伸以确保总结内容能完全显示。

3.总结完成后,”总结”按钮变为enable状态(绿色),重新总结时会替换原有的总结内容。

4.窗口关闭后重新打开时要清空上次内容。

5.请在代码中包含自定义程序图标的内容,我会按照你的要求提供图标文件。

6.在这个应用中,我们将通过调用openai模型上的来进行信息的处理,请提供一个“选项”的菜单,让用户输入api key。

请根据以上要求帮我写出该程序的完整代码,chrome插件可以直接访问OpenAI的api。

这时候Cursor就会生成多个代码片段,告诉你需要生成几个文件。这个时候,在Powershell下,如何创建文件。

ni popup.js

Curcor提供命令行界面,进入到那个空文件夹下,用ni命令创建相关的文件就可以。

选择相关的文件,点击代码,apply,–accept。 确实方便很多。

还需要提供3个图标,阿里开源图标库

图标文件放在 icons 文件夹中,并命名为 icon16.png, icon48.png, icon128.png。

这样基本第一次版本的迭代就完成。

出现了各种错误,基本都是这个问题导致。

openai的api url是:https://api.openai.com/v1/chat/completions, 需要指定模型版本:gpt-4o-mini

解决掉这个问题,插件就可以工作,其实算是非常顺利。

优化

  • 让总结都是中文
  • 输出markdown的格式总结,遇到marked.min.js 本地加载的问题,需要我提供链接解决。
  • 支持多个厂商的大模型,api地址,api key,和模型名字。默认生成页面很难看,就说优化一下页面就很不错。
  • 安全保障,再次打开,就无法看到api key。

总结

  • 完成代码的细节,还是需要人类改进,这些很难一次提示词提出
  • AI很强的学习能力,遇到自己无法解决的问题,发送链接,马上就读懂内容,更改代码。

study