🔒 BlurText 使用说明

⚠️ 重要限制

注意：BlurText 只能模糊 HTML 元素，不能直接模糊纯文本节点。
如果你想要单独模糊某个值（如手机号、姓名），该值必须包裹在 HTML 标签中（如 ）。

✅ 正确的 HTML 结构

示例 1：可以单独模糊值

姓名：张三

<p>
  <strong>姓名：</strong>
  <span>张三</span>
</p>

✅ 效果：

鼠标移到"姓名："→ 高亮  标签
鼠标移到"张三" → 高亮  标签
点击"姓名："→ 模糊标签
点击"张三" → 只模糊"张三" 推荐
点击整行空白处 → 模糊整个

示例 2：复杂结构

手机号：138-0000-1234

<div class="sensitive-info">
  <strong>手机号：</strong>
  <span>138-0000-1234</span>
</div>

✅ 效果：

点击"手机号："→ 模糊标签
点击"138-0000-1234" → 只模糊数字
点击背景区域 → 模糊整个 div

❌ 错误的 HTML 结构

示例 3：无法单独模糊值

姓名：张三

<p>
  <strong>姓名：</strong>
  张三
</p>

❌ 问题：

"张三"是纯文本节点，不在任何标签里
鼠标移到"张三"上，实际高亮的是整个 
点击"张三" → 模糊整个 （包括"姓名："）
无法单独模糊"张三" 不推荐

💡 解决方案：
如果你在自己的网页上使用 BlurText，请确保需要单独模糊的内容包裹在标签中：

// 错误 ❌
<p>手机号：138-0000-1234</p>

// 正确 ✅
<p>手机号：<span>138-0000-1234</span></p>

🎯 最佳实践

推荐的 HTML 结构模板

<!-- 表单字段 -->
<div class="field">
  <label>姓名</label>
  <span class="value">张三</span>
</div>

<!-- 列表项 -->
<ul>
  <li>
    <strong>API Key:</strong>
    <code>sk-1234567890abcdef</code>
  </li>
</ul>

<!-- 表格 -->
<table>
  <tr>
    <td>手机号</td>
    <td><span>138-0000-1234</span></td>
  </tr>
</table>

🔧 实际使用技巧

识别 HTML 结构：
- 按 F12 打开开发者工具
- 使用元素选择器（左上角箭头图标）
- 点击网页上的内容，查看 HTML 结构
- 如果值在独立标签里，就可以单独模糊
灵活使用模糊范围：
- 如果无法单独模糊值，模糊整行或整个区块也能达到目的
- 使用鼠标悬停预览，看蓝色边框高亮的是哪个元素
- 根据高亮范围决定是否点击
对于第三方网站：
- 大部分网站的表单、表格、列表都有良好的结构
- 现代网站通常会把数据包裹在  或其他标签中
- 如果遇到无法单独模糊的情况，模糊整行即可

📌 总结：
BlurText 的粒度取决于网页的 HTML 结构。结构越清晰（标签层级越细），模糊控制就越精确。这是浏览器扩展的技术限制，无法绕过。

🧪 测试建议

打开 test.html 测试页面，我已经更新了 HTML 结构，现在可以：

✅ 单独模糊"138-0000-1234"
✅ 单独模糊"张三"
✅ 单独模糊各种敏感信息
✅ 或者模糊整行、整个区块