Skip to content

Latest commit

 

History

History
377 lines (299 loc) · 13.7 KB

File metadata and controls

377 lines (299 loc) · 13.7 KB

知乎回答复制助手优化项目 Case Study

项目概述

本项目旨在优化知乎回答复制助手的功能,解决在复制知乎回答内容时遇到的各种问题,包括内容提取不准确、格式错误、元素缺失等问题。通过系统性的调试和优化,最终实现了完整、准确的知乎回答内容复制功能。

问题分析与解决方案

问题1:调试信息不足,难以定位问题根源

问题表现:

  • 脚本运行时缺乏详细的调试信息
  • 无法准确了解各个步骤的执行情况
  • 难以定位内容提取失败的具体原因

问题原因:

  • 原始脚本缺乏完善的日志记录机制
  • 关键步骤没有输出调试信息
  • 错误处理不够详细

修复思路:

  • 在脚本的关键步骤添加详细的console.log输出
  • 记录元素查找、数据提取、内容处理等各个环节的状态
  • 增加错误捕获和警告信息

修复措施:

  • optimize.js中添加了15个详细的调试步骤
  • 包括元素查找状态、提取的数据内容、处理计数、最终内容预览等
  • 添加了错误处理、警告信息和成功/失败指示器

修复结果:

  • 能够清晰地追踪脚本执行过程
  • 快速定位问题所在的具体步骤
  • 为后续优化提供了有力的调试支持

问题2:内容组合顺序错误

问题表现:

  • 复制的内容中问题标题位置不正确
  • 实际输出与期望输出的顺序不匹配
  • 缺少完整的标题格式

问题原因:

  • combinedContent构建逻辑中元素添加顺序有误
  • 问题标题的处理逻辑不够完善
  • 缺少标准化的内容格式定义

修复思路:

  • 重新设计内容组合的逻辑顺序
  • 确保第一行包含完整的标题格式
  • 调整各元素在最终内容中的位置

修复措施:

  • 修改了内容组合逻辑,确保正确的顺序:
    1. 第一行:"问题标题 - 答主姓名的回答 - 知乎"
    2. 答案链接
    3. 答主链接
    4. 签名档
    5. 答案正文
    6. 问题标题(单独一行)
    7. 发布时间

修复结果:

  • 内容顺序符合预期格式
  • 第一行标题格式完整正确
  • 各元素位置准确无误

问题3:答主信息提取不准确

问题表现:

  • 答主姓名获取失败或不准确
  • 答主链接缺失
  • 签名档信息提取不完整

问题原因:

  • 原有的选择器优先级不合理
  • 缺少对data-zop属性的解析
  • 备用选择器覆盖不全面

修复思路:

  • 建立优先级明确的选择器体系
  • 优先使用最可靠的数据源
  • 提供多层次的备用方案

修复措施:

  • 重构了getAuthorInfo函数,采用优先级策略:
    1. 优先从contentItem.dataset.zop解析
    2. .AuthorInfo区域的meta标签获取
    3. 从特定链接元素获取
    4. 最后备用方案
  • 添加了新的签名档选择器.RichText.css-1g0fqss
  • 增加了详细的调试日志

修复结果:

  • 答主信息提取准确率显著提升
  • 覆盖了更多的页面结构变化情况
  • 提供了可靠的备用机制

问题4:重复内容问题

问题表现:

  • 问题标题在复制内容中出现重复
  • 内容结构冗余
  • 与期望输出格式不符

问题原因:

  • 在构建combinedContent时重复添加了问题标题
  • 纯文本内容构建逻辑与HTML内容不一致

修复思路:

  • 清理重复的内容添加逻辑
  • 统一HTML和纯文本的内容结构
  • 确保内容的唯一性

修复措施:

  • 移除了combinedContent中重复的问题标题添加代码
  • 修正了navigator.clipboard部分的纯文本构建逻辑
  • 确保HTML和纯文本内容结构一致

修复结果:

  • 消除了内容重复问题
  • 输出格式清晰简洁
  • 符合预期的内容结构

问题5:剪贴板复制兼容性

