保姆级教程，用Cursor开发谷歌浏览器插件大家好，我是李想，我用AI，0代码，生成了一个好玩的治愈系的谷歌浏览器插件

前言

大家好，我是李想，我用AI，0代码，生成了一个好玩的治愈系的谷歌浏览器插件

如下图，这个插件会在浏览器上生成一个动态的小狗，点击小狗会弹出三个选项，可以选择笑话、励志名言、哲学语录、选择之后会在屏幕弹出对应的内容，为你枯燥的打工生涯添加一丝乐趣~

对话框里的内容都是随机的，由大模型生成，这篇文章就详细给大家介绍下实现过程，通过今天的文章你可以获得以下知识：

利用Cursor开发谷歌浏览器
插件中如何接入免费的大模型
如何利用动画库lottiefiles
如何修复谷歌插件bug

想直接要源代码的可以直接拉到文末。

1.想法来源

最开始我是询问DeepSeek后得到的想法

因为平时博主喜欢养一些猫猫狗狗，我就在想把一个动态的狗狗放在浏览器的角落，然后点击他选择笑话、励志言语或者哲学语录，这样平时对着电脑办公累了心情沮丧了看着狗狗，看个笑话是不是还不错？既然想法有了，接下来就是实践了。

2.寻找大模型生成笑话

我的想法是利用大模型的API来生成语录，这样就不会出现重复的语录，既然要选择大模型，那我们就要利用免费的大模型API，这里博主利用的openrouter.ai这里面有许多的免费大模型API供我们使用，因为生成笑话这种任务对于大模型太简单，所以我们完全能找到免费的API

地址：openrouter.ai/

2.1注册登录

这里可以直接选择github、谷歌账号来登录，

没有也可以选择其他邮箱进行注册后登录

2.2选择模型

登录完成后点击右上角的Model去选择大模型

来到Models列表页面输入Free，可以看到有许多免费的模型供我们选择，我们选择第一个DeepSeek V3 0324模型

2.3获取APIkey

APIkey是我们代码和大模型沟通的凭证，来到Model页面后点击API

点击Creat API key去到创建key的页面

再次点击Creat

输入key的名称，第二个输入框意思是输入key的请求次数限制，输入100意思是这个key用100次后就失效了，如果留空白意思无限次数，输入完毕点击Creat

然后你的key就出来了，这里一定记得点击把key复制下来，这里不复制以后就看不见了

这里得到key后先存在某处，我们接下来去写写代码

3.完成项目初始化

3.1创建文件

接下来我们利用Cursor来完成项目的编写，像这样的简单项目，我们只需要把我们的需求描述清楚就行了，先去磁盘里创建一个文件夹，

创建完毕后使用Curosr打开，点击Open，找到刚创建文件的位置

3.2项目需求整理

需要有张图片

我需要在屏幕上展示一个动物，这个动物是张图片，那需要先有个文件夹放一张图片，点击创建一个文件夹，名字叫images

然后随便拖一张图片放入images文件夹里，这里最开始为了快速出功能，我随便找了张我的头像放进去，这里记得照片的文件名需要改成英文。

找到与大模型通信的示例给AI

我们之前有了大模型的APIkey,还需要给Cursor讲清楚如何使用这个key与请求大模型，回到我们刚才Open router的模型页面,点击API，然后点击Typescript，因为我们谷歌插件是用js写的，然后点击旁边的Copy复制按钮

接着我们回到我们的Cursor,创建一个md文件，文件名大模型请求示例

然后把内容复制过来，并且在最后一行把添加一下你刚创建的key

提示词整理

然后我们根据插件功能来整理提示词，这里大家可以参考我的直接用

帮我实现一个 Chrome 插件，核心功能是点击可以生成冷笑话、励志句子或者哲学语录，要求的功能如下： 1.插件以悬浮球的形式展示在页面侧边栏 2.点击悬浮按钮弹出三个选项：“冷笑话”、“励志句子”、“哲学语录” 3.向大模型发送相关请求，返回大模型的消息展示在页面 #注意无需使用图标使用V3版本的manifest.json 请注意中文的格式编码问题悬浮球的图片使用@avatar.png - 与大模型的请求方法参考@大模型请求示例.md

记得把图片和请求示例给拖进来，模式选择Agent,模型我就用的claude-3.7