Skip to content

rayZhu88/QuickTab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

QuickTab - 智能标签页管理器 Chrome 扩展

一个功能强大的Chrome扩展,帮助您快速查找和管理多个标签页,支持智能搜索、命令操作和高级标签页管理功能。让标签页管理变得简单高效。

✨ 主要功能

🔍 智能搜索与导航

  • 实时搜索:输入即搜索,支持标签页标题和URL的模糊匹配
  • 键盘导航:使用↑↓键快速选择标签页,Enter键激活
  • 智能过滤:支持多种筛选条件(活跃、音频、静音、固定、加载中等)
  • 中文友好:完全支持中文搜索和界面

🚀 命令模式操作

  • @remove:快速删除标签页或分组
  • @group:快速定位和检索分组
  • @help:显示详细的使用帮助
  • 快捷键支持:Ctrl+Shift+S (Windows) / Command+Shift+S (Mac)

📁 智能分组管理

  • 自动分组:按域名自动分组标签页
  • 分组统计:显示每个分组的标签页数量
  • 批量操作:支持按分组批量关闭标签页
  • 交互式选择:支持键盘导航选择分组和标签页

🎯 高级标签页操作

  • 标签页预览:查看标签页详细信息、截图和页面元素
  • 状态管理:显示标签页加载状态、音频状态、固定状态等
  • 快速激活:一键切换到目标标签页
  • 智能关闭:支持单个和批量关闭操作

💡 用户体验优化

  • 现代化UI:渐变色彩、毛玻璃效果、圆角设计
  • 响应式布局:适配不同屏幕尺寸
  • 状态记忆:记住用户的搜索历史和操作偏好
  • 实时更新:标签页状态变化时自动刷新

🚀 安装方法

方法1:开发者模式安装(推荐)

  1. 下载或克隆此项目到本地
  2. 打开Chrome浏览器,进入 chrome://extensions/
  3. 开启右上角的"开发者模式"
  4. 点击"加载已解压的扩展程序"
  5. 选择项目文件夹
  6. 扩展安装完成!

方法2:打包安装

  1. chrome://extensions/ 页面点击"打包扩展程序"
  2. 选择项目根目录
  3. 生成 .crx 文件后拖拽安装

📖 使用方法

基本操作

  1. 打开扩展:点击浏览器工具栏中的QuickTab图标
  2. 搜索标签页:在搜索框中输入关键词查找标签页
  3. 键盘导航:使用↑↓键选择,Enter键激活标签页
  4. 快速操作:点击"激活"按钮切换到目标标签页

命令模式

  1. 输入@命令:在搜索框中输入@开头的命令
  2. @remove:删除指定的标签页或分组
  3. @group:快速定位到包含关键词的分组
  4. @help:查看详细的使用说明

高级功能

  1. 标签页预览:点击预览按钮查看详细信息
  2. 批量操作:使用筛选器选择特定类型的标签页
  3. 分组管理:按域名分组查看和管理标签页
  4. 快捷键:使用Ctrl+Shift+S快速打开扩展

筛选功能

  • ✨ 当前活跃:显示当前激活的标签页
  • 🔊 有音频:显示正在播放音频的标签页
  • 🔇 已静音:显示被静音的标签页
  • 📌 已固定:显示固定的标签页
  • ⏳ 加载中:显示正在加载的标签页
  • 🔄 重复页面:显示重复的标签页
  • 🛡️ 系统页面:显示系统相关页面
  • 🔒 安全连接:显示HTTPS安全页面

📁 文件结构

QuickTab/
├── manifest.json          # 扩展配置文件 (Manifest V3)
├── popup.html            # 主界面HTML (现代化UI设计)
├── popup.css             # 样式文件 (内联样式)
├── popup.js              # 主要逻辑代码 (2828行)
├── background.js         # 后台脚本 (服务工作者)
├── icons/                # 图标文件夹
│   └── icon.svg         # SVG矢量图标
├── options.html          # 设置页面
├── options.css           # 设置页面样式
├── options.js            # 设置页面逻辑
└── README.md            # 说明文档

🛠️ 技术特点

前端技术

  • 原生JavaScript:无依赖,轻量级实现
  • ES6+特性:使用现代JavaScript语法
  • CSS3动画:流畅的过渡效果和动画
  • 响应式设计:适配不同屏幕尺寸

架构设计

  • 模块化代码:清晰的类结构和功能分离
  • 事件驱动:基于事件的交互设计
  • 状态管理:完整的状态保存和恢复机制
  • 错误处理:完善的错误处理和用户反馈

性能优化

  • 懒加载:按需加载标签页信息

  • 缓存机制:缓存用户操作和搜索历史

  • 异步操作:非阻塞的标签页操作

  • 内存管理:及时清理不需要的数据

  • 关闭标签页操作不可撤销,请谨慎操作

  • 建议在关闭大量标签页前先确认选择

  • 扩展会自动刷新标签页列表,保持数据同步

  • 某些系统页面可能无法完全访问

📝 更新日志

v1.0.0

  • 🎉 初始版本发布
  • ✨ 支持智能搜索和键盘导航
  • 🚀 实现命令模式操作
  • 📁 自动标签页分组管理
  • 🎨 现代化用户界面设计
  • ⌨️ 快捷键支持 (Ctrl+Shift+S)
  • 🔍 多种筛选条件支持
  • 📱 响应式布局设计

🤝 贡献指南

如果您在使用过程中遇到问题或有改进建议,欢迎:

  1. 提交Issue:报告bug或提出功能建议
  2. 提交PR:贡献代码改进
  3. 分享反馈:告诉我们您的使用体验

📄 许可证

MIT License - 可自由使用、修改和分发

🔗 相关链接


QuickTab - 让标签页管理变得简单高效! ⚡

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published