5.3 KiB
5.3 KiB
BlurText 更新日志
v2.0.0 (2025-01-10) - 文本选择模式
🎉 新功能
双模式支持
现在 BlurText 支持两种模糊模式，满足不同场景需求：
-
🖱️ 元素模式（原有功能）
- 鼠标悬停查看高亮
- 点击元素进行模糊
- 适用于结构化内容（表格、卡片等）
-
📝 文本选择模式（新增功能）⭐
- 拖动鼠标选择任意文本
- 点击浮动按钮模糊选中内容
- 完美解决纯文本节点的模糊问题
- 适用于文章、段落等纯文本内容
🔧 技术实现
文本选择模式核心特性
使用标准 Selection API 实现：
// 1. 监听文本选择
document.addEventListener('mouseup', handleTextSelection);
// 2. 获取选中文本
const selection = window.getSelection();
const range = selection.getRangeAt(0);
// 3. 包裹并模糊
const span = document.createElement('span');
range.surroundContents(span);
span.classList.add('blurtext-blurred');
智能浮动按钮
- 自动定位在选中文本下方
- 渐入动画效果
- 点击后自动隐藏
错误处理
- 捕获复杂 HTML 结构的异常
- 提供友好的错误提示
- 不会破坏页面功能
🎨 UI 改进
Popup 界面升级
- 新增模式切换按钮（图形化设计）
- 动态使用提示（根据模式显示不同说明）
- 更清晰的视觉反馈
模式图标
- 🖱️ 元素模式 - 代表点击操作
- 📝 文本选择模式 - 代表文本选择
CSS 样式增强
- 新增模糊按钮样式（渐变背景 + 阴影）
- 按钮动画效果（弹出 + 悬停缩放）
- 更好的视觉层级
📝 使用指南
元素模式使用方法
1. 点击扩展图标打开 Popup
2. 选择"元素模式"
3. 点击"开启模糊模式"
4. 鼠标悬停查看高亮
5. 点击元素进行模糊
文本选择模式使用方法 ⭐
1. 点击扩展图标打开 Popup
2. 选择"文本选择模式"
3. 点击"开启模糊模式"
4. 拖动鼠标选择文本
5. 点击浮动按钮"🔒 模糊选中文本"
6. 可以多次选择和模糊
🆚 两种模式对比
| 特性 | 元素模式 | 文本选择模式 |
|---|---|---|
| 操作方式 | 点击元素 | 拖动选择文本 |
| 适用场景 | 结构化内容 | 纯文本内容 |
| 精确度 | 按元素边界 | 按字符级别 |
| DOM 修改 | 不修改 | 添加 span 包裹 |
| 预览方式 | 悬停高亮 | 浏览器原生选择 |
| 典型使用 | 表格、卡片、按钮 | 段落、文章、评论 |
🎯 使用场景示例
场景 1：文章中的敏感信息
<p>用户张三的手机号是138-8888-9999，邮箱是zhang@example.com</p>
元素模式：
- 点击 → 模糊整个段落 ❌
文本选择模式：
- 选择"138-8888-9999" → 只模糊手机号 ✅
- 选择"zhang@example.com" → 只模糊邮箱 ✅
场景 2：表格数据
<table>
<tr><td>姓名</td><td>李四</td></tr>
<tr><td>工号</td><td>E12345</td></tr>
</table>
元素模式：
- 点击第二列的 td → 精确模糊单元格 ✅
文本选择模式：
- 也可以选择文本模糊，但元素模式更快捷
📊 代码变更统计
| 文件 | 变更类型 | 行数变化 |
|---|---|---|
| content.js | 新增功能 | +100 行 |
| popup.html | UI 更新 | +30 行 |
| popup.js | 逻辑扩展 | +60 行 |
| content.css | 样式新增 | +43 行 |
| 总计 | +233 行 |
🐛 已修复问题
-
✅ popup 关闭问题
- 说明：这是浏览器扩展的默认行为，不是 bug
- 正常使用：开启模糊模式后，popup 会自动关闭
-
✅ 纯文本节点无法模糊
- 通过文本选择模式完美解决
- 不再需要复杂的文本节点检测
🔍 技术亮点
1. Selection API 的正确使用
- 使用
window.getSelection()获取选区 - 使用
range.surroundContents()包裹文本 - 正确处理
surroundContents异常
2. 模式切换机制
- 动态添加/移除事件监听器
- 根据模式显示不同的 UI 提示
- 实时切换无需刷新
3. 用户体验优化
- 浮动按钮自动定位
- 平滑动画过渡
- 友好的错误提示
🚀 性能优化
- 事件监听器按需添加/移除
- 避免不必要的 DOM 查询
- CSS 动画使用 GPU 加速（transform）
📚 参考资料
本次更新参考了以下浏览器扩展的实现：
- blurweb.app - 文本选择模式设计
- Selection API - Mozilla 文档
🔮 后续计划
- 区域框选模式 - 拖拽绘制矩形模糊区域
- 模糊记忆 - 页面刷新后保持模糊状态
- 快捷键支持 - Ctrl+B 快速切换模式
- 批量操作 - 一次选择多个区域
v1.0.0 (2025-01-09) - 初始版本
功能
- ✅ 元素点击模糊
- ✅ 模糊强度调节
- ✅ 批量清除模糊
- ✅ ESC 键退出
升级建议
从 v1.0.0 升级到 v2.0.0
- 刷新扩展（chrome://extensions/）
- 重新加载需要使用的网页
- 尝试新的文本选择模式
兼容性：
- ✅ 完全向后兼容
- ✅ 元素模式保持不变
- ✅ 无需修改使用习惯