夜雨聆风Vibe Coding开发Chrome插件
我的 Chrome 经常同时开着几十个网页。
论文、在线文档、训练控制台、接口文档、搜索结果和参考资料堆在一起，很多页面的标题还长得一模一样。刚打开时，我当然知道每个页面是干什么的；但只要切去处理别的任务，过一会儿再回来，就只能把这些 Tab 逐个点开，重新确认内容和上下文。
真正让人疲惫的往往不是“网页太多”，而是浏览器原本的标题只能告诉我们“这是哪个网站”，却无法回答几个更重要的问题：我为什么打开它？我看到哪里了？下一步要做什么？在十几个相似页面中，哪一个才是我要找的？
为了解决这个问题，我做了一个 Chrome 插件——「页签备注」，并把它完整开源了。
它的思路很简单：不再被动接受网站提供的标题，而是在网页标题前增加一层属于自己的说明。你可以给每个页面设置短标题、分类、颜色和详细备注，让标签栏从“网站列表”变成真正能承载工作上下文的任务面板。
不再依赖网站标题，而是给网页写下“打开它的原因”
安装插件后，可以直接在 Chrome 左侧垂直标签栏或顶部水平标签栏中右键任意 Tab，点击「修改页签备注」。右侧会立即打开备注编辑器，无需先进入扩展管理页，也不需要复制网页链接。
例如，同样是一个小红书页面，我可以把它标记为：
🩷 Rednote｜Rednote 是小红书的英文名 · 小红书
如果同时在做论文调研、跑实验和写说明文档，我还可以把不同网页标成：
🔵 论文｜整理实验设置、关键结论
🟢 控制台｜检查训练日志、显存占用
🟡 文档｜补充使用说明、安装步骤
🟠 参考资料｜整理截图、案例和链接
这些文字会直接显示在原网页标题前面。之后再回到 Chrome，不需要逐个打开页面，也不需要重新回忆上下文，只看标签栏就能知道每个网页的用途和下一步动作。
一条页签备注可以记录什么？
插件没有把备注限制成一个简单的别名，而是提供了四类互补的信息。
1. 标签短标题
短标题用来回答“这个页面对我来说是什么”。它最多支持 24 个字符，会优先显示在标签标题前面。
网站原标题可能是“某某平台首页”“某某控制台”或一段很长的文章标题，但对当前任务而言，我更关心的可能只是“训练任务 3”“论文实验部分”“待补配图”或“最终参考版本”。短标题让网页名称真正服务于自己的工作流。
2. 分类
分类用来回答“这个页面属于哪一类任务”。它最多支持 16 个字符，可以自由填写，例如论文、实验、文档、待办、参考资料、线上环境等。
当多个项目同时推进时，分类可以避免不同任务的网页混在一起。即使它们来自同一个网站，也能快速判断当前页面属于哪个工作环节。
3. 颜色
颜色是最快的视觉索引。插件会把所选颜色显示为标签标题最前面的彩色圆点。
例如，我习惯用蓝色表示论文，绿色表示正在运行的任务，黄色表示需要继续补充的文档，橙色表示参考资料。即使标签栏很窄、文字没有完全显示，也能先通过颜色找到大致范围。
4. 详细备注
每个网页最多可以保存 2000 个字符的详细备注，适合记录阅读进度、重要参数、结论摘要、下一步任务和临时想法。
详细备注的前 32 个字符会自动作为摘要显示在 Tab 标题中，完整内容则保留在右侧编辑器里。这样既能保证标签栏足够紧凑，又不会丢掉真正重要的上下文。
如果希望浏览网页时随时看到提醒，还可以开启「网页备注卡」。备注会以一张可折叠卡片显示在网页右上角，适合放“下一步做什么”“这组实验使用什么参数”“这里需要补充哪张图”之类容易遗忘的信息。不需要时可以随手收起，并不会删除原备注。
三种方式快速打开备注
最方便的方式是直接右键 Tab：
在 Chrome 左侧垂直标签栏或顶部水平标签栏中右键目标页面； 点击「修改页签备注」； 填写短标题、分类、颜色或详细备注； 点击「保存备注」。
保存后，当前标签的标题会立即更新。
也可以先选中网页，再点击 Chrome 工具栏里的「页签备注」图标。如果图标没有显示，可以打开工具栏的扩展程序菜单，把它固定到工具栏。
习惯键盘操作的话，还可以使用快捷键：
macOS： ⌥ Option + ⇧ Shift + NWindows / Linux： Alt + Shift + N保存当前备注：macOS 使用 ⌘ Command + Enter，Windows / Linux 使用Ctrl + Enter
如果快捷键与其他扩展冲突，可以打开 chrome://extensions/shortcuts，为它重新设置组合键。
不只是改标题，也可以管理已经打开和关闭的网页
备注侧栏的下半部分会列出当前所有已打开的网页，并把已经添加备注的页面优先展示出来。
你可以按照短标题、分类、详细备注、网页原标题或网址进行搜索。点击搜索结果，就能直接切换到对应的标签页，不需要在几十个 Tab 之间来回寻找。
已经关闭的网页也不会立刻消失。只要保存过备注，它就会出现在「已保存但未打开」列表中，之后可以一键重新打开。对于需要持续几天甚至几周的调研任务，这比临时收藏更容易保留“当时为什么保存这个页面”的信息。
插件还会按照完整网址保存备注。对于包含 # 路由的控制台页面，不同路由可以分别记录，避免多个看起来相似、实际对应不同任务的页面共用同一条说明。
哪些场景适合使用页签备注？
阅读论文
可以记录“已读到实验部分”“需要复现表 3”“后面补充引用”“重点看消融实验”。第二天再次打开论文时，不需要从头寻找上次停下的位置。
运行实验
可以给不同训练控制台标记任务名称、机器、配置、当前状态和需要观察的指标。例如“8 卡训练，关注 step 500 后的 loss”或“显存偏高，下一次降低分辨率”。
写文章和文档
可以区分正文、素材、数据来源、图片参考和待补内容。即使十几个页面都来自同一个文档平台，也能通过标签栏快速定位。
做资料调研
可以直接在搜索结果上记录“结论可信”“只有二手引用”“后续需要验证”或“适合放进对比表”，避免反复打开和重复阅读。
开发与调试
可以标记不同环境、控制台、接口文档、线上问题和本地调试页面。对于标题几乎完全一样的后台系统，这种区分尤其明显。
旅行、购物或课程选择
它也不只适用于工作。比较酒店、商品、课程或旅行攻略时，可以直接记录价格、优缺点和待确认事项，把大量相似网页变成一份带上下文的候选清单。
数据只保存在本机
页签备注不需要注册账号，也没有自己的服务器、广告、分析 SDK 或远程代码。
网页地址、网页标题和用户填写的备注都保存在当前 Chrome 用户配置的 chrome.storage.local 中，不会发送给开发者或第三方。它更像是浏览器里的一本本地便签，而不是一个需要把工作内容同步到云端的在线服务。
Chrome 自身的内部页面，例如 chrome://settings，不允许扩展修改标题或注入网页备注卡，但仍然可以在侧边栏中保存对应备注。普通网页则可以正常显示标题前缀和备注卡。
针对大量 Tab 做了性能优化
页签备注最需要应对的恰恰是“网页很多”的场景，因此最新版也专门优化了保存和切换时的响应速度。
保存备注时，插件只刷新当前网址对应的标签，不再每次都重新扫描并重绘全部状态；侧边栏会复用已经加载的 Tab 数据，并合并短时间内重复触发的渲染。即使同时打开较多网页，编辑和保存备注也能保持更轻量的更新路径。
如何安装？
目前可以直接从 GitHub 下载发布版：
打开最新版下载页面； 下载最新的 tab-notes-*.zip并解压；在 Chrome 地址栏打开 chrome://extensions/；开启页面右上角的「开发者模式」； 点击「加载已解压的扩展程序」，选择刚才解压的文件夹； 建议把「页签备注」固定到 Chrome 工具栏，之后即可随时打开。
项目已经完整开源：
GitHub：
https://github.com/xmu-xiaoma666/tab-notes
最新版下载：
https://github.com/xmu-xiaoma666/tab-notes/releases/latest
如果你也有一个自己特别想要、但现有插件都不完全符合需求的 Chrome 小功能，也可以试试 dots3-note-prev，用自然语言描述需求，通过 Vibe Coding DIY 更多属于自己的插件。
dots3-note-prev：
https://huggingface.co/dots-studio/dots3-note-prev
API 目前完全免费，可以直接使用：
https://dots.ai/platform/
当浏览器不再只显示网站给出的标题，而是能够保留“我为什么打开这个页面”，几十个标签页就不再是一堆等待清理的网页，而会变成一份可以随时继续的工作现场。