问题表现:

  • 在某些环境下复制功能失效
  • 不同复制方法的内容格式不一致

问题原因:

  • 缺少多种复制方法的备用机制
  • HTML和纯文本格式处理不统一

修复思路:

  • 实现多层次的复制备用方案
  • 确保各种复制方法的内容一致性

修复措施:

  • 保留了GM_setClipboard作为主要复制方法
  • 添加了navigator.clipboard.write作为备用
  • 统一了各种复制方法的内容格式

修复结果:

  • 提高了复制功能的兼容性
  • 确保了跨环境的稳定性
  • 内容格式保持一致

问题6:知乎问题页面标题提取失败

问题表现:

  • 在知乎问题页面(/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.comzhihu.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)
  • 特殊测试还包含不同域名下的对比文件

项目成果

  1. 功能完整性:实现了完整的知乎回答内容复制功能
  2. 准确性:内容提取准确,格式正确
  3. 稳定性:通过多重备用机制确保功能稳定
  4. 可维护性:详细的调试日志便于后续维护
  5. 兼容性:支持多种复制方法,适应不同环境

敏捷开发故事卡片

Story 1: 添加详细调试日志

标题: 作为开发者,我需要详细的调试信息来快速定位问题

说明:

  • AC1: 脚本在执行时输出15个详细的调试步骤
  • AC2: 调试信息包括元素查找状态、提取的数据内容、处理计数
  • AC3: 包含错误处理、警告信息和成功/失败指示器
  • AC4: 调试信息在浏览器控制台中清晰可见
  • AC5: 能够通过调试信息快速定位问题所在的具体步骤

Story 2: 修复内容组合顺序

标题: 作为用户,我需要复制的内容按照正确的顺序排列

说明:

  • AC1: 第一行格式为"问题标题 - 答主姓名的回答 - 知乎"
  • AC2: 内容顺序为:标题行、答案链接、答主链接、签名档、答案正文、问题标题、发布时间
  • AC3: 复制的内容与期望输出格式完全匹配
  • AC4: 各元素之间有适当的换行分隔
  • AC5: 内容结构清晰易读

Story 3: 优化答主信息提取

标题: 作为用户,我需要准确获取答主的姓名、链接和签名档信息

说明:

  • AC1: 优先从data-zop属性解析答主信息
  • AC2: 提供多层次备用选择器确保信息获取成功
  • AC3: 答主姓名提取准确率达到100%
  • AC4: 答主链接格式正确且可访问
  • AC5: 签名档信息完整提取,包括新增的选择器支持
  • AC6: 每个提取步骤都有相应的调试日志

Story 4: 消除重复内容

标题: 作为用户,我需要复制的内容没有重复信息

说明:

  • AC1: 问题标题在复制内容中只出现在指定位置
  • AC2: HTML和纯文本内容结构保持一致
  • AC3: 移除所有冗余的内容添加逻辑
  • AC4: 最终输出内容简洁清晰
  • AC5: 通过测试用例验证无重复内容

Story 5: 增强剪贴板复制兼容性

标题: 作为用户,我需要在不同环境下都能成功复制内容

说明:

  • AC1: 提供GM_setClipboard作为主要复制方法
  • AC2: 提供navigator.clipboard.write作为备用复制方法
  • AC3: 各种复制方法的内容格式保持一致
  • AC4: 复制功能在主流浏览器中稳定工作
  • AC5: 复制失败时有明确的错误提示
  • AC6: 支持HTML和纯文本两种格式的复制

Story 6: 建立完整测试体系

标题: 作为开发者,我需要完整的测试用例来验证功能正确性

说明:

  • AC1: 建立7个不同场景的测试用例
  • AC2: 每个测试用例包含源文件、实际输出、期望输出和控制台日志
  • AC3: 测试用例覆盖各种边界情况和异常场景
  • AC4: 最终测试用例(test7)完全通过验证
  • AC5: 测试结果可重现且稳定
  • AC6: 测试文件结构清晰,便于维护和扩展

Story 7: 优化跨平台换行兼容性

标题: 作为用户,我需要复制的内容在不同编辑器中都能正确显示换行

