first commit

FIXES.md

@@ -0,0 +1,204 @@
+# BlurText 修复说明
+
+## 🔄 重大变更（2025-01-10）
+
+### 移除文本节点模糊功能
+
+**决策原因**：
+文本节点自动检测和包裹功能虽然看起来智能，但引入了过多复杂性和bug：
+1. 预览高亮和实际模糊的交互逻辑复杂
+2. DOM 操作频繁，容易出现元素消失的问题
+3. 预览 span 的生命周期管理困难
+4. 用户体验不够稳定
+
+**回归简单模式**：
+- ✅ 只模糊 HTML 元素（span, div, p, td 等）
+- ✅ 鼠标悬停高亮，点击即模糊
+- ✅ 稳定可靠，不会出现元素消失的问题
+- ❌ 不再自动检测和包裹纯文本节点
+- ❌ 不再智能识别敏感信息（手机号、邮箱等）
+
+**使用建议**：
+- 如果需要模糊纯文本，可以先手动用 `<span>` 包裹
+- 或者点击包含该文本的父元素进行整体模糊
+
+---
+
+## 🐛 已修复的问题
+
+### 问题 1：Popup 卡片在点击页面后消失
+
+**症状**：
+- 开启模糊模式后，点击扩展图标打开 popup
+- 点击网页上的文字进行模糊
+- Popup 卡片立即消失
+
+**原因**：
+这是浏览器扩展的**默认行为**，不是 bug：
+- 当用户点击 popup 外部的任何区域（包括网页内容）时，浏览器会自动关闭 popup
+- 这是 Chrome/Edge 扩展的标准行为，无法通过配置改变
+
+**解决方案**：
+1. **正常使用流程**：
+   - 点击扩展图标 → 开启模糊模式 → Popup 自动关闭
+   - 直接在网页上点击元素进行模糊
+   - 需要调整强度或关闭模式时，再次点击扩展图标打开 popup
+
+2. **替代方案**（未来考虑）：
+   - 添加侧边栏模式（使用 `chrome.sidePanel` API，需要 Manifest V3 + Chrome 114+）
+   - 添加快捷键支持（无需打开 popup 即可切换模式）
+
+---
+
+## ✅ 当前功能
+
+### 基础模糊功能
+```html
+<div>
+  <span>用户名</span>
+  <span>张三</span>
+</div>
+```
+
+**使用方法**：
+1. 开启模糊模式
+2. 鼠标悬停在元素上 → 显示蓝色高亮边框
+3. 点击元素 → 应用模糊效果
+4. 再次点击 → 取消模糊
+
+**特点**：
+- ✅ 悬停高亮的元素 = 点击后模糊的元素（所见即所得）
+- ✅ 可以模糊任何 HTML 元素
+- ✅ 可调节模糊强度（5-20px）
+- ✅ 支持批量清除所有模糊
+- ✅ ESC 键退出模糊模式
+
+---
+
+## 🎯 适用场景
+
+### 场景 1：结构化数据
+```html
+<table>
+  <tr>
+    <td>姓名</td>
+    <td>张三</td>
+  </tr>
+</table>
+```
+- 鼠标悬停第二个 `<td>` → 高亮
+- 点击 → 模糊 ✅
+
+### 场景 2：带标签的元素
+```html
+<p>
+  <strong>手机号：</strong>
+  <span>138-8888-9999</span>
+</p>
+```
+- 鼠标悬停 `<span>` → 高亮手机号
+- 点击 → 模糊手机号 ✅
+
+### 场景 3：纯文本（需要手动处理）
+```html
+<p>用户 张三 的手机号是 138-8888-9999</p>
+```
+- 悬停任意位置 → 高亮整个 `<p>`
+- 点击 → 模糊整段文字
+- **如需只模糊"张三"**：先手动编辑 HTML，用 `<span>张三</span>` 包裹
+
+---
+
+## 🔧 技术实现
+
+### 简化后的核心逻辑
+
+**content.js 核心函数**：
+
+```javascript
+// 1. 处理点击 - 简单直接
+function handleClick(e) {
+  if (!isBlurMode) return;
+  e.preventDefault();
+  e.stopPropagation();
+
+  let target = e.target;
+  if (target.classList.contains('blurtext-hint')) return;
+
+  // 直接切换目标元素的模糊状态
+  toggleBlur(target);
+}
+
+// 2. 处理悬停 - 高亮预览
+function handleMouseOver(e) {
+  if (!isBlurMode) return;
+
+  const target = e.target;
+  if (target.classList.contains('blurtext-hint') ||
+      target.classList.contains('blurtext-blurred')) {
+    return;
+  }
+
+  removeAllHighlights();
+  target.classList.add('blurtext-highlight');
+}
+
+// 3. 移除高亮 - 简单清理
+function removeAllHighlights() {
+  const highlighted = document.querySelectorAll('.blurtext-highlight');
+  highlighted.forEach(el => {
+    el.classList.remove('blurtext-highlight');
+  });
+}
+```
+
+**代码行数对比**：
+- 之前：531 行（包含文本节点检测、智能识别、预览管理）
+- 现在：约 250 行（移除了约 280 行复杂逻辑）
+- 减少 53% 代码量，提升稳定性
+
+---
+
+## 🧪 测试步骤
+
+1. 刷新扩展（`chrome://extensions/`）
+2. 打开任意网页
+3. 点击扩展图标，开启模糊模式
+4. **测试基础模糊**：
+   - 鼠标悬停在任意元素上 → 看到蓝色边框
+   - 点击元素 → 成功模糊 ✅
+   - 再次点击 → 取消模糊 ✅
+5. **测试强度调整**：
+   - 打开 popup，拖动滑块
+   - 已模糊的元素实时更新强度 ✅
+6. **测试批量清除**：
+   - 点击"清除所有模糊"按钮
+   - 所有模糊效果移除 ✅
+
+---
+
+## 📝 后续计划
+
+基于简单稳定的架构，未来可以考虑：
+
+1. **框选模糊**：拖拽鼠标框选区域进行模糊
+2. **模糊记忆**：页面刷新后保持模糊状态
+3. **快捷键**：Ctrl+B 快速切换模糊模式
+4. **预设模板**：保存常用的模糊配置
+5. **图片模糊**：支持模糊图片元素
+
+---
+
+## 💡 开发经验总结
+
+**设计原则**：
+1. **简单优于复杂**：不要过度设计，用户需要的是稳定可靠的功能
+2. **所见即所得**：悬停预览必须和点击结果完全一致
+3. **DOM 操作要谨慎**：频繁的 DOM 修改容易引入 bug
+4. **渐进增强**：先做好基础功能，再逐步添加高级特性
+
+**避免的陷阱**：
+- ❌ 自动检测和包裹文本节点（DOM 操作复杂，容易出问题）
+- ❌ 临时元素管理（生命周期难以控制）
+- ❌ 智能识别（正则匹配不够可靠）
+- ✅ 让用户明确点击目标元素（简单直接）