# Chrome-AutoTab-V3

**Repository Path**: ibehujun/chrome-auto-tab-v3

## Basic Information

- **Project Name**: Chrome-AutoTab-V3
- **Description**: 实现在大屏幕上显示实时监控的状态信息，当监控界面不只一个时，多开几个Tab页。自动切换Tab来实现。 
适用于浏览器B/S的大屏或BI系统。
感谢李雷的1.0版本（适用于V2），本次借助Trae智能体升级到V3.
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-19
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Chrome-AutoTab-V3

## 介绍

实现在大屏幕上显示实时监控的状态信息，当监控界面不只一个时，多开几个Tab页。自动切换Tab来实现。 适用于浏览器B/S的大屏或BI系统。

感谢李雷的[1.0版本](https://www.mdaima.com/news/179.html)（适用于V2），本次借助Trae智能体升级到V3。详见：[版本更新记录](/doc/版本更新记录.md)

## 软件架构

软件架构说明（v3版本）

本扩展采用Chrome Manifest V3架构，主要由以下组件构成：

### 1. manifest.json

- 定义了扩展的基本信息（名称、版本、描述等）
- 声明了必要的权限（tabs, activeTab）
- 配置了后台运行的service_worker
- 设置了默认的popup界面
- 配置了内容安全策略

### 2. background.js (Service Worker)

- 作为后台进程运行，处理扩展的核心逻辑
- 实现了标签页自动切换的功能
- 提供了设置时间间隔、开始、停止切换的函数
- 监听来自popup页面的消息通信
- 监听扩展的安装和启动事件

### 3. popup.html 和 popup.js

- popup.html：提供用户交互界面
- popup.js：处理用户交互事件
 - 开始/停止按钮的点击事件处理
 - 向service_worker发送控制消息
 - 允许用户设置切换时间间隔

### 4. 图标资源

- icon.png：扩展的图标文件

### 数据流

1. 用户通过popup界面设置时间间隔并点击开始按钮
2. popup.js向background.js发送消息
3. background.js中的service_worker开始执行自动切换逻辑
4. service_worker通过Chrome API操作标签页切换
5. 用户可随时通过popup界面停止切换

### 技术特点

- 采用Manifest V3架构，使用service_worker替代传统的background page
- 采用模块化设计，功能分离明确
- 使用消息传递机制实现popup与service_worker的通信
- 遵循Chrome扩展开发最佳实践

## 安装教程

在Chrome浏览器的地址栏中敲入命令“chrome://extensions/”回车，进入扩展管理界面。或者从更多工具按钮点进去也是一样的。

将V3文件夹，直接拖动文件夹到浏览器就安装成功了。

安装成功后如下图所示：

![](https://blog-1255866626.cos.ap-beijing.myqcloud.com/picgo/20250819113128.png)

通过红框处的小按钮，就可以实现已打开的浏览器标签页间的定时切换，切换秒数也可以手动设置，是不是很方便？需要的朋友，下载拿走吧！

参考：[Chrome浏览器定时自动切换标签页插件auto-tab(下载)-码代码-李雷博客](https://www.mdaima.com/news/179.html)

## 使用说明

1. 安装后，点击插件，输入刷新时间间隔，单位秒，点击开始按钮即可开始切换
2. 点击停止按钮即可停止切换
3. 刷新时间间隔可以随时修改

## 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

## 特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)