说明:

  • AC1: 在Windows Notepad中正确显示段落换行
  • AC2: 与Evernote等富文本编辑器的显示效果保持一致
  • AC3: 显式处理HTML中的<p>标签,确保段落分隔
  • AC4: 纯文本版本使用明确的\n字符进行换行
  • AC5: 保持HTML版本的格式不变
  • AC6: 通过test7验证跨平台兼容性

问题7:Chrome环境下HTML标签残留

问题表现:

  • 在Chrome浏览器环境下,复制知乎内容时会残留HTML标签
  • Firefox环境下工作正常,但Chrome下输出包含不需要的HTML标记
  • 复制到纯文本编辑器时显示HTML源码而非格式化文本

问题原因:

  • Chrome和Firefox对剪贴板API的处理方式不同
  • 复制逻辑中HTML和纯文本格式处理不统一
  • 缺少针对不同浏览器的兼容性处理

修复思路:

  • 统一复制逻辑,优先生成纯文本格式
  • 使用navigator.clipboard.writeText作为主要复制方法
  • 确保跨浏览器的一致性体验

修复措施:

  • 重构复制逻辑,不再生成HTML格式的combinedContent
  • 直接生成格式化的纯文本内容
  • 添加段落处理逻辑,从<p>标签提取文本并用换行分隔
  • 优化剪贴板操作,优先使用navigator.clipboard.writeText
  • 保留textarea + execCommand作为备用方案

修复结果:

  • Chrome和Firefox环境下都能输出干净的纯文本
  • 消除了HTML标签残留问题
  • 保持了正确的段落格式
  • 提高了跨浏览器兼容性

问题8:Windows记事本换行显示问题

问题表现:

  • 复制内容粘贴到Windows记事本时,正文前后出现多余换行
  • 在印象笔记等富文本编辑器中显示正常
  • 记事本中的格式显得松散,影响阅读体验

问题原因:

  • 签名档后添加了多余的换行符
  • 段落之间的换行处理不够精确
  • 发布时间前的换行过多

修复思路:

  • 精确控制各部分之间的换行数量
  • 确保记事本和富文本编辑器的一致性显示
  • 优化整体格式的紧凑性

修复措施:

  • 签名档后只保留单个换行符
  • 正文段落之间使用单个换行分隔,最后一段后不添加额外换行
  • 发布时间前只保留单个换行符
  • 移除了多余的换行添加逻辑

修复结果:

  • 记事本中的显示更加紧凑和整洁
  • 消除了多余的空白行
  • 保持了与印象笔记等编辑器的一致性
  • 提升了整体的阅读体验

Story 8: 修复知乎问题页面标题提取

标题: 作为用户,我需要在知乎问题页面也能正确复制包含标题的完整内容

说明:

  • AC1:/question/路径的知乎页面能够正确提取问题标题
  • AC2: 优先从h1.QuestionHeader-title元素获取标题
  • AC3: 保持对原有回答页面的完全兼容性
  • AC4: 提供详细的调试日志追踪标题提取过程
  • AC5: 在不同知乎域名下都能稳定工作
  • AC6: 通过test8和test9验证修复效果,确保功能完整性

Story 9: 解决Chrome环境下HTML标签残留

标题: 作为用户,我需要在Chrome浏览器中也能复制干净的纯文本内容

说明:

  • AC1: Chrome和Firefox环境下复制结果保持一致
  • AC2: 复制内容不包含任何HTML标签
  • AC3: 优先使用navigator.clipboard.writeText进行复制
  • AC4: 保持正确的段落格式和换行
  • AC5: 提供可靠的备用复制方案
  • AC6: 通过test10验证跨浏览器兼容性

Story 10: 优化Windows记事本换行显示

标题: 作为用户,我需要复制的内容在记事本中显示紧凑整洁

说明:

  • AC1: 消除正文前后的多余换行
  • AC2: 签名档后只保留单个换行符
  • AC3: 段落间使用单个换行分隔
  • AC4: 发布时间前只保留单个换行符
  • AC5: 保持与富文本编辑器的显示一致性
  • AC6: 通过实际测试验证记事本显示效果