给 Gemini 装上“透视眼”：我如何用 AI 手搓了一个 DeepSeek 风格的侧边导航插件
💡 起因：长对话的“迷路”困境
作为一名重度 AI 用户，我每天都在 Google Gemini 上进行大量的长文本对话。无论是写代码、分析文档还是头脑风暴，一个 Session 往往会拖得很长。
这时候，DeepSeek 的 UI 设计给了我很大的触动。它的右侧有一个极简的 Minimap（缩略图导航）：平时只是一排低调的刻度，鼠标放上去就能看到所有提问的目录，点击即达。
反观 Gemini，虽然模型强大，但在长对话的导航体验上略显原始——想找前天问的第 3 个代码片段？请疯狂滚动滚轮吧。
“为什么不自己动手做一个呢？”
于是，我决定开发一个 Edge 扩展，把 DeepSeek 那个丝滑的侧边栏“移植”到 Gemini 上。有趣的是，这次开发的“结对编程”伙伴，正是 AI 自己。
🛠️ 从 0 到 1：逆向与 MVP
第一步：寻找“钩子”
Google 的网页通常使用了大量的混淆类名（比如 ng-star-inserted, jsaction），直接通过 CSS 选择器定位并不容易。
我首先利用 Chrome DevTools 也是配合 AI 进行“地毯式搜索”，最终锁定了用户的提问气泡容器：.user-query-container。这就像找到了迷宫的入口，只要拿到了这些元素，我就能提取出所有的提问文本。
第二步：MVP（最小可行性产品）
最初的版本非常简陋。我只是简单地把抓取到的标题列在了一个侧边栏里。虽然能用，但有两个大问题：
- 太丑了：像是一个贴在屏幕上的记事本，完全破坏了 Gemini 的美感。
- 数据重复：Gemini 的页面渲染机制会导致 DOM 中存在大量“隐形”的重复元素，导致目录里出现了重复的标题。
🎨 进化：打造 DeepSeek 风格 UI
为了追求极致的体验，我开始对 UI 进行大刀阔斧的改造。
1. 隐形刻度设计
我参考 DeepSeek，将侧边栏设计为**“平时隐形，悬停展开”**。
- 默认状态：屏幕右侧只有一排细小的灰色短横线（Marker），宽度仅 28px，完全不遮挡内容。
- 悬停状态：鼠标移入，面板平滑展开至 200px，显示提问的前 12 个字，并配有**毛玻璃（Frosted Glass）**特效。
2. 霓虹紫的“赛博”美学
在配色上，我经历了一番波折。最初我想用 CSS 变量自适应 Gemini 的主题，但发现 Google 的变量作用域限制较多。
为了确保视觉上的绝对清晰，我最终选择了一套**“暴力美学”**方案：
- Active 状态：无论背景是黑是白，当前激活的条目都会变成亮眼的霓虹紫 (#d946ef)，并带有发光呼吸效果（Glow Effect）。
- Dark Mode 适配：通过监听
body和html的类名变化，强制深色模式下背景变为深灰，文字变白，确保夜间使用不刺眼。
⚙️ 核心技术难点：如何让高亮“稳如老狗”？
在开发过程中，最让我头疼的是**“当前阅读位置的高亮同步”**。
方案 A：IntersectionObserver（失败）
最初我使用了交叉观察器。逻辑是：“当提问气泡进入屏幕，就点亮侧边栏”。
Bug：如果两个提问之间隔得太远（比如 AI 回复了一篇 5000 字的论文），屏幕中间会是一片空白。此时，上一个气泡出去了，下一个还没进来，侧边栏的高亮就会消失。
方案 B：霸道占位算法（成功）
我重写了逻辑，改为基于坐标的检测。
不再问“谁在屏幕里”，而是问**“我现在滚到了哪里”**。
- 设定一条基准线（屏幕顶部向下 30% 处）。
- 遍历所有提问，找到位于基准线之上且距离最近的那一个。
- 只要你没滚到下一个问题，上一个高亮就死死地钉在那里，绝不消失。
🎹 极客模式：Vim 风格键盘流
作为一个开发者，手离开键盘去摸鼠标是无法忍受的。于是我加入了键盘监听模块。
为了避免和 Gemini 原生的输入框冲突（比如方向键移动光标），我采用了 Vim 用户的肌肉记忆快捷键：
- **
Alt+J**：跳转到下一条 👇 - **
Alt+K**：跳转到上一条 👆
配合平滑滚动（Smooth Scrolling）和目标区域的紫色闪烁提示，现在的体验简直是指哪打哪。
🚀 最终功能清单
经过几个晚上的迭代，这个插件已经具备了以下完整能力：
- 自动目录生成：实时抓取对话，去重处理。
- 双向同步：点击跳转 + 滚动跟随。
- 智能主题：完美适配 Light/Dark 模式。
- 极致 UI：呼吸灯特效、毛玻璃背景、极简刻度。
- 键盘操控：无冲突的快捷键支持。
📝 结语
这个项目的开发过程，其实也是一次与 AI 深度协作的实验。从 DOM 分析到 CSS 动画，再到高亮算法的优化，AI 展现了惊人的辅助能力。
现在，我的 Gemini 终于拥有了 DeepSeek 那样优雅的导航体验。如果你也像我一样受困于长对话的翻页苦恼，不妨也尝试一下这个解决方案。
附：百度网盘链接
1 | |
解压后里面的README有使用说明
技术栈
- Vanilla JavaScript (无框架，纯原生)
- CSS3 (Animation, Flexbox, Backdrop-filter)
- Chrome Extension Manifest V3
Happy Coding!