添加模糊记忆功能

2025-12-11 13:41:09 +08:00
parent ea0976b75b
commit ff85d891d4
5 changed files with 845 additions and 11 deletions
--- a/TESTING.md
+++ b/TESTING.md
@@ -0,0 +1,302 @@
+# 模糊记忆功能测试指南
+
+## 测试环境准备
+
+1. 在 Chrome/Edge 浏览器中加载扩展
+2. 打开 `test.html` 测试页面
+3. 打开浏览器控制台（F12）查看日志
+
+## 测试用例
+
+### 测试 1：元素模式模糊记忆
+
+**步骤：**
+1. 点击扩展图标，选择"元素模式"
+2. 点击"开启模糊模式"
+3. 在测试页面上点击几个元素进行模糊
+4. 按 ESC 退出模糊模式
+5. **刷新页面（F5）**
+6. 等待页面加载完成
+
+**预期结果：**
+- ✅ 页面顶部显示提示："已恢复 N 个模糊效果"
+- ✅ 之前模糊的元素自动恢复模糊状态
+- ✅ 控制台输出恢复日志
+
+**验证方法：**
+```javascript
+// 在控制台执行
+chrome.storage.local.get(['blurredData'], (result) => {
+  console.log('存储的模糊数据:', result.blurredData);
+});
+```
+
+---
+
+### 测试 2：文本选择模式模糊记忆
+
+**步骤：**
+1. 点击扩展图标，选择"文本选择模式"
+2. 点击"开启模糊模式"
+3. 拖动选择几段文本，点击浮动按钮模糊
+4. 按 ESC 退出模糊模式
+5. **刷新页面（F5）**
+
+**预期结果：**
+- ✅ 选中的文本段落自动恢复模糊
+- ✅ 点击模糊的文本可以恢复
+
+**注意事项：**
+- 如果文本内容改变，可能无法恢复
+- XPath 必须能够找到对应的文本节点
+
+---
+
+### 测试 3：区域模式模糊记忆
+
+**步骤：**
+1. 点击扩展图标，选择"区域模式"
+2. 点击"开启模糊模式"
+3. 拖动鼠标绘制几个矩形区域
+4. 按 ESC 退出模糊模式
+5. **刷新页面（F5）**
+
+**预期结果：**
+- ✅ 模糊区域自动恢复
+- ✅ 点击区域可以移除
+- ✅ 区域位置和大小保持一致
+
+**注意事项：**
+- 使用绝对坐标存储
+- 如果页面布局改变，区域位置可能偏移
+
+---
+
+### 测试 4：混合模式模糊记忆
+
+**步骤：**
+1. 使用元素模式模糊几个元素
+2. 切换到文本选择模式模糊几段文本
+3. 切换到区域模式绘制几个区域
+4. **刷新页面（F5）**
+
+**预期结果：**
+- ✅ 所有模式的模糊效果都能恢复
+- ✅ 提示显示总数量
+
+---
+
+### 测试 5：清除模糊效果
+
+**步骤：**
+1. 添加一些模糊效果
+2. 点击扩展图标
+3. 点击"清除所有模糊"按钮
+4. **刷新页面（F5）**
+
+**预期结果：**
+- ✅ 页面不再显示任何模糊效果
+- ✅ 不显示"已恢复"提示
+- ✅ 存储数据已清空
+
+**验证方法：**
+```javascript
+chrome.storage.local.get(['blurredData'], (result) => {
+  const pageData = result.blurredData?.[window.location.href];
+  console.log('当前页面数据:', pageData); // 应该为 undefined
+});
+```
+
+---
+
+### 测试 6：多页面隔离
+
+**步骤：**
+1. 在 `test.html` 页面添加模糊效果
+2. 打开另一个网页（如 `file:///F:/test2.html`）
+3. 添加不同的模糊效果
+4. 分别刷新两个页面
+
+**预期结果：**
+- ✅ 每个页面只恢复自己的模糊效果
+- ✅ 不会互相干扰
+
+---
+
+### 测试 7：强度变化
+
+**步骤：**
+1. 添加模糊效果（强度 10px）
+2. 调整强度滑块到 15px
+3. **不刷新页面**，再添加新的模糊效果
+4. 刷新页面
+
+**预期结果：**
+- ✅ 所有模糊效果恢复
+- ✅ 强度可能不完全一致（当前实现使用全局 intensity）
+
+**改进建议：**
+- 每个元素单独存储其强度值
+
+---
+
+## 控制台日志参考
+
+**正常的恢复日志：**
+```
+[BlurText] Content script loaded
+[BlurText] Loaded blur intensity: 10
+[BlurText] Restoring blur data: {elements: Array(3), selections: Array(2), areas: Array(1), timestamp: 1234567890}
+[BlurText] Restored element blur: div.test-section > h2:nth-of-type(1)
+[BlurText] Restored selection blur: 138-0000-1234
+[BlurText] Restored area blur: {left: 100, top: 200, width: 300, height: 150}
+```
+
+**没有存储数据：**
+```
+[BlurText] No saved blur data for this page
+```
+
+**恢复失败警告：**
+```
+[BlurText] Failed to restore element: div.removed-element Error: Element not found
+```
+
+---
+
+## 常见问题排查
+
+### 问题 1：刷新后没有恢复
+
+**可能原因：**
+- 存储数据未保存成功
+- URL 变化（如添加了查询参数）
+- 元素被 JavaScript 动态删除
+
+**排查方法：**
+```javascript
+// 检查存储数据
+chrome.storage.local.get(['blurredData'], console.log);
+
+// 检查当前 URL
+console.log('Current URL:', window.location.href);
+```
+
+### 问题 2：部分元素未恢复
+
+**可能原因：**
+- DOM 结构变化
+- CSS 选择器失效
+- 元素动态加载延迟
+
+**解决方案：**
+- 查看控制台警告
+- 手动重新模糊
+
+### 问题 3：文本选择恢复失败
+
+**可能原因：**
+- 文本内容改变
+- XPath 路径变化
+- 文本节点被重新渲染
+
+**验证方法：**
+```javascript
+// 检查 XPath 是否有效
+const xpath = "//div[@id='content']/p[1]/text()[1]";
+const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+console.log('XPath result:', result.singleNodeValue);
+```
+
+---
+
+## 性能测试
+
+### 大量模糊元素测试
+
+**步骤：**
+1. 在页面上添加 50-100 个模糊效果
+2. 刷新页面
+3. 观察恢复时间和性能
+
+**监控指标：**
+```javascript
+// 在控制台执行
+console.time('restore');
+// 刷新页面
+// 等待恢复完成
+console.timeEnd('restore'); // 查看恢复耗时
+```
+
+**性能目标：**
+- 50 个元素：< 200ms
+- 100 个元素：< 500ms
+- 200 个元素：< 1000ms
+
+---
+
+## 测试结论模板
+
+```
+测试日期：2025-01-11
+测试浏览器：Chrome 120.0
+测试页面：test.html
+
+元素模式：✅ 通过
+文本选择模式：✅ 通过
+区域模式：✅ 通过
+混合模式：✅ 通过
+清除功能：✅ 通过
+多页面隔离：✅ 通过
+
+性能表现：
+- 10 个元素恢复耗时：45ms
+- 50 个元素恢复耗时：180ms
+
+已知问题：
+1. 无
+
+备注：
+功能正常，符合预期
+```
+
+---
+
+## 自动化测试（可选）
+
+如需编写自动化测试，可以参考以下代码：
+
+```javascript
+// test-restore.js
+async function testRestore() {
+  // 1. 清空存储
+  await chrome.storage.local.clear();
+
+  // 2. 模拟添加模糊数据
+  const testData = {
+    blurredData: {
+      [window.location.href]: {
+        elements: [
+          { selector: 'h1', intensity: 10 }
+        ],
+        selections: [],
+        areas: [],
+        timestamp: Date.now()
+      }
+    }
+  };
+  await chrome.storage.local.set(testData);
+
+  // 3. 刷新页面
+  window.location.reload();
+
+  // 4. 验证恢复（需要在新页面加载后执行）
+  setTimeout(() => {
+    const h1 = document.querySelector('h1');
+    const isBlurred = h1.classList.contains('blurtext-blurred');
+    console.log('Test result:', isBlurred ? 'PASS' : 'FAIL');
+  }, 1000);
+}
+
+testRestore();
+```