ytc/blurweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ytc1012
2025-12-10 18:18:30 +08:00
commit 760f3ec0d0
18 changed files with 2588 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
usage-guide.html Normal file
View File

@@ -0,0 +1,279 @@
<!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>&lt;span&gt;</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>&lt;p&gt;
&lt;strong&gt;姓名：&lt;/strong&gt;
&lt;span&gt;张三&lt;/span&gt;
&lt;/p&gt;</code></pre>
<p>✅ <strong>效果：</strong></p>
<ul>
<li>鼠标移到"姓名："→ 高亮 <code>&lt;strong&gt;</code> 标签</li>
<li>鼠标移到"张三" → 高亮 <code>&lt;span&gt;</code> 标签</li>
<li>点击"姓名："→ 模糊标签</li>
<li>点击"张三" → <strong>只模糊"张三"</strong> <span class="badge badge-success">推荐</span></li>
<li>点击整行空白处 → 模糊整个 <code>&lt;p&gt;</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>&lt;div class="sensitive-info"&gt;
&lt;strong&gt;手机号：&lt;/strong&gt;
&lt;span&gt;138-0000-1234&lt;/span&gt;
&lt;/div&gt;</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>&lt;p&gt;
&lt;strong&gt;姓名：&lt;/strong&gt;
张三
&lt;/p&gt;</code></pre>
<p>❌ <strong>问题：</strong></p>
<ul>
<li>"张三"是<strong>纯文本节点</strong>，不在任何标签里</li>
<li>鼠标移到"张三"上，实际高亮的是整个 <code>&lt;p&gt;</code></li>
<li>点击"张三" → 模糊整个 <code>&lt;p&gt;</code>（包括"姓名："）</li>
<li><strong>无法单独模糊"张三"</strong> <span class="badge badge-error">不推荐</span></li>
</ul>
</div>
<div class="tip">
<strong>💡 解决方案：</strong><br>
如果你在自己的网页上使用 BlurText，请确保需要单独模糊的内容包裹在标签中：
<pre><code>// 错误 ❌
&lt;p&gt;手机号：138-0000-1234&lt;/p&gt;
// 正确 ✅
&lt;p&gt;手机号：&lt;span&gt;138-0000-1234&lt;/span&gt;&lt;/p&gt;</code></pre>
</div>
<h2>🎯 最佳实践</h2>
<div class="example">
<div class="example-title">推荐的 HTML 结构模板</div>
<pre><code>&lt;!-- 表单字段 --&gt;
&lt;div class="field"&gt;
&lt;label&gt;姓名&lt;/label&gt;
&lt;span class="value"&gt;张三&lt;/span&gt;
&lt;/div&gt;
&lt;!-- 列表项 --&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;API Key:&lt;/strong&gt;
&lt;code&gt;sk-1234567890abcdef&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- 表格 --&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;手机号&lt;/td&gt;
&lt;td&gt;&lt;span&gt;138-0000-1234&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</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>&lt;span&gt;</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>