# 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 操作复杂，容易出问题）
- ❌ 临时元素管理（生命周期难以控制）
- ❌ 智能识别（正则匹配不够可靠）
- ✅ 让用户明确点击目标元素（简单直接）