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