# 60 轮对话,28 个版本,我用 AI 做出了人生第一个 Chrome 插件(文末附插件)
**作者**: 撸猫不掉毛
**日期**: 2026-04-19T02:25:23.000Z
**来源**: [https://x.com/Moting284/status/2045690193546748083](https://x.com/Moting284/status/2045690193546748083)
---

我不会编程。
一行代码都不会写。
但我用 AI 做出了人生第一个 Chrome 插件。
60 轮对话,28 个版本迭代,从基础功能到梦幻悬浮导航。
这是完整实录。
## 为什么要做这个插件
问题很简单:
Gemini 对话太长,找不到之前说的话。
我需要一个目录导航,点击就能跳转。
市面上没有这个插件。
那就自己做。
## 第一步:直接说需求
我打开 Gemini,直接说需求:
「我想要一个 AI 对话目录导航插件,可以自动保存消息。」
它给了我一个网页演示版本。
我说:「怎么变成真正的插件?」
它给了我三个文件:
- manifest.json(配置文件)
- content.js(功能代码)
- styles.css(样式文件)
我复制,粘贴,保存。
打开 Chrome 扩展程序管理页面,点「加载已解压的扩展程序」,选择文件夹。
插件加载成功。
刷新 Gemini 页面。
什么都没发生。
## 第一个坑:我不会创建代码文件
Gemini 说:「创建三个文件,把代码复制进去。」
听起来很简单。
但我不知道怎么创建 .json 文件。
我在桌面新建文本文档,改名 manifest.json。
打开 Chrome 扩展页面,加载文件夹。
没有显示插件。
我截图发给 Gemini。
它说:「你的文件后缀名可能还是 .txt,要在文件夹选项里显示扩展名。」
我照做。
果然,文件名是 manifest.json.txt。
删掉 .txt,重新加载。
这次插件出现了。
## 第二个坑:manifest.json 格式错误
插件加载成功,但有红色报错。
点开一看:「Invalid URL pattern」。
我把报错截图发给 Gemini。
它说:「你复制代码时,URL 部分被自动转成了 Markdown 链接格式。」
我检查 manifest.json,果然:
"matches": ["[https://gemini.google.com/*](https://gemini.google.com/*)"]
应该是:
"matches": ["https://gemini.google.com/*"]
我改完,重新加载。
报错消失。
刷新 Gemini 页面。
还是什么都没发生。
## 第三个坑:文件编码问题
我又截图发给 Gemini。
它说:「可能是文件编码问题,用记事本另存为,选择 UTF-8 编码。」
我照做。
这次成功了。
左侧出现了一个黑色侧边栏,里面是对话目录。
点击标题,页面自动跳转到对应位置。
能用了。
但很丑,就是一堆蓝色链接堆在左上角。
## 从能用到好看:60 轮迭代
插件能用了。
但我不满意。
我想要梦幻、高级、不打扰的悬浮导航。
接下来的 60 轮对话,都在优化体验和视觉。
v1.0 - v5.0:基础功能(第 1-15 轮)
我说:「侧边栏遮挡视线,能不能做成悬浮窗?」
Gemini 给了新代码。
悬浮窗出现了,可以拖拽。
我说:「能不能折叠和调整大小?」
它又给了新代码。
这个阶段很快,每次改动都能立刻看到效果。
但有个问题:我想最小化成一个悬浮球,但一直失败。
我说:「最小化没有变成紫色悬浮球,请检查。」
Gemini 说:「CSS 的 min-width 限制了缩小。」
我改了,还是不行。
我说:「还是不行!到底能不能行呀?」
Gemini 说:「别担心,我们一定能搞定。」
它又给了新方案。
还是不行。
v6.0 - v15.0:视觉升级(第 16-35 轮)
我说:「换个思路,鼠标悬停自动展开,离开 5 秒自动收起。」
Gemini 说:「这是个非常棒的自动化交互思路!」
它给了新代码。
这次成功了。
但我说:「设计没有之前高级了,帮我调整审美。」
Gemini 说:「我们来打造科技感与玻璃质感并存的顶级艺术品。」
它给了梦幻极光玻璃拟态风格。
我说:「梦幻风没了,有个小 bug,鼠标停在目录上会闪。」
Gemini 说:「闪烁是因为鼠标移动触发了重复的展开/收起事件。」
它修复了。
我说:「最小化图标不要高亮,中间改成小猫头。」
Gemini 给了猫头图标。
我说:「小猫太丑了,一点也不像猫,展示你顶级设计师的水平。」
Gemini 说:「没问题,我们来升级这只猫咪。」
它给了新的 SVG 猫头。
还是很丑。
我说:「算了,改成爱心吧。」
这个阶段最花时间,每个颜色都要调。
我不断跟 Gemini 说:
「不够梦幻」
「渐变太生硬」
「图标不够精致」
它每次都给新方案,我测试,再反馈。
v16.0 - v23.0:交互优化(第 36-50 轮)
我说:「最小化后要一颗白色半透明的爱心。」
Gemini 改了。
我说:「外圈不要荧光高光,要柔和一些。」
它又改了。
我说:「恢复紫色渐变,只是标题框轮廓改成粉色。」
改完我又说:「算了,不改粉色了,恢复版本 14.0。」
Gemini 说:「明白了,您想要恢复到 v14.0 版本的柔光磨砂珠悬浮球。」
我说:「最小化后的圆球改成粉色渐变,与整体风格一致。」
Gemini 说:「没问题,我明白您的需求。」
改完我又说:「你理解错了,只是最小化悬浮球修改,其余不变。」
这个阶段最考验耐心,bug 一个接一个。
有时候改了一个地方,另一个地方就坏了。
但每次报错,Gemini 都能定位问题,给出修复方案。
v24.0 - v28.0:细节打磨(第 51-60 轮)
我说:「标题框和选项框风格保持一致。」
Gemini 改了。
我说:「悬浮球直径和标题框宽度一致。」
它又改了。
我说:「完整版缩小到最小化不够丝滑,展开时标题也会闪。」
Gemini 说:「这是因为过渡动画没有覆盖所有属性。」
它修复了。
我说:「底部文字改成『keep your spirit free』。」
最终版本:半透明粉色渐变悬浮球,鼠标悬停展开,离开自动收起。
丝滑,梦幻,不打扰。
## 三个关键认知
1. AI 不是一次性给答案,而是陪你迭代
60 轮对话,28 个版本。
每次我说「不行」「不好看」「有 bug」,AI 都会给新方案。
这个过程不是「AI 帮你做」,而是「AI 陪你做」。
你不需要一次性把需求说清楚。
你只需要知道当前版本哪里不满意,然后告诉它。
2. 你不需要懂代码,但需要知道自己要什么
我不知道 manifest_version 是什么。
不知道 document_idle 是什么。
不知道 backdrop-filter 是什么。
但我知道我要「梦幻风格」「悬浮球」「自动收起」「粉色渐变」。
AI 负责实现,我负责判断好不好。
这就像你不需要懂建筑学,也能告诉设计师你想要落地窗和开放式厨房。
3. 做产品的门槛不是技术,是审美和耐心
从 v1.0 到 v28.0,技术难度没变。
变的是视觉和交互。
大部分时间不是在修 bug,而是在调颜色、改图标、优化动画。
这些都不需要编程能力。
只需要你知道什么是好的,以及你愿意迭代 60 轮。
很多人在 v5.0 就停了,因为「能用了」。
但「能用」和「好用」之间,差了 55 轮对话。
## 最后
这个插件现在就在我的 Chrome 里运行。
它只能用在 Gemini 对话页面(https://gemini.google.com/*),因为代码是专门为这个场景写的。
它不完美,但它是我的。
AI 时代,技术不再是门槛。
真正的门槛是:
你知不知道自己要什么。
以及你愿不愿意迭代 60 轮。
## 附:完整插件代码(v29.0 最终版)
如果你也想试试,这是完整的三个文件。
在桌面新建文件夹 GeminiNav,创建以下三个文件:
安装方法
打开 Chrome,输入 chrome://extensions
打开右上角「开发者模式」
点击「加载已解压的扩展程序」
选择 GeminiNav 文件夹
打开 Gemini 页面,刷新
右上角会出现粉色悬浮球,鼠标悬停自动展开。
AI 不是魔法,是工具。
你只需要知道自己要什么,然后告诉它。
## 相关链接
- [撸猫不掉毛](https://x.com/Moting284)
- [@Moting284](https://x.com/Moting284)
- [1.8K](https://x.com/Moting284/status/2045690193546748083/analytics)
- [https://gemini.google.com/](https://gemini.google.com/)
- [https://gemini.google.com/](https://gemini.google.com/)
- [https://gemini.google.com/](https://gemini.google.com/)
- [https://gemini.google.com/](https://gemini.google.com/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [10:25 AM · Apr 19, 2026](https://x.com/Moting284/status/2045690193546748083)
- [1,879 Views](https://x.com/Moting284/status/2045690193546748083/analytics)
- [View quotes](https://x.com/Moting284/status/2045690193546748083/quotes)
---
*导出时间: 2026/4/19 13:26:11*