229 lines
6.9 KiB
HTML
229 lines
6.9 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>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
padding: 40px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
h1 {
|
||
color: #667eea;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #888;
|
||
margin-bottom: 30px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.test-section {
|
||
margin-bottom: 30px;
|
||
padding: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.test-section h2 {
|
||
color: #333;
|
||
font-size: 18px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.test-content {
|
||
line-height: 1.8;
|
||
color: #555;
|
||
}
|
||
|
||
.sensitive-info {
|
||
background: #fff3cd;
|
||
padding: 10px 15px;
|
||
border-radius: 6px;
|
||
margin: 10px 0;
|
||
border-left: 3px solid #ffc107;
|
||
}
|
||
|
||
.info-box {
|
||
background: #e3f2fd;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
border-left: 4px solid #2196f3;
|
||
}
|
||
|
||
.info-box strong {
|
||
color: #1976d2;
|
||
}
|
||
|
||
code {
|
||
background: #f5f5f5;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-family: 'Courier New', monospace;
|
||
color: #e91e63;
|
||
}
|
||
|
||
.card {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.label {
|
||
display: inline-block;
|
||
background: #667eea;
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
ul {
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
li {
|
||
margin: 8px 0;
|
||
color: #555;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🔒 BlurText 测试页面</h1>
|
||
<p class="subtitle">使用这个页面测试模糊功能是否正常工作</p>
|
||
|
||
<div class="info-box">
|
||
<strong>📖 测试步骤：</strong>
|
||
<ol style="margin-left: 20px; margin-top: 10px;">
|
||
<li>点击浏览器工具栏的 <strong>BlurText</strong> 图标</li>
|
||
<li>点击弹出窗口中的 <strong>"开启模糊模式"</strong> 按钮</li>
|
||
<li>页面顶部应该显示提示："模糊模式已开启"</li>
|
||
<li>鼠标悬停在下方文字上，应该有蓝色虚线框高亮</li>
|
||
<li>点击任意文字，应该变模糊</li>
|
||
<li>再次点击模糊的文字，应该取消模糊</li>
|
||
<li>按 <code>ESC</code> 键退出模糊模式</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>📝 测试区域 1：普通文本</h2>
|
||
<div class="test-content">
|
||
<p>这是一段普通的文本内容，你可以点击这段文字来测试模糊功能。这是一段普通的文本内容，你可以点击这段文字来测试模糊功能。这是一段普通的文本内容，你可以点击这段文字来测试模糊功能。</p>
|
||
<p>模糊功能应该可以立即生效，不需要屏幕录制或分享。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>🔐 测试区域 2：敏感信息模拟</h2>
|
||
<div class="test-content">
|
||
<div class="sensitive-info">
|
||
<strong>API Key:</strong> <span>sk-1234567890abcdefghijklmnopqrstuvwxyz</span>
|
||
</div>
|
||
<div class="sensitive-info">
|
||
<strong>手机号:</strong> <span>138-0000-1234</span>
|
||
</div>
|
||
<div class="sensitive-info">
|
||
<strong>邮箱:</strong> <span>example@company.com</span>
|
||
</div>
|
||
<div class="sensitive-info">
|
||
<strong>密码:</strong> <span>MyS3cur3P@ssw0rd!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>📊 测试区域 3：卡片内容</h2>
|
||
<div class="card">
|
||
<span class="label">用户信息</span>
|
||
<p><strong>姓名：</strong><span>张三</span></p>
|
||
<p><strong>身份证：</strong><span>110101199001011234</span></p>
|
||
<p><strong>银行卡：</strong><span>6222 0000 1111 2222</span></p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="label">订单信息</span>
|
||
<p><strong>订单号：</strong><span>ORD-2025-001234</span></p>
|
||
<p><strong>金额：</strong><span>¥1,288.00</span></p>
|
||
<p><strong>地址：</strong><span>北京市朝阳区某某街道123号</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>📋 测试区域 4：列表内容</h2>
|
||
<div class="test-content">
|
||
<ul>
|
||
<li>项目 A - 配置文件路径：/etc/config/secret.yml</li>
|
||
<li>项目 B - 数据库连接：mysql://user:password@localhost:3306</li>
|
||
<li>项目 C - 访问令牌：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</li>
|
||
<li>项目 D - 私钥文件：~/.ssh/id_rsa</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box" style="background: #fff3e0; border-left-color: #ff9800;">
|
||
<strong>⚠️ 故障排查：</strong>
|
||
<p style="margin-top: 10px;">如果功能不工作，请检查：</p>
|
||
<ul style="margin-left: 20px; margin-top: 8px;">
|
||
<li>扩展是否正确安装（查看 <code>chrome://extensions/</code>）</li>
|
||
<li>扩展是否启用（开关是否打开）</li>
|
||
<li>是否显示任何错误（右键扩展图标 → 检查弹出窗口）</li>
|
||
<li>刷新页面后重试</li>
|
||
<li>打开浏览器控制台（F12）查看是否有错误信息</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="info-box" style="background: #e8f5e9; border-left-color: #4caf50; margin-top: 30px;">
|
||
<strong>✅ 预期行为：</strong>
|
||
<ul style="margin-left: 20px; margin-top: 8px;">
|
||
<li>开启模糊模式后，页面顶部显示紫色提示条</li>
|
||
<li>鼠标移动到文字上，出现蓝色虚线边框高亮</li>
|
||
<li>点击文字后，该文字变模糊（毛玻璃效果）</li>
|
||
<li>鼠标悬停在已模糊的文字上，显示"点击取消模糊"提示</li>
|
||
<li>再次点击已模糊文字，模糊效果消失</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 检测扩展是否正确加载
|
||
console.log('测试页面已加载');
|
||
console.log('检查 content script 是否注入...');
|
||
|
||
setTimeout(() => {
|
||
if (document.body.classList.contains('blurtext-mode')) {
|
||
console.log('✅ 模糊模式已启用');
|
||
} else {
|
||
console.log('ℹ️ 模糊模式未启用（这是正常的，需要手动开启）');
|
||
}
|
||
}, 1000);
|
||
</script>
|
||
</body>
|
||
</html>
|