我是longchao，用 AI 0 代码，生成了一个好玩的治愈系的谷歌浏览器插件。
如下图，这个插件会在浏览器上生成一个动态的小狗，点击小狗会弹出三个选项，可以选择笑话、励志名言、哲学语录、选择之后会在屏幕弹出对应的内容，为你枯燥的打工生涯添加一丝乐趣～
对话框里的内容都是随机的，由大模型生成，这篇文章就详细给大家介绍下实现过程，通过今天的文章你可以获得以下知识：
利用 Cursor 开发谷歌浏览器
插件中如何接入免费的大模型
如何利用动画库 lottiefiles
如何修复谷歌插件 bug
想直接要源代码的可以直接拉到文末。
一、想法来源
最开始我是询问 DeepSeek 后得到的想法
因为平时博主喜欢养一些猫猫狗狗，我就在想把一个动态的狗狗放在浏览器的角落，点击他选择笑话、励志言语或者哲学语录，这样平时对着电脑办公累了心情沮丧了看着狗狗，看个笑话是不是还不错？既然想法有了，接下来就是实践了。
二、寻找大模型生成笑话
我的想法是利用大模型的 API 来生成语录，这样就不会出现重复的语录，既然要选择大模型，那我们就要利用免费的大模型 API，这里博主利用的 openrouter.ai 这里面有许多的免费大模型 API 供我们使用，因为生成笑话这种任务对于大模型太简单，所以我们完全能找到免费的 API。
二）注册登录
这里可以直接选择 github、谷歌账号来登录，
没有也可以选择其他邮箱进行注册后登录
二）选择模型
登录完成后点击右上角的 Model 去选择大模型
来到 Models 列表页面输入 Free，可以看到有许多免费的模型供我们选择，我们选择第一个 DeepSeek V3 0324 模型
三）获取 APIkey
APIkey 是我们代码和大模型沟通的凭证，来到 Model 页面后点击 API
点击 Creat API key 去到创建 key 的页面
再次点击 Creat
输入 key 的名称，第二个输入框意思是输入 key 的请求次数限制，输入 100 意思是这个 key 用 100 次后就失效了，如果留空白意思无限次数，输入完毕点击 Creat
你的 key 就出来了，这里一定记得点击把 key 复制下来，这里不复制以后就看不见了
这里得到 key 后先存在某处，我们接下来去写写代码
三、完成项目初始化
一）创建文件
接下来我们利用 Cursor 来完成项目的编写，像这样的简单项目，我们只需要把我们的需求描述清楚就行了，先去磁盘里创建一个文件夹，
创建完毕后使用 Curosr 打开，点击 Open，找到刚创建文件的位置
二）项目需求整理
需要有张图片，我需要在屏幕上展示一个动物，这个动物是张图片，那需要先有个文件夹放一张图片，点击创建一个文件夹，名字叫 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
四）生成项目
把提示词发送过去后就可以等待代码生成了，生成完毕后点击 Accpet
可以看到插件代码生成完毕，接下来让我们去试一试插件效果，这里 Curosr 也给出了插件的使用方法。
四、谷歌导入插件
一）打开谷歌浏览器
二）插件管理
在网址栏输入 chrome://extensions/，进入插件管理页面后打开右边的开发者模式
三）导入插件
接着直接把代码文件夹拖进来
四）使用插件
随便在哪个网页 F5 刷新一下，不要在插件管理页面刷新，接着我的页面左下方就出现了我的头像，点击可以弹出选择
随便选一个点击，显示正在生成中
最后会在页面中间显示
到此，我们这个插件的基本功能就基本实现了！
完了吗？没完，还记得我最开始的想法吗，我想的是有一条动态的小狗在那里，接下来就让我们来优化样式吧！
五、样式美化
一）方法咨询
现在我们把想法告诉 AI，去找到样式美化的建议，我们新开一个对话，这里有两个注意的点，我们可以把现在的效果图截图下来丢给他，并且把上一个对话的内容作为上下文给 AI，选择上一轮对话的方法，点击 Add context，选择这里的 Past Chats 就可以找上一个对话内容
这里模式选择 ask 模式，因为是询问，不要选择 agent 把文件给修改了，发送以下提示词：
就可以看到 AI 给了我代码和建议，还有我需要准备的文件
这里我看到 AI 要让我准备几张图片，我觉得和我需求不同，如果是几张图片的话效果就是间断的状态展示，我注意到他说可以使用 Lottie 动画库，于是我觉得去这里看看有没有满足需求的。
二）Lottie 使用方法
注册 Lottie：https://lottiefiles.com/
点击右上方的 Sign up
搜索 Dog 动画，登录后我们在这里右上方的搜索框输入 Dog
输入以后直接回车，不要点击 Go to Dashboard，来到动画页面，这里我们选择 Free
下载动画，接下来就找找喜欢的狗狗动画吧，我一眼就相中那个在那蹦迪的小狗
点击小狗来到展示页面
点击 Get asset link 进入详情页面，这里右边那一块东西指的是可以通过代码形式展示出来
但我注意到右上方有个 DownLoad 下载，我点击 DownLoad 后发现可以下载 gif 图
我想 gif 的形式更简单一点呀，难得去写代码了，于是点击 GIF 就可以直接下载了
三）修改悬浮球样式
把下载好的 GIF 图放入我们的 images 文件，输入提示词，这里选择 Agent 模式
代码生成后我们来到插件管理页面，点击一下刷新就可以了
在除了插件管理页面的其他页面，F5 刷新一下，就得到了一只在屏幕上蹦迪的小狗，这里我发现点击狗狗没有反应，说明出了 BUG。
如果大家在开发过程中遇到这样的情况不要慌，给大家说一说如何如解决 BUG。
按下 F12 打开控制台，我们点击控制台。
一般出错了这里都会显示错误信息，我们把错误信息复制到 Cursor，让他帮我们解决就行
复制发送过去
代码修改完后再回来试试，成功弹出
四）美化笑话展示框
但是笑话的展示框还是之前的样式，我们继续让 Cursor 修改展示框的样式。
把样式图发给 Cursor，发送提示词
修改完毕后记得去插件页面刷新一下，我们再点击点击，展示框的样式就变成了这样
至此！我们的笑话生成器第一版生成完毕！记得把项目中的 key 替换成自己申请的 key 才可以使用哟。