注: ai真好玩系列

侧边标签页分组 Chrome 扩展

一个将 Chrome 标签页移到侧边栏并按网站域名自动分组的扩展程序。使用 Manifest V3 开发，支持 Chrome 114+ 的侧边栏功能。

✨ 功能特性

• 侧边栏界面: 在侧边栏中清晰展示所有标签页，不占用主浏览器窗口
• 智能分组: 按网站域名自动分组标签页（忽略 www. 前缀）
• 快速搜索: 实时搜索标签页标题和 URL，快速定位目标标签页
• 分组管理: 折叠/展开分组，按需查看标签页详情
• 一键操作: 点击激活标签页，点击关闭按钮移除标签页
• 自定义设置: 配置自动分组、显示选项、刷新行为和排序方式
• 快捷键支持: Ctrl+Shift+S（Windows/Linux）或 Cmd+Shift+S（Mac）快速打开侧边栏
• 实时统计: 在弹出窗口中显示标签页和分组数量统计

📦 安装方法

1. 加载未打包的扩展

1. 打开 Chrome 浏览器
2. 在地址栏输入 chrome://extensions/ 并访问
3. 开启页面右上角的 "开发者模式" 开关
4. 点击 "加载已解压的扩展程序" 按钮
5. 选择包含本扩展文件的文件夹

2. 添加图标文件（推荐）

扩展需要图标才能在工具栏正常显示。请创建以下图标文件并放置到 icons/ 目录：

尺寸	文件名	用途
16×16	icon16.png	工具栏小图标
48×48	icon48.png	扩展管理页面图标
128×128	icon128.png	商店展示图标

创建图标的方法：

• 使用在线图标生成工具（如 favicon.io）
• 使用图像编辑软件自行设计
• 使用 ImageMagick 命令行工具生成简单图标

3. 开始使用

• 打开侧边栏: 点击工具栏上的扩展图标，然后点击"打开侧边栏"按钮，或使用快捷键 Ctrl+Shift+S
• 使用弹出窗口: 点击工具栏图标打开弹出窗口，查看标签页统计和快速操作
• 管理标签页: 在侧边栏中浏览分组、搜索标签页、切换或关闭标签页

🚀 使用指南

侧边栏功能

• 浏览分组: 所有标签页按网站域名自动分组显示
• 搜索标签页: 在顶部搜索框中输入关键词，实时筛选结果
• 激活标签页: 点击任意标签页项，切换到该标签页
• 关闭标签页: 点击标签页右侧的关闭按钮（×）
• 折叠/展开分组: 点击分组标题右侧的箭头图标
• 全部折叠/展开: 使用底部工具栏的折叠按钮

弹出窗口功能

• 查看统计: 实时显示打开的标签页总数和分组数量
• 快速操作:
  • 打开侧边栏: 切换到当前标签页并打开侧边栏
  • 新建标签页: 创建新的空白标签页
  • 刷新列表: 手动刷新标签页数据
  • 打开设置: 打开侧边栏并跳转到设置面板

设置选项

在侧边栏中点击设置按钮（⚙️）可配置：

选项	说明	默认值
自动分组	启用/禁用按域名自动分组	开启
显示网站图标	显示/隐藏网站 favicon	开启
显示缩略图	显示/隐藏标签页缩略图占位符	开启
自动刷新	标签页变化时自动更新界面	开启
分组排序	按数量、字母顺序或最近使用排序	按数量

📁 文件结构

侧边标签页分组扩展/
├── manifest.json          # 扩展配置文件（权限、命令、界面声明）
├── background.js          # 后台服务脚本（标签页监听、分组逻辑）
├── sidebar.html          # 侧边栏 HTML 界面
├── sidebar.js            # 侧边栏主逻辑（639行，包含渲染、搜索、设置）
├── popup.html            # 弹出窗口 HTML 界面
├── popup.js              # 弹出窗口逻辑（统计显示、快捷操作）
├── styles.css            # 统一样式文件（CSS变量、响应式设计）
├── icons/                # 图标目录
│   ├── icon16.png        # 16×16 工具栏图标
│   ├── icon48.png        # 48×48 扩展页面图标
│   └── icon128.png       # 128×128 商店图标
└── README.md             # 本说明文件

