网页目录助手

介绍

# 网页目录助手 - 为任意网页自动生成目录

## 什么是网页目录助手？
网页目录助手是一款浏览器扩展，可以自动为任何网页生成浮动的、可交互的目录。它让冗长的滚动页面变得易于导航，只需轻轻一点。

## 为什么要安装网页目录助手？
### 📚 完美适配长篇内容
不再在冗长的文章、技术文档、教程和博客中无休止地滚动。网页目录助手自动识别标题（h1-h6），创建导航面板，让您可以瞬间跳转到任何章节。

### 🎯 适用于任何网站
与一些只能在特定平台上使用的目录工具不同，网页目录助手无处不在：

- **技术文档** - API 文档、编程指南、教程

- **博客文章** - Medium、个人博客、新闻网站
- **论坛帖子** - Reddit、Stack Overflow、社区论坛
- **研究论文** - 学术文章、转 HTML 的 PDF
- **在线课程** - 分步教程、学习平台

### ⚙️ 高度可定制
每个网站都不同。网页目录助手根据您的需求进行调整：

- **自定义选择器** - 使用 CSS 或 XPath 选择器定位特定元素
- **可视化元素拾取** - 只需点击元素即可创建自定义选择器
- **按站点控制** - 为单个网站启用/禁用扩展
- **位置记忆** - 将浮动按钮拖到任何位置；它会记住您的偏好

### 🌙 深色模式支持
自动适应您的浏览器主题：
- **浅色主题** - 纯净的白色背景配深色文字
- **深色主题** - 深灰背景配浅色文字，护眼舒适
- **自动检测** - 根据您的系统偏好设置自动切换

### 🌐 完整国际化
- **English** - 为英语用户提供完整支持
- **中文** - 完整的中文支持
- **自动检测** - 自动切换到浏览器语言（默认为英语）

核心功能

### 自动目录生成
- **自动标题识别** - 默认识别标准 HTML 标题（h1-h6）
- **增强可见性检测** - 使用计算样式、边界矩形和父元素裁剪检查进行高级过滤
- **内容过滤** - 跳过隐藏元素、零尺寸元素和溢出裁剪内容
- **实时更新** - 页面内容变化时自动重建目录
- **防抖扫描** - 500ms 防抖避免频繁更新

### 可视化元素拾取
- **悬停高亮** - 实时查看您正在选择的内容
- **一键生成选择器** - 自动创建 CSS 选择器
- **站点配置保存** - 将选择器保存为站点偏好设置
- **单个选择器管理** - 悬停显示删除按钮，可逐个删除选择器

### 灵活的界面
- **浮动面板** - 可展开的目录面板，支持左右侧定位
- **可拖拽面板** - 拖拽面板标题栏可重新定位，位置自动保存
- **可拖拽TOC按钮** - 可拖动的"目录"按钮，可放置在任何位置
- **位置记忆与同步** - 按域名记住按钮和面板位置，折叠/展开时自动同步
- **流畅动画** - 平滑的面板展开/折叠过渡效果，提升用户体验
- **平滑滚动** - 点击任何目录项平滑滚动到该部分
- **主题自适应** - 自动适应浅色/深色主题
- **固定宽度对话框** - 所有对话框保持一致的 280px 宽度，长文本自动省略
- **对话框互斥** - 同一时间只显示一个对话框，界面更整洁

### 自动导航
- **当前位置高亮** - 自动高亮当前阅读位置
- **导航锁定** - 手动点击目录项时防止跳动
- **活动项恢复** - 页面变化后恢复高亮状态

使用方法

### 基本使用
1. **安装** 扩展（从 Edge/Chrome 应用商店）
2. **访问任何网页** - 浮动"目录"按钮会出现
3. **点击按钮** 展开目录面板
4. **导航** - 点击任何标题跳转到该部分

### 高级使用
1. **按站点控制** - 点击扩展图标为特定站点启用/禁用
2. **自定义选择器** - 如果默认目录不准确：
- 点击"拾取元素"
- 在页面上悬停元素
- 点击选择您想要跟踪的元素
- 保存为站点配置
3. **管理选择器** - 在站点配置对话框中：
- 查看当前站点所有已保存的选择器
- 悬停在任何选择器上显示删除按钮
- 点击 ✕ 删除单个选择器
4. **调整界面位置** - 拖动TOC按钮或面板标题栏到任意位置，位置会自动保存并同步

### 主题切换
扩展会自动检测浏览器的主题设置：
- **浅色模式**：白色背景配深色文字
- **深色模式**：深灰色背景配浅色文字，护眼舒适

无需手动配置 - 自动生效！

使用场景

| 场景 | 使用前 | 使用后 |
|------|--------|-------|
| **阅读 API 文档** | 滚动浏览 50+ 个章节 | 点击即可瞬间跳转 |
| **长篇博客** | 浏览时迷失位置 | 看到结构，随意跳转 |
| **研究论文** | 手动搜索章节 | 目录显示所有章节 |
| **在线教程** | 滚回查找之前的步骤 | 轻松逐步导航 |
| **论坛帖子** | 寻找特定讨论 | 跳转到相关评论 |
| **夜间阅读** | 明亮白色背景刺眼 | 深色模式保护双眼 |

插件安装说明

1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用