ytc/blurweb

Fork 0

Files

ytc1012 760f3ec0d0 first commit

2025-12-10 18:18:30 +08:00

5.5 KiB

Raw Blame History

BlurText 修复说明

🔄 重大变更（2025-01-10）

移除文本节点模糊功能

决策原因：文本节点自动检测和包裹功能虽然看起来智能，但引入了过多复杂性和bug：

预览高亮和实际模糊的交互逻辑复杂
DOM 操作频繁，容易出现元素消失的问题
预览 span 的生命周期管理困难
用户体验不够稳定

回归简单模式：

✅ 只模糊 HTML 元素（span, div, p, td 等）
✅ 鼠标悬停高亮，点击即模糊
✅ 稳定可靠，不会出现元素消失的问题
❌ 不再自动检测和包裹纯文本节点
❌ 不再智能识别敏感信息（手机号、邮箱等）

使用建议：

如果需要模糊纯文本，可以先手动用  包裹
或者点击包含该文本的父元素进行整体模糊

🐛 已修复的问题

问题 1：Popup 卡片在点击页面后消失

症状：

开启模糊模式后，点击扩展图标打开 popup
点击网页上的文字进行模糊
Popup 卡片立即消失

原因：这是浏览器扩展的默认行为，不是 bug：

当用户点击 popup 外部的任何区域（包括网页内容）时，浏览器会自动关闭 popup
这是 Chrome/Edge 扩展的标准行为，无法通过配置改变

解决方案：

正常使用流程：
- 点击扩展图标 → 开启模糊模式 → Popup 自动关闭
- 直接在网页上点击元素进行模糊
- 需要调整强度或关闭模式时，再次点击扩展图标打开 popup
替代方案（未来考虑）：
- 添加侧边栏模式（使用 chrome.sidePanel API，需要 Manifest V3 + Chrome 114+）
- 添加快捷键支持（无需打开 popup 即可切换模式）

✅ 当前功能

基础模糊功能

<div>
  <span>用户名</span>
  <span>张三</span>
</div>

使用方法：

开启模糊模式
鼠标悬停在元素上 → 显示蓝色高亮边框
点击元素 → 应用模糊效果
再次点击 → 取消模糊

特点：

✅ 悬停高亮的元素 = 点击后模糊的元素（所见即所得）
✅ 可以模糊任何 HTML 元素
✅ 可调节模糊强度（5-20px）
✅ 支持批量清除所有模糊
✅ ESC 键退出模糊模式

🎯 适用场景

场景 1：结构化数据

<table>
  <tr>
    <td>姓名</td>
    <td>张三</td>
  </tr>
</table>

鼠标悬停第二个 <td> → 高亮
点击 → 模糊 ✅

场景 2：带标签的元素

<p>
  <strong>手机号：</strong>
  <span>138-8888-9999</span>
</p>

鼠标悬停  → 高亮手机号
点击 → 模糊手机号 ✅

场景 3：纯文本（需要手动处理）

<p>用户 张三 的手机号是 138-8888-9999</p>

悬停任意位置 → 高亮整个 
点击 → 模糊整段文字
如需只模糊"张三"：先手动编辑 HTML，用 张三 包裹

🔧 技术实现

简化后的核心逻辑

content.js 核心函数：

// 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% 代码量，提升稳定性

🧪 测试步骤

刷新扩展（chrome://extensions/）
打开任意网页
点击扩展图标，开启模糊模式
测试基础模糊：
- 鼠标悬停在任意元素上 → 看到蓝色边框
- 点击元素 → 成功模糊 ✅
- 再次点击 → 取消模糊 ✅
测试强度调整：
- 打开 popup，拖动滑块
- 已模糊的元素实时更新强度 ✅
测试批量清除：
- 点击"清除所有模糊"按钮
- 所有模糊效果移除 ✅

📝 后续计划

基于简单稳定的架构，未来可以考虑：

框选模糊：拖拽鼠标框选区域进行模糊
模糊记忆：页面刷新后保持模糊状态
快捷键：Ctrl+B 快速切换模糊模式
预设模板：保存常用的模糊配置
图片模糊：支持模糊图片元素

💡 开发经验总结

设计原则：

简单优于复杂：不要过度设计，用户需要的是稳定可靠的功能
所见即所得：悬停预览必须和点击结果完全一致
DOM 操作要谨慎：频繁的 DOM 修改容易引入 bug
渐进增强：先做好基础功能，再逐步添加高级特性

避免的陷阱：

❌ 自动检测和包裹文本节点（DOM 操作复杂，容易出问题）
❌ 临时元素管理（生命周期难以控制）
❌ 智能识别（正则匹配不够可靠）
✅ 让用户明确点击目标元素（简单直接）

5.5 KiB Raw Blame History Unescape Escape