Multi-Row Tabs（多行平铺标签栏）

一个 Chrome 浏览器扩展（Manifest V3），以多行平铺的方式展示当前窗口的所有标签页，采用零侵入浮动模式：不修改页面任何样式，兼容所有网站。

背景说明

Chrome 扩展无法修改浏览器原生标签栏（标签栏属于浏览器 UI 层，扩展无权注入样式或脚本）。因此本扩展采用「浮动覆盖栏」方案：页面上仅有一个可拖拽的悬浮按钮，点击或按快捷键时标签栏才浮现在页面顶部，不改动页面任何样式，对等任何网站零影响。

功能特性

• 零侵入浮动模式：标签栏默认隐藏，不修改页面任何样式；展开时浮在页面上方，鼠标离开自动收起
• 悬浮按钮可拖拽：右上角小圆点按钮可拖拽到页面任意位置，位置自动记忆
• 自定义快捷键：默认 Alt+Z，可在弹出面板中录制任意组合键，随时展开 / 收起标签栏
• 多行平铺展示：标签以 favicon + 标题的形式自动换行平铺，当前活动标签白底高亮
• 标签排序：标签栏左侧提供排序下拉框，支持「默认」（与浏览器标签顺序一致）、「按名称」（中文拼音排序）、「按域名」（优先按一级域名排序，同站点不同子域名的标签自动聚在一起），选择后自动记忆
• 一键切换 / 还原：点击工具栏图标，在弹出面板中一键显示或隐藏整个功能
• 标签操作：
  • 左键点击标签 → 切换到该标签
  • 中键点击标签 → 关闭该标签（与原生标签栏行为一致）
  • 点击标签上的 × → 关闭该标签
• 键盘导航：展开后用 ← → ↑ ↓ 在标签间移动焦点（蓝色高亮），按 Enter 切换到对应标签页，按 Delete 关闭当前高亮标签，按 Esc 收起标签栏
• 可选显示链接：在弹出面板中勾选「显示链接」后，链接以小字显示在标签名称下方（默认不显示）
• 实时同步：标签的新建、关闭、切换、标题变化会自动刷新标签栏
• 无 Mixed Content 警告：favicon 由后台抓取并转为 data URL 下发，http 页面的图标在 https 页面中也不会触发混合内容警告

安装方法

1. 打开 chrome://extensions/
2. 开启右上角「开发者模式」
3. 下载 最新压缩包 解压
4. 点击「加载已解压的扩展程序」，选择本目录（multi-row-tabs）
5. 工具栏出现扩展图标即安装成功

使用方法

• 点击工具栏图标，弹出面板中点击「显示多行标签栏」→ 页面出现悬浮按钮 ≡；点击「隐藏多行标签栏」→ 还原
• 点击悬浮按钮（或按自定义快捷键）→ 标签栏浮现在页面顶部；鼠标离开标签栏后自动收起
• 展开标签栏后，通过左侧下拉框切换排序方式（默认 / 按名称 / 按域名），选择立即生效并自动记忆
• 悬浮按钮可按住拖拽到页面任意位置，位置自动记忆（按窗口百分比保存）
• 在弹出面板中点击「快捷键」输入框后按下组合键即可录制；「清除」可移除快捷键
• 勾选 / 取消「显示链接」立即生效，无需刷新页面

文件结构

chrome-multirow-tabs/
├── manifest.json   # MV3 配置，声明 tabs / storage / scripting 权限
├── background.js   # Service Worker：切换开关、标签查询、favicon 转换与缓存、事件广播
├── content.js      # 渲染悬浮按钮与多行标签栏，处理拖拽 / 快捷键 / 点击 / 中键关闭等交互
├── content.css     # 标签栏与悬浮按钮样式（flex-wrap 多行平铺）
├── popup.html      # 工具栏弹出面板
├── popup.js        # 面板逻辑：切换按钮 + 显示链接 + 快捷键录制
├── icon16.png      # 扩展图标（16px）
├── icon48.png      # 扩展图标（48px）
├── icon128.png     # 扩展图标（128px）
└── README.md

已知限制

• chrome:// 页面、Chrome 网上应用店等浏览器内部页面无法注入内容脚本，这些页面不会显示悬浮按钮
• 标签栏展开时浮在页面上方，会临时遮挡顶部内容（鼠标离开即收起）
• 自定义快捷键在页面自身捕获了同一组合键时可能被页面拦截（扩展在捕获阶段监听，绝大多数情况优先生效）
• 重新加载扩展后，之前已打开的页面需要刷新一次才会加载新脚本

-- END