🔐 权限说明

扩展请求以下权限以提供完整功能：

权限	用途	必要性
tabs	查询、更新、移除标签页	必需
tabGroups	管理标签页分组（未来功能）	可选
storage	保存用户设置（跨设备同步）	必需
sidePanel	显示侧边栏界面	必需
activeTab	从弹出窗口打开侧边栏	必需
<all_urls>	获取任何网站的 favicon 图标	必需

扩展仅请求必要权限，不收集用户数据或浏览历史。

🛠️ 开发与贡献

修改和调试

1. 修改代码: 编辑相关 JavaScript、HTML 或 CSS 文件
2. 重新加载扩展: 在 chrome://extensions/ 页面点击扩展卡片上的刷新按钮 🔄
3. 测试更改: 重新打开侧边栏/弹出窗口查看效果

调试工具

• 侧边栏: 右键点击工具栏扩展图标 → "检查侧边栏"
• 弹出窗口: 右键点击工具栏扩展图标 → "检查弹出窗口"
• 后台脚本: 在 chrome://extensions/ 页面点击"service worker"链接
• 控制台日志: 所有组件都包含详细的 console.log 输出

开发命令

# 验证 manifest.json 语法
python -m json.tool manifest.json

# 检查文件完整性
ls -la *.js *.html *.css manifest.json icons/

贡献指南

欢迎通过以下方式贡献：

1. 报告问题: 在 Issue 中描述遇到的问题或建议
2. 提交 PR: Fork 仓库，创建功能分支，提交 Pull Request
3. 改进文档: 完善 README 或添加代码注释

请确保代码风格一致：

• 变量和注释使用中文
• 函数名和日志消息中英文混合
• 使用 ES6+ 语法（箭头函数、async/await、模板字符串）

❓ 常见问题

Q: 侧边栏无法打开

A: 确保 Chrome 版本 ≥ 114（支持侧边栏功能）。在 chrome://extensions/ 检查扩展是否已正确加载。

Q: 图标不显示或显示为默认图标

A: 需要将图标文件放入 icons/ 目录。即使没有图标，扩展也能正常工作，但工具栏显示会受影响。

Q: 分组不准确（如 sub.example.com 和 example.com 被分到不同组）

A: 当前逻辑按完整域名分组（忽略 www.）。可修改 background.js 中的 groupTabsByDomain() 函数自定义分组规则。

Q: 拖放重排序功能无效

A: 拖放界面已实现，但 Chrome TabGroups API 集成尚未完成。目前拖放仅记录到控制台。

Q: 设置没有保存

A: 设置通过 chrome.storage.sync 保存，支持跨设备同步。检查是否启用了 Chrome 同步功能。

⚙️ 技术细节

数据流

1. 背景脚本监听所有标签页变化事件
2. 标签页按域名分组并缓存
3. 侧边栏/弹出窗口请求或接收更新数据
4. UI 根据设置渲染分组和标签页

消息通信

组件通过 chrome.runtime.sendMessage() 通信，主要消息类型：

• GET_TABS_DATA: UI → 背景，请求当前数据
• TABS_UPDATED: 背景 → UI，推送更新数据
• ACTIVATE_TAB/CLOSE_TAB: UI → 背景，标签页操作
• CREATE_NEW_TAB: UI → 背景，创建新标签页

📝 更新日志

v1.0.0 (当前版本)

• 初始发布
• 侧边栏标签页管理界面
• 按网站域名自动分组
• 实时搜索功能
• 可配置的设置选项
• 弹出窗口统计和快捷操作
• 快捷键支持 (Ctrl+Shift+S)

计划功能

• 拖放重排序标签页和分组
• 自定义分组规则
• 标签页缩略图预览
• 分组颜色标记
• 导出/导入分组配置

📄 许可证

MIT License - 详见项目根目录的 LICENSE 文件（如有）或以下条款：

Copyright (c) [年份] [作者]

特此免费授予任何获得本软件副本及相关文档文件（"软件"）的人无限制使用软件的权利，
包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利...