本项目旨在优化知乎回答复制助手的功能,解决在复制知乎回答内容时遇到的各种问题,包括内容提取不准确、格式错误、元素缺失等问题。通过系统性的调试和优化,最终实现了完整、准确的知乎回答内容复制功能。
问题表现:
- 脚本运行时缺乏详细的调试信息
- 无法准确了解各个步骤的执行情况
- 难以定位内容提取失败的具体原因
问题原因:
- 原始脚本缺乏完善的日志记录机制
- 关键步骤没有输出调试信息
- 错误处理不够详细
修复思路:
- 在脚本的关键步骤添加详细的console.log输出
- 记录元素查找、数据提取、内容处理等各个环节的状态
- 增加错误捕获和警告信息
修复措施:
- 在
optimize.js中添加了15个详细的调试步骤 - 包括元素查找状态、提取的数据内容、处理计数、最终内容预览等
- 添加了错误处理、警告信息和成功/失败指示器
修复结果:
- 能够清晰地追踪脚本执行过程
- 快速定位问题所在的具体步骤
- 为后续优化提供了有力的调试支持
问题表现:
- 复制的内容中问题标题位置不正确
- 实际输出与期望输出的顺序不匹配
- 缺少完整的标题格式
问题原因:
combinedContent构建逻辑中元素添加顺序有误- 问题标题的处理逻辑不够完善
- 缺少标准化的内容格式定义
修复思路:
- 重新设计内容组合的逻辑顺序
- 确保第一行包含完整的标题格式
- 调整各元素在最终内容中的位置
修复措施:
- 修改了内容组合逻辑,确保正确的顺序:
- 第一行:"问题标题 - 答主姓名的回答 - 知乎"
- 答案链接
- 答主链接
- 签名档
- 答案正文
- 问题标题(单独一行)
- 发布时间
修复结果:
- 内容顺序符合预期格式
- 第一行标题格式完整正确
- 各元素位置准确无误
问题表现:
- 答主姓名获取失败或不准确
- 答主链接缺失
- 签名档信息提取不完整
问题原因:
- 原有的选择器优先级不合理
- 缺少对
data-zop属性的解析 - 备用选择器覆盖不全面
修复思路:
- 建立优先级明确的选择器体系
- 优先使用最可靠的数据源
- 提供多层次的备用方案
修复措施:
- 重构了
getAuthorInfo函数,采用优先级策略:- 优先从
contentItem.dataset.zop解析 - 从
.AuthorInfo区域的meta标签获取 - 从特定链接元素获取
- 最后备用方案
- 优先从
- 添加了新的签名档选择器
.RichText.css-1g0fqss - 增加了详细的调试日志
修复结果:
- 答主信息提取准确率显著提升
- 覆盖了更多的页面结构变化情况
- 提供了可靠的备用机制
问题表现:
- 问题标题在复制内容中出现重复
- 内容结构冗余
- 与期望输出格式不符
问题原因:
- 在构建
combinedContent时重复添加了问题标题 - 纯文本内容构建逻辑与HTML内容不一致
修复思路:
- 清理重复的内容添加逻辑
- 统一HTML和纯文本的内容结构
- 确保内容的唯一性
修复措施:
- 移除了
combinedContent中重复的问题标题添加代码 - 修正了
navigator.clipboard部分的纯文本构建逻辑 - 确保HTML和纯文本内容结构一致
修复结果:
- 消除了内容重复问题
- 输出格式清晰简洁
- 符合预期的内容结构
问题表现:
- 在某些环境下复制功能失效
- 不同复制方法的内容格式不一致
问题原因:
- 缺少多种复制方法的备用机制
- HTML和纯文本格式处理不统一
修复思路:
- 实现多层次的复制备用方案
- 确保各种复制方法的内容一致性
修复措施:
- 保留了
GM_setClipboard作为主要复制方法 - 添加了
navigator.clipboard.write作为备用 - 统一了各种复制方法的内容格式
修复结果:
- 提高了复制功能的兼容性
- 确保了跨环境的稳定性
- 内容格式保持一致
问题表现:
- 在知乎问题页面(
/question/路径)复制回答时,问题标题无法正确获取 - 复制的内容缺少问题标题,导致内容不完整
- 现有的标题提取方法在问题页面失效
问题原因:
getQuestionInfo函数中缺少针对问题页面的标题提取逻辑- 问题页面的HTML结构与回答页面不同,标题位于
<h1 class="QuestionHeader-title">元素中 - 现有的四种提取方法都无法覆盖问题页面的结构
修复思路:
- 在
getQuestionInfo函数中添加新的标题提取方法 - 优先从
h1.QuestionHeader-title元素获取问题标题 - 保持现有方法作为备用方案,确保向后兼容性
修复措施:
- 在
getQuestionInfo函数开头添加了新的Method 1:// Method 1: 从问题页面的h1.QuestionHeader-title获取 const questionHeaderTitle = document.querySelector('h1.QuestionHeader-title'); if (questionHeaderTitle) { questionTitle = questionHeaderTitle.textContent.trim(); console.log('🎯 调试步骤6.1: 从h1.QuestionHeader-title获取问题标题:', questionTitle); }
- 将原有的四个方法重新编号为Method 2-5
- 添加了详细的调试日志以便追踪执行过程
- 保持了完整的备用机制
修复结果:
- 脚本现在能够正确提取知乎问题页面的标题
- 复制的内容完整包含问题标题
- 在
zhihu.com和zhihu.com/question两种域名下都能正常工作 - 通过test8和test9测试用例验证修复效果
- 保持了对原有功能的完全兼容性
项目通过了9个测试用例的验证:
- test1-test5:发现并修复了内容提取、格式、重复等问题
- test6-test7:解决了跨平台换行兼容性问题
- test8-test9:修复了知乎问题页面标题提取问题,最终完全通过
每个测试用例都包含:
- 源HTML文件(test*-src.html或test*-www.zhihu.com*.html)
- 实际输出(test*-act.txt)
- 期望输出(test*-exp.txt)
- 控制台日志(test*-console.log)
- 特殊测试还包含不同域名下的对比文件
- 功能完整性:实现了完整的知乎回答内容复制功能
- 准确性:内容提取准确,格式正确
- 稳定性:通过多重备用机制确保功能稳定
- 可维护性:详细的调试日志便于后续维护
- 兼容性:支持多种复制方法,适应不同环境
标题: 作为开发者,我需要详细的调试信息来快速定位问题
说明:
- AC1: 脚本在执行时输出15个详细的调试步骤
- AC2: 调试信息包括元素查找状态、提取的数据内容、处理计数
- AC3: 包含错误处理、警告信息和成功/失败指示器
- AC4: 调试信息在浏览器控制台中清晰可见
- AC5: 能够通过调试信息快速定位问题所在的具体步骤
标题: 作为用户,我需要复制的内容按照正确的顺序排列
说明:
- AC1: 第一行格式为"问题标题 - 答主姓名的回答 - 知乎"
- AC2: 内容顺序为:标题行、答案链接、答主链接、签名档、答案正文、问题标题、发布时间
- AC3: 复制的内容与期望输出格式完全匹配
- AC4: 各元素之间有适当的换行分隔
- AC5: 内容结构清晰易读
标题: 作为用户,我需要准确获取答主的姓名、链接和签名档信息
说明:
- AC1: 优先从
data-zop属性解析答主信息 - AC2: 提供多层次备用选择器确保信息获取成功
- AC3: 答主姓名提取准确率达到100%
- AC4: 答主链接格式正确且可访问
- AC5: 签名档信息完整提取,包括新增的选择器支持
- AC6: 每个提取步骤都有相应的调试日志
标题: 作为用户,我需要复制的内容没有重复信息
说明:
- AC1: 问题标题在复制内容中只出现在指定位置
- AC2: HTML和纯文本内容结构保持一致
- AC3: 移除所有冗余的内容添加逻辑
- AC4: 最终输出内容简洁清晰
- AC5: 通过测试用例验证无重复内容
标题: 作为用户,我需要在不同环境下都能成功复制内容
说明:
- AC1: 提供
GM_setClipboard作为主要复制方法 - AC2: 提供
navigator.clipboard.write作为备用复制方法 - AC3: 各种复制方法的内容格式保持一致
- AC4: 复制功能在主流浏览器中稳定工作
- AC5: 复制失败时有明确的错误提示
- AC6: 支持HTML和纯文本两种格式的复制
标题: 作为开发者,我需要完整的测试用例来验证功能正确性
说明:
- AC1: 建立7个不同场景的测试用例
- AC2: 每个测试用例包含源文件、实际输出、期望输出和控制台日志
- AC3: 测试用例覆盖各种边界情况和异常场景
- AC4: 最终测试用例(test7)完全通过验证
- AC5: 测试结果可重现且稳定
- AC6: 测试文件结构清晰,便于维护和扩展
标题: 作为用户,我需要复制的内容在不同编辑器中都能正确显示换行
说明:
- AC1: 在Windows Notepad中正确显示段落换行
- AC2: 与Evernote等富文本编辑器的显示效果保持一致
- AC3: 显式处理HTML中的
<p>标签,确保段落分隔 - AC4: 纯文本版本使用明确的
\n字符进行换行 - AC5: 保持HTML版本的格式不变
- AC6: 通过test7验证跨平台兼容性
问题表现:
- 在Chrome浏览器环境下,复制知乎内容时会残留HTML标签
- Firefox环境下工作正常,但Chrome下输出包含不需要的HTML标记
- 复制到纯文本编辑器时显示HTML源码而非格式化文本
问题原因:
- Chrome和Firefox对剪贴板API的处理方式不同
- 复制逻辑中HTML和纯文本格式处理不统一
- 缺少针对不同浏览器的兼容性处理
修复思路:
- 统一复制逻辑,优先生成纯文本格式
- 使用
navigator.clipboard.writeText作为主要复制方法 - 确保跨浏览器的一致性体验
修复措施:
- 重构复制逻辑,不再生成HTML格式的
combinedContent - 直接生成格式化的纯文本内容
- 添加段落处理逻辑,从
<p>标签提取文本并用换行分隔 - 优化剪贴板操作,优先使用
navigator.clipboard.writeText - 保留
textarea+execCommand作为备用方案
修复结果:
- Chrome和Firefox环境下都能输出干净的纯文本
- 消除了HTML标签残留问题
- 保持了正确的段落格式
- 提高了跨浏览器兼容性
问题表现:
- 复制内容粘贴到Windows记事本时,正文前后出现多余换行
- 在印象笔记等富文本编辑器中显示正常
- 记事本中的格式显得松散,影响阅读体验
问题原因:
- 签名档后添加了多余的换行符
- 段落之间的换行处理不够精确
- 发布时间前的换行过多
修复思路:
- 精确控制各部分之间的换行数量
- 确保记事本和富文本编辑器的一致性显示
- 优化整体格式的紧凑性
修复措施:
- 签名档后只保留单个换行符
- 正文段落之间使用单个换行分隔,最后一段后不添加额外换行
- 发布时间前只保留单个换行符
- 移除了多余的换行添加逻辑
修复结果:
- 记事本中的显示更加紧凑和整洁
- 消除了多余的空白行
- 保持了与印象笔记等编辑器的一致性
- 提升了整体的阅读体验
标题: 作为用户,我需要在知乎问题页面也能正确复制包含标题的完整内容
说明:
- AC1: 在
/question/路径的知乎页面能够正确提取问题标题 - AC2: 优先从
h1.QuestionHeader-title元素获取标题 - AC3: 保持对原有回答页面的完全兼容性
- AC4: 提供详细的调试日志追踪标题提取过程
- AC5: 在不同知乎域名下都能稳定工作
- AC6: 通过test8和test9验证修复效果,确保功能完整性
标题: 作为用户,我需要在Chrome浏览器中也能复制干净的纯文本内容
说明:
- AC1: Chrome和Firefox环境下复制结果保持一致
- AC2: 复制内容不包含任何HTML标签
- AC3: 优先使用
navigator.clipboard.writeText进行复制 - AC4: 保持正确的段落格式和换行
- AC5: 提供可靠的备用复制方案
- AC6: 通过test10验证跨浏览器兼容性
标题: 作为用户,我需要复制的内容在记事本中显示紧凑整洁
说明:
- AC1: 消除正文前后的多余换行
- AC2: 签名档后只保留单个换行符
- AC3: 段落间使用单个换行分隔
- AC4: 发布时间前只保留单个换行符
- AC5: 保持与富文本编辑器的显示一致性
- AC6: 通过实际测试验证记事本显示效果