我用 Vibe Coding 做了一个 Chrome 插件:标签清,心自静

0 阅读5分钟

大家好,欢迎来到小撒的私房菜,我是小撒。

你现在开着多少个标签页?

30 个?50 个?还是更多——多到你根本不敢去数?

我以前也是这样。每次打开浏览器,密密麻麻一排 favicon,每个都缩到只剩一个小图标,压根不知道哪个是哪个。想找之前看过的某篇文章,翻了五分钟找不到,最后只能重新搜索。

更可怕的是,那些标签你不敢关——因为你不记得里面是什么

这个问题有个专属名词叫 Tab Hell(标签页地狱)。今天我想聊聊我为了逃出这个地狱,用 Vibe Coding 做的一个 Chrome 插件:TabNirvana


这个插件是怎么来的

我不是专业的前端工程师,但这个痛点实在太真实了——查资料时同时开着 GitHub、Notion、Figma、YouTube,加上各种文档和参考链接,随随便便就 30+ 个标签,脑子里一团乱麻。

于是我决定用 Vibe Coding 的方式,借助 AI 辅助编程,从零把这个工具做出来。整个过程我更多扮演的是"产品经理 + 测试员"的角色:描述我想要什么,让 AI 帮我写代码,我来 debug、打磨体验、反复迭代。

最终,TabNirvana 上架了 Chrome 应用商店。

这次经历让我真正相信一件事:Vibe Coding 正在让"人人都能做产品"变成现实。 你不需要是程序员,你只需要有一个真实的需求,和足够的耐心去打磨它。


TabNirvana 到底是什么

TabNirvana = Tab(标签页)+ Nirvana(涅槃 / 宁静)

一句话描述:在不离开当前页面的情况下,一眼看清你所有标签——按网站分组、可搜索、可批量关闭。

按下 Alt+V(或点击页面边缘的浮动按钮),一个清爽的总览面板以弹窗形式叠加在当前页面上。不新开标签,不打断你的工作流,按 Esc 随时关闭,你还在原来的地方。


核心功能一览

📋 跨窗口全局总览,按域名自动分组

所有浏览器窗口的标签页,一次性呈现,按域名自动归组。不同窗口的标签会显示 W2、W3 标识,点击任意标签可直接跨窗口跳转聚焦。

就像上面的截图:github.com × 5、notion.so × 3、figma.com × 2……你的工作状态一目了然。

🔍 快速搜索,实时过滤

输入关键词,实时过滤所有标签的标题、URL、域名和页面摘要。找到即跳转,不需要一个个标签去翻。/ 键随时唤起搜索框,Esc 清空搜索,再按一次关闭面板。

🖼 内容摘要 + 缩略图,不打开也知道里面是什么

每个标签行自动提取页面摘要和 OG 缩略图。那些"我开着不敢关因为不记得内容"的标签,现在一眼就能判断要不要留。这直接解决了 Tab Hell 的根本原因。

👆 全键盘操作,双手不离键盘

整个面板完全支持键盘控制:

  • ↑ / ↓ — 上下移动选中标签
  • ← / → — 在分组列之间跳转
  • Enter — 切换到选中标签
  • Delete — 关闭选中标签
  • Shift+Delete — 关闭整个域名分组
  • / — 跳转搜索框
  • Esc — 关闭面板

对于喜欢键盘工作流的人来说,这个体验非常流畅。

🔁 重复标签检测

同一 URL 在多个标签中打开时,自动显示琥珀色 ×N 徽章,冗余标签一眼可见。

🎯 三档批量关闭,附带金币动画

关闭单个标签、关闭整个域名组、或一键清空全部。每次批量关闭附带金币飞散动画 + 8-bit 音效——因为整理标签这件事,本来就应该有点仪式感和满足感。

👁 悬停预览(可选)

开启顶部 Preview 开关后,鼠标悬停标签时实时渲染该网页的真实内容预览(320×200),在本地沙箱中运行,JS 被禁用,数据不离开你的设备。


隐私方面,做了严格的设计

TabNirvana 针对对数据安全有要求的用户做了明确承诺:

  • ✅ 零外部数据传输
  • ✅ 无任何第三方分析或统计脚本
  • ✅ 无远程代码,无外部 CDN 依赖
  • ✅ 所有处理均在本地完成
  • ✅ 本地仅存储两项数据:按钮位置和预览开关状态

对于在企业内网工作的人来说,这一点尤为重要。


适合谁用?

如果你符合以下任何一条,TabNirvana 应该会让你感到惊喜:

  • 经常同时开 20+ 个标签页工作
  • 需要在 GitHub、文档、设计稿、视频教程之间频繁切换
  • 有"开着不敢关"的标签恐惧症
  • 喜欢键盘驱动的工作流
  • 对浏览器数据隐私有较高要求

如何安装

插件已上架 Chrome 应用商店,完全免费

👉 点击链接或在 Chrome 应用商店搜索 TabNirvana

chromewebstore.google.com/detail/tabn…

安装后,按 Alt+V 即可呼出面板,也可以点击页面右侧边缘的浮动按钮。按钮位置支持拖拽,靠近右边缘自动吸附,位置跨会话保存。


最后

做 TabNirvana 的过程让我意识到:很多"小而美"的工具一直缺席,不是因为需求不存在,而是因为过去门槛太高、没人愿意做。

现在门槛低了,我就先做了一个自己最需要的。

如果你也深陷标签页地狱,欢迎来试试。用完有任何建议和反馈,评论区见——这个插件还在持续迭代中。

标签清,心自静。


如果本教程对你有所帮助,留下一个免费的三连吧 ♥️!