以多行平铺的方式展示当前窗口所有标签页的chrome 扩展
<p align="center" alt="MultiRow Tabs Logo" width="128" </p <h1 align="center"MultiRow Tabs（多行平铺标签栏）</h1 一个 Chrome 浏览器扩展（Manifest V3），以多行平铺的方式展示当前窗口的所有标签页，采用零侵入浮动模式：不修改页面任何样式，兼容所有网站。github 视频演示 背景说明 Chrome 扩展无法修改浏览器原生标签栏（标签栏属于浏览器 UI 层，扩展无权注入样式或脚本）。因此本扩展采用「浮动覆盖栏」方案：页面上仅有一个可拖拽的悬浮按钮，点击或按快捷键时标签栏才浮现在页面顶部，不改动页面任何样式，对等任何网站零影响。 功能特性 零侵入浮动模式：标签栏默认隐藏，不修改页面任何样式；展开时浮在页面上方，鼠标离开自动收起 悬浮按钮可拖拽：右上角小圆点按钮可拖拽到页面任意位置，位置自动记忆 自定义快捷键：默认 Alt+Z，可在弹出面板中录制任意组合键，随时展开 / 收起标签栏 多行平铺展示：标签以 favicon + 标题的形式自动换行平铺，当前活动标签白底高亮 标签排序：标签栏左侧提供排序下拉框，支持「默认」（与浏览器标签顺序一致）、「按名称」（中文拼音排序）、「按域名」（优先按一级域名排序，同站点不同子域名的标签自动聚在一起），选择后自动记忆 一键切换 / 还原：点击工具栏图标，在弹出面板中一键显示或隐藏整个功能 标签操作： 左键点击标签 → 切换到该标签 中键点击标签 → 关闭该标签（与原生标签栏行为一致） 点击标签上的 × → 关闭该标签 键盘导航：展开后用 ← → ↑ ↓ 在标签间移动焦点（蓝色高亮），按 Enter 切换到对应标签页，按 Delete 关闭当前高亮标签，按 Esc 收起标签栏 可选显示链接：在弹出面板中勾选「显示链接」后，链接以小字显示在标签名称下方（默认不显示） 实时同步：标签的新建、关闭、切换、标题变化会自动刷新标签栏 无 Mixed Content 警告：favicon 由后台抓取并转为 data URL 下发，http 页面的图标在 https 页面中也不会触发混合内容警告 安装方法 1. 打开 chrome://extensions/ 2. 开启右上角「开发者模式」 3. 下载 最新压缩包 解压 4. 点击「加载已解压的扩展程序」，选择本目录（multirowtabs） 5. 工具栏出现扩展图标即安装成功 点击工具栏图标，弹出面板中点击「显示多行标签栏」→ 页面出现悬浮按钮 ≡；点击「隐藏多行标签栏」→ 还原 点击悬浮按钮（或按自定义快捷键）→ 标签栏浮现在页面顶部；鼠标离开标签栏后自动收起 展开标签栏后，通过左侧下拉框切换排序方式（默认 / 按名称 / 按域名），选择立即生效并自动记忆 悬浮按钮可按住拖拽到页面任意位置，位置自动记忆（按窗口百分比保存） 在弹出面板中点击「快捷键」输入框后按下组合键即可录制；「清除」可移除快捷键 勾选 / 取消「显示链接」立即生效，无需刷新页面 文件结构 chromemultirowtabs/ ├── manifest.json MV3 配置，声明 tabs / storage / scripting 权限 ├── background.js Service Worker：切换开关、标签查询、favicon 转换与缓存、事件广播 ├── content.js 渲染悬浮按钮与多行标签栏，处理拖拽 / 快捷键 / 点击 / 中键关闭等交互 ├── content.css 标签栏与悬浮按钮样式（flexwrap 多行平铺） ├── popup.html 工具栏弹出面板 ├── popup.js 面板逻辑：切换按钮 + 显示链接 + 快捷键录制 ├── icon16.png 扩展图标（16px） ├── icon48.png 扩展图标（48px） ├── icon128.png 扩展图标（128px） └── README.md 已知限制 chrome:// 页面、Chrome 网上应用店等浏览器内部页面无法注入内容脚本，这些页面不会显示悬浮按钮 标签栏展开时浮在页面上方，会临时遮挡顶部内容（鼠标离开即收起） 自定义快捷键在页面自身捕获了同一组合键时可能被页面拦截（扩展在捕获阶段监听，绝大多数情况优先生效） 重新加载扩展后，之前已打开的页面需要刷新一次才会加载新脚本 权限说明 | 权限 | 用途 | ||| | tabs | 查询 / 切换 / 关闭标签页，读取标题与 favicon | | storage | 保存开关状态、「显示链接」配置、排序方式、悬浮按钮位置与快捷键 | | scripting | 对已打开的标签页按需注入标签栏脚本 | | <allurls（host） | 允许在所有页面注入标签栏、后台抓取 favicon | License MIT
Original
DEV TRENDS / COMMUNITY
Discuss this edition
Sign in with GitHub to share a thought, question, or useful follow-up.