【免费下载链接】tab-outKeep tabs on your tabs. Turn your New tabs page into a mission control, so you can close them easily. Built for people who open too many tabs and never close them.项目地址https://gitcode.com/gh_mirrors/ta/tab-out点击查看免费下载你是否也经历过这种崩溃时刻浏览器顶部挤了几十个标签页想关掉却不敢随便点怕误杀重要页面Tab Out这款 Chrome 标签页管理扩展用了一个很聪明的办法——在浏览器工具栏上放一枚三色信号灯徽章由后台 Service Worker 实时统计你的标签页数量并用绿、黄、红三种颜色告诉你现在还能开、该警惕了、必须大扫除。三色信号灯绿黄红分别代表什么打开 extension/background.js 可以看到徽章颜色的判定逻辑简单到只有一段如果/否则颜色色值标签页数量心理学暗示 绿色#3d7a4a1–10 个专注状态一切可控 琥珀#b8892e11–20 个事情开始堆积注意节奏 红色#b35a5a21 个危险信号该清理了为什么选这三色这是刻意为之绿色是通行的通用信号让你无意识地感到安心不必分心琥珀色而不是刺眼的纯黄来自真实交通灯的配色经验——它不制造恐慌但足以唤起减速的本能红色是最低效的打扰颜色当你真的开崩了它就是要让你不舒服逼你打开 Tab Out 的大扫除页面。 更妙的是这三组色值与扩展主界面共用同一套 CSS 变量extension/style.css 中的--status-active、--status-cooling、--status-abandoned工具栏徽章和仪表盘页的视觉语言完全统一。Service Worker一个只在后台干活的小管家在 Chrome 扩展的 Manifest V3 架构里background.js并不是常驻页面而是一个按需唤醒的 Service Worker。Tab Out 的后台脚本职责极其单一——只干一件事保持工具栏徽章上的数字和颜色永远是最新的。它的注册方式在 extension/manifest.json 中只有一行service_worker: background.js。没有服务器、没有 Node.js、没有 npm纯扩展即可运行。它如何知道你开了多少个标签页核心函数updateBadge()background.js分三步走数标签页调用chrome.tabs.query({})拿到所有标签页然后过滤掉chrome://、chrome-extension://、about:、edge://、brave://开头的内部页面——徽章只统计真实网页避免浏览器自身页面虚增数字写数字通过chrome.action.setBadgeText把数量显示在工具栏上。如果数量为 0徽章直接留空——一个孤零零的0只会让你焦虑涂颜色按上表阈值调用setBadgeBackgroundColor给徽章上色。徽章如何做到永远最新Service Worker 会在浏览器空闲时休眠靠事件监听被重新唤醒。Tab Out 注册了 5 个触发点background.js扩展刚安装时onInstalled浏览器启动时onStartup任何标签页打开时onCreated任何标签页关闭时onRemoved标签页 URL 变化时onUpdated比如从网页跳到chrome://也就是说你每点一下新标签页徽章数字 1每关一个数字 -1颜色在阈值附近自动切换。整个过程零请求、零网络——100% 本地运行数据从不离开你的机器。出错时的优雅降级一个容易被忽略的细节updateBadge()的catch分支里一旦查询标签页失败代码会直接清空徽章而不是留下一个过期的旧数字background.js。宁可空着也不说谎——这其实是状态指示类 UI 的一条黄金法则过时的红色比没有徽章更让人抓狂。从徽章到仪表盘颜色背后的完整闭环徽章只是报警器真正的灭火现场是 Tab Out 的新标签页。当红色亮起时你只需按CtrlT打开新标签页就能看到所有标签页按域名分组成网格卡片一键关闭整组Gmail、X、YouTube 等首页被聚成单独的Homepages卡片方便整体清理重复标签页被标记琥珀色(2x)徽标一键去重关页时有嗖的音效和彩带动画——让关标签这件事产生一点多巴胺想留着的页面可以先稍后保存到右侧清单数据存在chrome.storage.local里跨会话持久保存。页面逻辑全部写在 extension/app.js通过chrome.tabs.query直接读取标签页并渲染。配合 README.md 中的功能清单你会发现徽章的三色设计与仪表盘的功能是一体两面的前者负责让你注意到后者负责让你处理掉。常见问题 FAQQ为什么我的徽章上有时不显示数字A当标签页数量为 0或查询出错时Tab Out 会主动隐藏徽章——空徽章比错误徽章更干净。Q为什么chrome://页面没被计数A统计时特意排除了浏览器内部页面和扩展页面background.js所以数字只反映你真正在看的网页负载。Q颜色阈值能自己改吗A阈值硬编码在updateBadge()的判定分支里改一行色值逻辑即可。但作为一个信号灯10/20 的默认分界已经覆盖了绝大多数人的使用习惯。小结一枚徽章的克制设计Tab Out 的三色徽章看似只有几行代码却完整体现了状态可视化设计的要点用最低认知成本的颜色编码传递紧迫感用事件驱动保持数据实时用本地优先保证隐私。下次当你瞥见工具栏上的红色数字时别再无视它——那是你 21 个标签页在向你发出求救信号。赞分享【免费下载链接】tab-outKeep tabs on your tabs. Turn your New tabs page into a mission control, so you can close them easily. Built for people who open too many tabs and never close them.项目地址https://gitcode.com/gh_mirrors/ta/tab-out点击查看免费下载相关推荐如何安全驱动AI-Infra-Auto-Driven-SKILLSCodex与Claude Code全自动权限模式最佳实践如何安全驱动AI Infra Auto Driven SKILLSCodex与Claude Code全自动权限模式最佳实践 AI Infra Auto DriTab Out 新标签页标签管理完全指南1分钟把标签页爆炸变成Inbox Zero指挥中心Tab Out 新标签页标签管理完全指南1分钟把标签页爆炸变成Inbox Zero指挥中心 你是不是也这样浏览器里躺着 50 多个标签页关到一半忘了当randomColor色彩心理学应用如何生成符合用户情绪的颜色randomColor色彩心理学应用如何生成符合用户情绪的颜色 在当今数字化时代色彩已经成为用户体验设计中不可或缺的元素。randomColor作为一个轻量前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考