280 lines
7.7 KiB
HTML
280 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BlurText 使用说明</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
max-width: 900px;
|
||
margin: 40px auto;
|
||
padding: 20px;
|
||
line-height: 1.6;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.container {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
h1 {
|
||
color: #667eea;
|
||
border-bottom: 3px solid #667eea;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
h2 {
|
||
color: #764ba2;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.example {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-left: 4px solid #667eea;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.example-title {
|
||
font-weight: bold;
|
||
color: #667eea;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.demo-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin: 15px 0;
|
||
align-items: center;
|
||
}
|
||
|
||
.demo-box {
|
||
flex: 1;
|
||
padding: 15px;
|
||
border: 2px solid #ddd;
|
||
border-radius: 8px;
|
||
background: white;
|
||
}
|
||
|
||
.good {
|
||
border-color: #4caf50;
|
||
background: #e8f5e9;
|
||
}
|
||
|
||
.bad {
|
||
border-color: #f44336;
|
||
background: #ffebee;
|
||
}
|
||
|
||
code {
|
||
background: #f5f5f5;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-family: 'Courier New', monospace;
|
||
color: #e91e63;
|
||
font-size: 14px;
|
||
}
|
||
|
||
pre {
|
||
background: #2d2d2d;
|
||
color: #f8f8f2;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.badge-success {
|
||
background: #4caf50;
|
||
color: white;
|
||
}
|
||
|
||
.badge-error {
|
||
background: #f44336;
|
||
color: white;
|
||
}
|
||
|
||
.note {
|
||
background: #fff3cd;
|
||
border-left: 4px solid #ffc107;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tip {
|
||
background: #e3f2fd;
|
||
border-left: 4px solid #2196f3;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🔒 BlurText 使用说明</h1>
|
||
|
||
<h2>⚠️ 重要限制</h2>
|
||
<div class="note">
|
||
<strong>注意：</strong>BlurText 只能模糊 <strong>HTML 元素</strong>，不能直接模糊纯文本节点。<br>
|
||
如果你想要单独模糊某个值（如手机号、姓名），该值必须包裹在 HTML 标签中（如 <code><span></code>）。
|
||
</div>
|
||
|
||
<h2>✅ 正确的 HTML 结构</h2>
|
||
|
||
<div class="example">
|
||
<div class="example-title">示例 1：可以单独模糊值</div>
|
||
<div class="demo-box good">
|
||
<p><strong>姓名：</strong><span>张三</span></p>
|
||
</div>
|
||
<pre><code><p>
|
||
<strong>姓名：</strong>
|
||
<span>张三</span>
|
||
</p></code></pre>
|
||
<p>✅ <strong>效果：</strong></p>
|
||
<ul>
|
||
<li>鼠标移到"姓名："→ 高亮 <code><strong></code> 标签</li>
|
||
<li>鼠标移到"张三" → 高亮 <code><span></code> 标签</li>
|
||
<li>点击"姓名："→ 模糊标签</li>
|
||
<li>点击"张三" → <strong>只模糊"张三"</strong> <span class="badge badge-success">推荐</span></li>
|
||
<li>点击整行空白处 → 模糊整个 <code><p></code></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="example">
|
||
<div class="example-title">示例 2：复杂结构</div>
|
||
<div class="demo-box good">
|
||
<div style="background: #fff3cd; padding: 10px; border-radius: 4px;">
|
||
<strong>手机号：</strong><span>138-0000-1234</span>
|
||
</div>
|
||
</div>
|
||
<pre><code><div class="sensitive-info">
|
||
<strong>手机号：</strong>
|
||
<span>138-0000-1234</span>
|
||
</div></code></pre>
|
||
<p>✅ <strong>效果：</strong></p>
|
||
<ul>
|
||
<li>点击"手机号："→ 模糊标签</li>
|
||
<li>点击"138-0000-1234" → 只模糊数字</li>
|
||
<li>点击背景区域 → 模糊整个 div</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2>❌ 错误的 HTML 结构</h2>
|
||
|
||
<div class="example">
|
||
<div class="example-title">示例 3：无法单独模糊值</div>
|
||
<div class="demo-box bad">
|
||
<p><strong>姓名：</strong>张三</p>
|
||
</div>
|
||
<pre><code><p>
|
||
<strong>姓名：</strong>
|
||
张三
|
||
</p></code></pre>
|
||
<p>❌ <strong>问题：</strong></p>
|
||
<ul>
|
||
<li>"张三"是<strong>纯文本节点</strong>，不在任何标签里</li>
|
||
<li>鼠标移到"张三"上，实际高亮的是整个 <code><p></code></li>
|
||
<li>点击"张三" → 模糊整个 <code><p></code>（包括"姓名："）</li>
|
||
<li><strong>无法单独模糊"张三"</strong> <span class="badge badge-error">不推荐</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="tip">
|
||
<strong>💡 解决方案：</strong><br>
|
||
如果你在自己的网页上使用 BlurText，请确保需要单独模糊的内容包裹在标签中：
|
||
<pre><code>// 错误 ❌
|
||
<p>手机号：138-0000-1234</p>
|
||
|
||
// 正确 ✅
|
||
<p>手机号：<span>138-0000-1234</span></p></code></pre>
|
||
</div>
|
||
|
||
<h2>🎯 最佳实践</h2>
|
||
|
||
<div class="example">
|
||
<div class="example-title">推荐的 HTML 结构模板</div>
|
||
<pre><code><!-- 表单字段 -->
|
||
<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></code></pre>
|
||
</div>
|
||
|
||
<h2>🔧 实际使用技巧</h2>
|
||
|
||
<ol>
|
||
<li><strong>识别 HTML 结构</strong>：
|
||
<ul>
|
||
<li>按 F12 打开开发者工具</li>
|
||
<li>使用元素选择器（左上角箭头图标）</li>
|
||
<li>点击网页上的内容，查看 HTML 结构</li>
|
||
<li>如果值在独立标签里，就可以单独模糊</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li><strong>灵活使用模糊范围</strong>：
|
||
<ul>
|
||
<li>如果无法单独模糊值，模糊整行或整个区块也能达到目的</li>
|
||
<li>使用鼠标悬停预览，看蓝色边框高亮的是哪个元素</li>
|
||
<li>根据高亮范围决定是否点击</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li><strong>对于第三方网站</strong>：
|
||
<ul>
|
||
<li>大部分网站的表单、表格、列表都有良好的结构</li>
|
||
<li>现代网站通常会把数据包裹在 <code><span></code> 或其他标签中</li>
|
||
<li>如果遇到无法单独模糊的情况，模糊整行即可</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
|
||
<div class="note">
|
||
<strong>📌 总结：</strong><br>
|
||
BlurText 的粒度取决于网页的 HTML 结构。结构越清晰（标签层级越细），模糊控制就越精确。这是浏览器扩展的技术限制，无法绕过。
|
||
</div>
|
||
|
||
<h2>🧪 测试建议</h2>
|
||
<p>打开 <a href="test.html">test.html</a> 测试页面，我已经更新了 HTML 结构，现在可以：</p>
|
||
<ul>
|
||
<li>✅ 单独模糊"138-0000-1234"</li>
|
||
<li>✅ 单独模糊"张三"</li>
|
||
<li>✅ 单独模糊各种敏感信息</li>
|
||
<li>✅ 或者模糊整行、整个区块</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|