使用Cursor辅助开发浏览器插件

文章目录[x]
  1. 1:背景
  2. 2:目前插件还存在的问题
  3. 3:使用Cursor的问题
  4. 4:总结

背景

    1.原来的博客中制作了一个AI助手,可以通过聊天的方式对某一篇博客进行问答,为了方便在博客中进行集成AI助手,前端使用的技术方案是在页面中通过iframe的方式进行嵌入,这样只需要在原来的页面中添加一行代码即可。
    2.最近一款叫cursor的AI辅助开发工具很火,一些媒体宣传只要通过简单的聊天对话在很短的时间内即可开发出一款程序产品,全程不需要手写一行代码。

看到非开发人员都可以使用Cursor进行程序开发,我也打算试试,于是我打算把原来嵌入到博客的AI助手在Cursor的帮助下改为Chrome浏览器的插件,这样就可以在任何页面下进行AI问答了。

使用的提示词

开发一个浏览器插件:
1.外观:
    1.页面右下角有一个悬浮按钮,按钮可以用鼠标拖动。
    2.鼠标点击按钮,弹出一个对话框,对话框为悬浮按钮的子节点,拖动按钮的时候对话框也跟随。
    3.对话框上部区域为聊天记录,聊天双方分别为Assistant和User,使用不同的风格来区分二者的内容。
    4.对话框下部区域为用户输入位置,有一个输入框用来接收用户输入的文字。
2.功能:
    1.在浏览器某一个tab页中首次打开对话框的时候,获取该tab页的url。
    2.聊天记录中默认有一条Assitant的消息,内容为“您好,有什么可以帮助您的?”。
    3.当用户在输入框输入内容后并且按下键盘的回车键时,把输入的内容以及url发送到服务器。
    4.服务器使用SSE返回消息,在聊天记录中流式显示服务器发送回来的内容。
具体过程就不细写了。下面是使用效果:
安装成功
安装后在所有打开的页面右下角有一个按钮,点击按钮出现对话框。
可以对当前页面内容进行提问

目前插件还存在的问题

    1.样式与页面的样式有冲突,打开某些页面时会出现样式不正确的情况。
    2.服务器使用SSE返回内容,不知道是什么原因导致聊天窗出现文字是一堆一堆的出现而不是一个字一个字的出现。
    3.一些网站的内容无法抓取、或者后台抓取的内容跟页面实际内容不符。

使用Cursor的问题

    1.不能自动识别项目的文件结构
    2.不能自动找到要修改的文件
    3.新的对话会导致之前以及描述过的内容丢失
    4.项目文件多的时候,如果修改了一个文件中的代码不能把相关的全部文件对应位置需要的内容进行修改
    5.不能识别图片,我花了一个简单的原型图,发现它没有识别,还得靠语言进行描述
    6.交互方式不好,对话时没有找到如何输入回车,导致我还得在外部的文本编辑器中编辑好内容,再粘贴进来。

总结

这是我第一次使用嵌入到IDE的编码类AI工具,对它有过高的期望,相比较浏览器窗口式的工具要方便很多,不需要再把代码文件进行手动上传了,但是对于一些复杂的问题处理不好,还是擅长写一些独立的功能模块。对于一些没有编程基础的人还是比较困难。
点赞

发表回复

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像(已失效)