Page Tree

一个Chrome扩展，用于可视化展示浏览器标签页的打开关系。

功能特点

• 实时跟踪标签页的打开关系
• 树形图可视化展示页面关系
• 支持页面标题和URL显示
• 根据页面存活时间显示不同颜色
• 支持缩放和拖拽
• 鼠标悬停时高亮显示相关路径
• 点击节点可跳转到对应页面
• 支持清空历史数据

安装方法

1. 克隆仓库到本地

git clone https://github.com/zhyt1985/page-tree.git
cd page-tree

2. 安装依赖

yarn install

3. 构建扩展

yarn build

4. 在Chrome中加载扩展

• 打开Chrome扩展管理页面 (chrome://extensions/)
• 开启"开发者模式"
• 点击"加载已解压的扩展"
• 选择项目的dist目录

使用方法

1. 安装扩展后，点击工具栏中的扩展图标打开可视化页面
2. 页面中会显示当前所有标签页的关系树
3. 可以通过以下方式与关系树交互：
   • 使用鼠标滚轮或选择器进行缩放
   • 拖拽移动树图
   • 悬停在节点上查看详细信息
   • 点击节点跳转到对应页面
   • 使用清空按钮删除历史数据

开发

• 开发模式

yarn start

• 生产构建

yarn build

技术栈

• TypeScript
• React 18.2.0
• ECharts 5.6.0
• Ant Design 5.22.7
• Chrome Extension API

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！