保姆级教程，用Cursor开发谷歌浏览器插件

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

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

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

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

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

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

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

我的想法是利用大模型的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的页面

cursor 教程

再次点击Creat

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

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

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

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

3.3生成项目

把提示词发送过去后就可以等待代码生成了，生成完毕后点击Accpet

可以看到插件代码生成完毕，接下来让我们去试一试插件效果，这里Curosr也给出了插件的使用方法

4.1打开谷歌浏览器

4.2插件管理

在网址栏输入chrome://extensions/，进入插件管理页面后打开右边的开发者模式

4.3导入插件

接着直接把代码文件夹拖进来

4.4使用插件

然后随便在哪个网页F5刷新一下，不要在插件管理页面刷新，接着我的页面左下方就出现了我的头像，点击可以弹出选择

随便选一个点击，显示正在生成中

最后会在页面中间显示

到此，我们这个插件的基本功能就基本实现了！

完了吗？没完，还记得我最开始的想法吗，我想的是有一条动态的小狗在那里，接下来就让我们来优化样式吧！

5.1方法咨询

现在我们把想法告诉AI，去找到样式美化的建议，我们新开一个对话，这里有两个注意的点，我们可以把现在的效果图截图下来丢给他，并且把上一个对话的内容作为上下文给AI,选择上一轮对话的方法，点击Add context,选择这里的Past Chats就可以找上一个对话内容

然后这里模式选择ask模式，因为是询问，不要选择agent把文件给修改了，发送以下提示词：

然后就可以看到AI给了我代码和建议，还有我需要准备的文件

这里我看到AI要让我准备几张图片，我觉得和我需求不同，如果是几张图片的话效果就是间断的状态展示，然后我注意到他说可以使用Lottie动画库，于是我觉得去这里看看有没有满足需求的。

5.2Lottie使用方法

注册Lottie

lottiefiles.com/

来到首页

点击右上方的Sign up

搜索Dog动画

登录后我们在这里右上方的搜索框输入Dog

输入以后直接回车，不要点击Go to Dashboard,来到动画页面，这里我们选择Free

下载动画

接下来就找找喜欢的狗狗动画吧,我一眼就相中那个在那蹦迪的小狗

然后点击小狗来到展示页面

点击Get asset link进入详情页面，这里右边那一块东西指的是可以通过代码形式展示出来

但我注意到右上方有个DownLoad下载，我点击DownLoad后发现可以下载gif图

我想gif的形式更简单一点呀，难得去写代码了，于是点击GIF就可以直接下载了

5.3修改悬浮球样式

Cursor修改样式

把下载好的GIF图放入我们的images文件，输入提示词，这里选择Agent模式

刷新插件

代码生成后我们来到插件管理页面，点击一下刷新就可以了

然后在除了插件管理页面的其他页面，F5刷新一下，然后就得到了一只在屏幕上蹦迪的小狗,这里我发现点击狗狗没有反应，说明出了BUG，

解决BUG

如果大家在开发过程中遇到这样的情况不要慌，给大家说一说如何如解决BUG

按下F12打开控制台，我们点击控制台

一般出错了这里都会显示错误信息，我们把错误信息复制到Cursor，让他帮我们解决就行

复制发送过去

代码修改完后再回来试试，成功弹出

5.4美化笑话展示框

但是笑话的展示框还是之前的样式，我们继续让Cursor修改展示框的样式

把样式图发给Cursor,发送提示词

修改完毕后记得去插件页面刷新一下，然后我们再点击点击，展示框的样式就变成了这样

至此！我们的笑话生成器第一版生成完毕！我也把项目代码放到了Github上，有需要的朋友自取就行

github.com/lixiangAiCo…

记得把项目中的key替换成自己申请的key才可以使用哟，有什么建议、功能的延伸点都可以在Github上给我留言