AI 对话导航、提示词库、问题答案导出、阅读主题与搜索定位增强脚本。
本文档引用的文件
AI对话导航是一个专为浏览器设计的油猴脚本（Tampermonkey），旨在为ChatGPT和Gemini等AI对话平台提供强大的导航增强功能。该项目通过在网页中注入自定义UI组件，为用户提供了以下核心能力：
该项目采用现代化的Web技术栈，使用原生JavaScript、Shadow DOM和CSS自定义属性，确保在不同AI对话平台上的兼容性和稳定性。
项目采用简洁的单文件架构，包含两个完全相同的实现版本：
graph TB
subgraph "项目根目录"
A[AI-Nav.js] --> B[主功能实现]
C[AI-Nav-backup.js] --> D[备份版本]
end
subgraph "核心模块"
E[配置层 Config]
F[工具层 Utils]
G[业务层 Logic]
H[组件层 UI]
end
A --> E
A --> F
A --> G
A --> H
C --> E
C --> F
C --> G
C --> H
图表来源
章节来源
配置层负责管理所有常量、选择器和全局状态：
提供核心功能函数：
实现主要业务逻辑：
构建用户界面：
章节来源
项目采用分层架构设计，确保代码的可维护性和扩展性：
graph TD
A[用户界面层] --> B[业务逻辑层]
B --> C[工具函数层]
C --> D[数据持久化层]
A1[NavigatorApp组件]
A2[设置面板]
A3[提示词面板]
A4[导出对话框]
B1[消息提取]
B2[Markdown转换]
B3[搜索定位]
B4[数据验证]
C1[DOM查询]
C2[事件处理]
C3[样式应用]
C4[存储管理]
D1[localStorage]
D2[文件下载]
D3[剪贴板操作]
A1 --> B1
A2 --> B2
A3 --> B3
A4 --> B4
B1 --> C1
B2 --> C2
B3 --> C3
B4 --> C4
C1 --> D1
C2 --> D2
C3 --> D3
C4 --> D1
图表来源
章节来源
NavigatorApp是整个应用的核心控制器，继承自HTMLElement，实现了完整的MVC架构：
classDiagram
class NavigatorApp {
+connectedCallback()
+loadSettings()
+saveSettings()
+applyDepth()
+render()
+collectConversationMessages()
+exportConversation()
+buildSelectedExportMessages()
-initDraggable()
-updateOpenState()
-updateList()
}
class QuestionData {
+QuestionItem[] _allQuestions
+Element[] _allElements
+Detail[] _allDetails
+String[] _allQuestionIds
+Number _depth
+Set _selectedQuestionIds
}
class ReaderConfig {
+String theme
+String fontType
+Number fontSize
+Number maxWidth
+Boolean hideFooter
+Boolean cleanMode
+Boolean publicStyle
+String publicColor
+String publicType
}
NavigatorApp --> QuestionData : manages
NavigatorApp --> ReaderConfig : applies
图表来源
导航面板提供以下核心功能：
设置面板包含多个配置区域：
章节来源
提示词库系统提供完整的提示词生命周期管理：
sequenceDiagram
participant U as 用户
participant P as 提示词面板
participant V as 验证器
participant S as 存储
participant L as 列表
U->>P : 新增提示词
P->>V : 验证输入
V-->>P : 验证结果
P->>S : 保存到localStorage
S-->>L : 更新列表
L-->>U : 显示新提示词
U->>P : 搜索提示词
P->>L : 过滤显示
L-->>U : 展示搜索结果
U->>P : 批量操作
P->>L : 更新选中状态
L-->>P : 反馈操作结果
图表来源
提示词条目包含以下字段：
| 字段名 | 类型 | 描述 | 必填 |
|---|---|---|---|
| id | String | 唯一标识符 | 是 |
| title | String | 标题 | 是 |
| content | String | 内容 | 是 |
| group | String | 分组标签 | 否 |
| updatedAt | Number | 更新时间戳 | 否 |
章节来源
阅读增强系统提供丰富的阅读体验定制选项：
flowchart TD
A[用户配置] --> B{主题选择}
B --> |默认| C[系统主题]
B --> |浅色| D[白色主题]
B --> |深色| E[暗黑主题]
B --> |护眼| F[绿色主题]
B --> |复古| G[棕色主题]
B --> |灰度| H[黑白主题]
A --> I{字体选择}
I --> J[微软雅黑]
I --> K[宋体]
I --> L[黑体]
I --> M[楷体]
I --> N[仿宋]
I --> O[圆体]
I --> P[等宽字体]
A --> Q{宽度设置}
Q --> R[自定义像素值]
A --> S{净化模式}
S --> T[启用]
S --> U[禁用]
C --> V[应用样式]
D --> V
E --> V
F --> V
G --> V
H --> V
J --> V
K --> V
L --> V
M --> V
N --> V
O --> V
P --> V
R --> V
T --> V
U --> V
图表来源
| 主题名称 | 颜色方案 | 适用场景 |
|---|---|---|
| default | 系统默认 | 通用阅读 |
| white | 白色背景 | 浅色阅读 |
| yellow | 暖色调 | 护眼阅读 |
| green | 绿色背景 | 长时间阅读 |
| sepia | 褐色背景 | 复古阅读 |
| gray | 灰色背景 | 专业阅读 |
| dark | 黑色背景 | 夜间阅读 |
章节来源
项目采用松耦合的设计，各模块之间的依赖关系清晰：
graph LR
A[配置层] --> B[工具层]
B --> C[业务层]
C --> D[组件层]
E[DOM查询] --> F[消息提取]
F --> G[Markdown转换]
G --> H[导出功能]
I[事件处理] --> J[UI更新]
J --> K[存储管理]
K --> L[数据持久化]
M[样式应用] --> N[主题切换]
N --> O[字体配置]
O --> P[布局调整]
图表来源
项目支持以下平台和浏览器：
章节来源
| 问题描述 | 可能原因 | 解决方案 |
|---|---|---|
| 导航面板不显示 | 脚本未正确安装 | 重新安装油猴扩展 |
| 消息提取失败 | 页面结构变化 | 检查选择器配置 |
| 提示词无法保存 | 浏览器存储限制 | 清理浏览器缓存 |
| 阅读样式异常 | CSS冲突 | 刷新页面或禁用其他样式扩展 |
章节来源
AI对话导航脚本通过精心设计的架构和丰富的功能特性，为用户提供了卓越的AI对话体验。项目的主要优势包括：