添加：文本选择模式下，点击恢复功能
This commit is contained in:
ytc1012
172
CLAUDE.md
Normal file
172
CLAUDE.md
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
BlurText is a Chrome/Edge browser extension (Manifest V3) for protecting privacy during screen sharing and recording by blurring sensitive text on web pages. The extension is written in vanilla JavaScript with no framework dependencies.
|
||||||
|
|
||||||
|
**Key Characteristics:**
|
||||||
|
- Chinese language UI (all text, comments, and documentation in Chinese)
|
||||||
|
- Manifest V3 standard with Chrome Extension APIs
|
||||||
|
- CSS `filter: blur()` for visual obfuscation
|
||||||
|
- Chrome Storage API for local configuration persistence
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Core Components
|
||||||
|
|
||||||
|
**Extension Structure:**
|
||||||
|
1. **[manifest.json](manifest.json)** - Extension configuration (Manifest V3)
|
||||||
|
2. **[popup.html](popup.html)** + **[popup.js](popup.js)** - Browser action UI and control logic
|
||||||
|
3. **[content.js](content.js)** - Content script injected into all web pages (core functionality)
|
||||||
|
4. **[content.css](content.css)** - Injected styles for blur effects and UI overlays
|
||||||
|
|
||||||
|
### Communication Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
User clicks extension icon
|
||||||
|
→ popup.js loads and displays UI
|
||||||
|
→ User toggles blur mode or changes settings
|
||||||
|
→ popup.js sends chrome.tabs.sendMessage() to content.js
|
||||||
|
→ content.js applies blur mode or updates settings
|
||||||
|
→ content.js stores state in blurredElements Set
|
||||||
|
```
|
||||||
|
|
||||||
|
**Message Types (popup.js → content.js):**
|
||||||
|
- `toggleBlurMode` - Enable/disable blur mode with mode and intensity
|
||||||
|
- `clearAll` - Remove all blur effects
|
||||||
|
- `updateIntensity` - Change blur strength on existing blurred elements
|
||||||
|
- `switchMode` - Change between element and selection modes
|
||||||
|
|
||||||
|
**Message Types (content.js → popup.js):**
|
||||||
|
- `blurModeDisabled` - Notify when user presses ESC to exit
|
||||||
|
|
||||||
|
### Two Blur Modes
|
||||||
|
|
||||||
|
**1. Element Mode (`blurMode = 'element'`)**
|
||||||
|
- Default mode with crosshair cursor
|
||||||
|
- Click any DOM element to toggle blur
|
||||||
|
- Hover shows dashed outline highlight
|
||||||
|
- Stores references to blurred elements in `blurredElements` Set
|
||||||
|
- Does NOT modify DOM structure (only adds/removes CSS classes)
|
||||||
|
|
||||||
|
**2. Selection Mode (`blurMode = 'selection'`)**
|
||||||
|
- Select text with mouse drag
|
||||||
|
- Floating button appears below selection
|
||||||
|
- Wraps selected text in `<span class="blurtext-blurred blurtext-selection-wrapped">`
|
||||||
|
- Uses `Range.surroundContents()` - can fail on complex HTML structures
|
||||||
|
- Error handling shows user-friendly message on failure
|
||||||
|
|
||||||
|
### State Management
|
||||||
|
|
||||||
|
**Global State (content.js):**
|
||||||
|
```javascript
|
||||||
|
let isBlurMode = false; // Whether blur mode is active
|
||||||
|
let blurMode = 'element'; // 'element' or 'selection'
|
||||||
|
let blurIntensity = 10; // 5-20px blur strength
|
||||||
|
let blurredElements = new Set(); // References to blurred elements
|
||||||
|
let hintElement = null; // Top notification bar
|
||||||
|
let blurButton = null; // Floating blur button (selection mode)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Persistence:**
|
||||||
|
- Only `blurIntensity` is stored in `chrome.storage.local`
|
||||||
|
- Blurred elements are NOT persisted across page refreshes (noted as future feature)
|
||||||
|
|
||||||
|
### CSS Architecture
|
||||||
|
|
||||||
|
**Key CSS Classes:**
|
||||||
|
- `.blurtext-blurred` - Applied to blurred elements, uses `--blur-intensity` CSS variable
|
||||||
|
- `.blurtext-mode` - Added to `<body>` in element mode for crosshair cursor
|
||||||
|
- `.blurtext-highlight` - Dashed outline on hover in element mode
|
||||||
|
- `.blurtext-hint` - Top notification bar with gradient background
|
||||||
|
- `.blurtext-blur-button` - Floating button in selection mode
|
||||||
|
- `.blurtext-selection-wrapped` - Marks spans created by selection mode
|
||||||
|
|
||||||
|
**Important:** All styles use `!important` to override page styles
|
||||||
|
|
||||||
|
## Development Commands
|
||||||
|
|
||||||
|
This extension has no build process. Load directly as unpacked extension:
|
||||||
|
|
||||||
|
1. Open `chrome://extensions/` or `edge://extensions/`
|
||||||
|
2. Enable "Developer mode"
|
||||||
|
3. Click "Load unpacked extension"
|
||||||
|
4. Select this directory
|
||||||
|
|
||||||
|
**Testing:**
|
||||||
|
- Make code changes
|
||||||
|
- Go to `chrome://extensions/` and click the refresh icon on BlurText
|
||||||
|
- Reload any tabs where you want to test changes
|
||||||
|
- Click extension icon to open popup and test functionality
|
||||||
|
|
||||||
|
## Common Development Patterns
|
||||||
|
|
||||||
|
### Adding New Message Handlers
|
||||||
|
|
||||||
|
**In content.js:**
|
||||||
|
```javascript
|
||||||
|
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||||
|
if (request.action === 'yourNewAction') {
|
||||||
|
// Handle the action
|
||||||
|
console.log('[BlurText] Your action:', request);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**In popup.js:**
|
||||||
|
```javascript
|
||||||
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||||
|
chrome.tabs.sendMessage(tabs[0].id, {
|
||||||
|
action: 'yourNewAction',
|
||||||
|
someData: value
|
||||||
|
});
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Modifying Blur Behavior
|
||||||
|
|
||||||
|
All blur effects are controlled by the `.blurtext-blurred` class in [content.css](content.css):
|
||||||
|
```css
|
||||||
|
.blurtext-blurred {
|
||||||
|
filter: blur(var(--blur-intensity, 10px)) !important;
|
||||||
|
/* ... other styles ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The intensity is set via inline style in [content.js](content.js):
|
||||||
|
```javascript
|
||||||
|
element.style.setProperty('--blur-intensity', `${blurIntensity}px`);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Event Listener Management
|
||||||
|
|
||||||
|
Pattern used for mode switching:
|
||||||
|
1. Remove all event listeners when changing modes
|
||||||
|
2. Add new listeners based on current mode
|
||||||
|
3. Clean up UI elements (highlights, buttons) from previous mode
|
||||||
|
|
||||||
|
See `updateModeUI()` in [content.js](content.js:93-124) for reference implementation.
|
||||||
|
|
||||||
|
## Key Constraints & Design Decisions
|
||||||
|
|
||||||
|
1. **No persistence across refreshes** - Blurred elements are not saved (future feature per [CHANGELOG.md](CHANGELOG.md))
|
||||||
|
2. **Local-only processing** - No network requests, no external dependencies
|
||||||
|
3. **Visual-only protection** - Blur is CSS effect only, does not modify actual page data
|
||||||
|
4. **Selection mode limitations** - `Range.surroundContents()` fails on complex nested HTML (error is caught and user is notified)
|
||||||
|
5. **Popup auto-closes** - Normal browser behavior after user interacts with page
|
||||||
|
|
||||||
|
## File Purpose Reference
|
||||||
|
|
||||||
|
- **[icon-generator.html](icon-generator.html)** - Standalone tool for generating extension icons (not part of runtime)
|
||||||
|
- **[test.html](test.html)** - Local test page for development
|
||||||
|
- **icons/** - PNG icons in sizes 16, 32, 48, 128 (required by manifest)
|
||||||
|
|
||||||
|
## Language & Localization
|
||||||
|
|
||||||
|
All user-facing strings are in Chinese. When adding features:
|
||||||
|
- Console logs use English with `[BlurText]` prefix
|
||||||
|
- UI text, hints, and notifications use Chinese
|
||||||
|
- Code comments are in Chinese
|
||||||
|
- Follow existing patterns in [popup.html](popup.html) and [content.js](content.js)
|
||||||
204
FIXES.md
204
FIXES.md
@@ -1,204 +0,0 @@
|
|||||||
# BlurText 修复说明
|
|
||||||
|
|
||||||
## 🔄 重大变更（2025-01-10）
|
|
||||||
|
|
||||||
### 移除文本节点模糊功能
|
|
||||||
|
|
||||||
**决策原因**：
|
|
||||||
文本节点自动检测和包裹功能虽然看起来智能，但引入了过多复杂性和bug：
|
|
||||||
1. 预览高亮和实际模糊的交互逻辑复杂
|
|
||||||
2. DOM 操作频繁，容易出现元素消失的问题
|
|
||||||
3. 预览 span 的生命周期管理困难
|
|
||||||
4. 用户体验不够稳定
|
|
||||||
|
|
||||||
**回归简单模式**：
|
|
||||||
- ✅ 只模糊 HTML 元素（span, div, p, td 等）
|
|
||||||
- ✅ 鼠标悬停高亮，点击即模糊
|
|
||||||
- ✅ 稳定可靠，不会出现元素消失的问题
|
|
||||||
- ❌ 不再自动检测和包裹纯文本节点
|
|
||||||
- ❌ 不再智能识别敏感信息（手机号、邮箱等）
|
|
||||||
|
|
||||||
**使用建议**：
|
|
||||||
- 如果需要模糊纯文本，可以先手动用 `<span>` 包裹
|
|
||||||
- 或者点击包含该文本的父元素进行整体模糊
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🐛 已修复的问题
|
|
||||||
|
|
||||||
### 问题 1：Popup 卡片在点击页面后消失
|
|
||||||
|
|
||||||
**症状**：
|
|
||||||
- 开启模糊模式后，点击扩展图标打开 popup
|
|
||||||
- 点击网页上的文字进行模糊
|
|
||||||
- Popup 卡片立即消失
|
|
||||||
|
|
||||||
**原因**：
|
|
||||||
这是浏览器扩展的**默认行为**，不是 bug：
|
|
||||||
- 当用户点击 popup 外部的任何区域（包括网页内容）时，浏览器会自动关闭 popup
|
|
||||||
- 这是 Chrome/Edge 扩展的标准行为，无法通过配置改变
|
|
||||||
|
|
||||||
**解决方案**：
|
|
||||||
1. **正常使用流程**：
|
|
||||||
- 点击扩展图标 → 开启模糊模式 → Popup 自动关闭
|
|
||||||
- 直接在网页上点击元素进行模糊
|
|
||||||
- 需要调整强度或关闭模式时，再次点击扩展图标打开 popup
|
|
||||||
|
|
||||||
2. **替代方案**（未来考虑）：
|
|
||||||
- 添加侧边栏模式（使用 `chrome.sidePanel` API，需要 Manifest V3 + Chrome 114+）
|
|
||||||
- 添加快捷键支持（无需打开 popup 即可切换模式）
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ 当前功能
|
|
||||||
|
|
||||||
### 基础模糊功能
|
|
||||||
```html
|
|
||||||
<div>
|
|
||||||
<span>用户名</span>
|
|
||||||
<span>张三</span>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
**使用方法**：
|
|
||||||
1. 开启模糊模式
|
|
||||||
2. 鼠标悬停在元素上 → 显示蓝色高亮边框
|
|
||||||
3. 点击元素 → 应用模糊效果
|
|
||||||
4. 再次点击 → 取消模糊
|
|
||||||
|
|
||||||
**特点**：
|
|
||||||
- ✅ 悬停高亮的元素 = 点击后模糊的元素（所见即所得）
|
|
||||||
- ✅ 可以模糊任何 HTML 元素
|
|
||||||
- ✅ 可调节模糊强度（5-20px）
|
|
||||||
- ✅ 支持批量清除所有模糊
|
|
||||||
- ✅ ESC 键退出模糊模式
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 适用场景
|
|
||||||
|
|
||||||
### 场景 1：结构化数据
|
|
||||||
```html
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>姓名</td>
|
|
||||||
<td>张三</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
```
|
|
||||||
- 鼠标悬停第二个 `<td>` → 高亮
|
|
||||||
- 点击 → 模糊 ✅
|
|
||||||
|
|
||||||
### 场景 2：带标签的元素
|
|
||||||
```html
|
|
||||||
<p>
|
|
||||||
<strong>手机号：</strong>
|
|
||||||
<span>138-8888-9999</span>
|
|
||||||
</p>
|
|
||||||
```
|
|
||||||
- 鼠标悬停 `<span>` → 高亮手机号
|
|
||||||
- 点击 → 模糊手机号 ✅
|
|
||||||
|
|
||||||
### 场景 3：纯文本（需要手动处理）
|
|
||||||
```html
|
|
||||||
<p>用户 张三 的手机号是 138-8888-9999</p>
|
|
||||||
```
|
|
||||||
- 悬停任意位置 → 高亮整个 `<p>`
|
|
||||||
- 点击 → 模糊整段文字
|
|
||||||
- **如需只模糊"张三"**：先手动编辑 HTML，用 `<span>张三</span>` 包裹
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 技术实现
|
|
||||||
|
|
||||||
### 简化后的核心逻辑
|
|
||||||
|
|
||||||
**content.js 核心函数**：
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// 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% 代码量，提升稳定性
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🧪 测试步骤
|
|
||||||
|
|
||||||
1. 刷新扩展（`chrome://extensions/`）
|
|
||||||
2. 打开任意网页
|
|
||||||
3. 点击扩展图标，开启模糊模式
|
|
||||||
4. **测试基础模糊**：
|
|
||||||
- 鼠标悬停在任意元素上 → 看到蓝色边框
|
|
||||||
- 点击元素 → 成功模糊 ✅
|
|
||||||
- 再次点击 → 取消模糊 ✅
|
|
||||||
5. **测试强度调整**：
|
|
||||||
- 打开 popup，拖动滑块
|
|
||||||
- 已模糊的元素实时更新强度 ✅
|
|
||||||
6. **测试批量清除**：
|
|
||||||
- 点击"清除所有模糊"按钮
|
|
||||||
- 所有模糊效果移除 ✅
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 后续计划
|
|
||||||
|
|
||||||
基于简单稳定的架构，未来可以考虑：
|
|
||||||
|
|
||||||
1. **框选模糊**：拖拽鼠标框选区域进行模糊
|
|
||||||
2. **模糊记忆**：页面刷新后保持模糊状态
|
|
||||||
3. **快捷键**：Ctrl+B 快速切换模糊模式
|
|
||||||
4. **预设模板**：保存常用的模糊配置
|
|
||||||
5. **图片模糊**：支持模糊图片元素
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 💡 开发经验总结
|
|
||||||
|
|
||||||
**设计原则**：
|
|
||||||
1. **简单优于复杂**：不要过度设计，用户需要的是稳定可靠的功能
|
|
||||||
2. **所见即所得**：悬停预览必须和点击结果完全一致
|
|
||||||
3. **DOM 操作要谨慎**：频繁的 DOM 修改容易引入 bug
|
|
||||||
4. **渐进增强**：先做好基础功能，再逐步添加高级特性
|
|
||||||
|
|
||||||
**避免的陷阱**：
|
|
||||||
- ❌ 自动检测和包裹文本节点（DOM 操作复杂，容易出问题）
|
|
||||||
- ❌ 临时元素管理（生命周期难以控制）
|
|
||||||
- ❌ 智能识别（正则匹配不够可靠）
|
|
||||||
- ✅ 让用户明确点击目标元素（简单直接）
|
|
||||||
186
INSTALL.md
186
INSTALL.md
@@ -1,186 +0,0 @@
|
|||||||
# 安装和调试指南
|
|
||||||
|
|
||||||
## 🚀 快速开始
|
|
||||||
|
|
||||||
### 第一步：生成图标
|
|
||||||
|
|
||||||
1. 在浏览器中打开 `icon-generator.html` 文件
|
|
||||||
2. 右键点击每个图标，选择"另存为图像"
|
|
||||||
3. 将图标保存到 `icons/` 文件夹，文件名分别为：
|
|
||||||
- `icon16.png`
|
|
||||||
- `icon32.png`
|
|
||||||
- `icon48.png`
|
|
||||||
- `icon128.png`
|
|
||||||
|
|
||||||
> 💡 **提示**: 如果右键保存不方便，可以点击每个图标下方的"下载"按钮
|
|
||||||
|
|
||||||
### 第二步：安装扩展
|
|
||||||
|
|
||||||
1. 打开 Chrome 浏览器
|
|
||||||
2. 在地址栏输入 `chrome://extensions/` 并回车
|
|
||||||
3. 开启右上角的"**开发者模式**"开关
|
|
||||||
4. 点击"**加载已解压的扩展程序**"
|
|
||||||
5. 选择 `blurweb` 文件夹
|
|
||||||
6. 看到扩展出现在列表中，说明安装成功！
|
|
||||||
|
|
||||||
### 第三步：测试功能
|
|
||||||
|
|
||||||
#### 方法一：使用测试页面
|
|
||||||
|
|
||||||
1. 在浏览器中打开 `test.html` 文件
|
|
||||||
2. 按照页面上的说明进行测试
|
|
||||||
|
|
||||||
#### 方法二：测试任意网页
|
|
||||||
|
|
||||||
1. 打开任意网页（如百度、GitHub 等）
|
|
||||||
2. 点击浏览器工具栏的 BlurText 图标（紫色图标）
|
|
||||||
3. 点击"开启模糊模式"按钮
|
|
||||||
4. 在网页上点击任意文字，观察模糊效果
|
|
||||||
|
|
||||||
## 🔍 故障排查
|
|
||||||
|
|
||||||
### 问题 1：点击文字没有反应
|
|
||||||
|
|
||||||
**可能原因和解决方法：**
|
|
||||||
|
|
||||||
#### 1. 扩展未正确加载
|
|
||||||
- 检查：访问 `chrome://extensions/`，确认 BlurText 已启用
|
|
||||||
- 解决：如果未启用，点击开关启用；如果有错误提示，重新加载扩展
|
|
||||||
|
|
||||||
#### 2. Content Script 未注入
|
|
||||||
- 检查：按 F12 打开开发者工具，查看 Console 标签页
|
|
||||||
- 应该看到：`[BlurText] Content script loaded`
|
|
||||||
- 如果没有，刷新页面（F5）后重试
|
|
||||||
|
|
||||||
#### 3. 消息未发送成功
|
|
||||||
- 检查：右键点击扩展图标 → 检查弹出窗口 → 查看 Console
|
|
||||||
- 应该看到：`[BlurText] Toggle button clicked` 和 `[BlurText] Message sent successfully`
|
|
||||||
- 如果看到错误，尝试重新加载扩展
|
|
||||||
|
|
||||||
#### 4. 页面刷新问题
|
|
||||||
- 解决：在安装扩展后，刷新所有打开的网页
|
|
||||||
- 或者重新打开新标签页测试
|
|
||||||
|
|
||||||
### 问题 2：提示"请刷新页面后重试"
|
|
||||||
|
|
||||||
**原因：** Content Script 尚未注入到页面
|
|
||||||
|
|
||||||
**解决：**
|
|
||||||
1. 刷新当前页面（F5）
|
|
||||||
2. 再次点击扩展图标
|
|
||||||
3. 点击"开启模糊模式"
|
|
||||||
|
|
||||||
### 问题 3：扩展图标不显示
|
|
||||||
|
|
||||||
**原因：** 图标文件未正确生成或路径错误
|
|
||||||
|
|
||||||
**解决：**
|
|
||||||
1. 确认 `icons/` 文件夹存在
|
|
||||||
2. 确认包含所有 4 个图标文件
|
|
||||||
3. 文件名必须完全匹配：`icon16.png`, `icon32.png`, `icon48.png`, `icon128.png`
|
|
||||||
4. 重新加载扩展
|
|
||||||
|
|
||||||
### 问题 4：某些网页无法使用
|
|
||||||
|
|
||||||
**原因：** 浏览器限制扩展在特殊页面运行
|
|
||||||
|
|
||||||
**说明：** 以下页面不支持扩展：
|
|
||||||
- `chrome://` 开头的页面（如设置页、扩展页）
|
|
||||||
- `chrome-extension://` 开头的页面
|
|
||||||
- Chrome Web Store 页面
|
|
||||||
- 新标签页（某些情况下）
|
|
||||||
|
|
||||||
**解决：** 在普通网页上使用（如百度、GitHub、新闻网站等）
|
|
||||||
|
|
||||||
## 🐛 调试技巧
|
|
||||||
|
|
||||||
### 查看 Content Script 日志
|
|
||||||
|
|
||||||
1. 在网页上按 F12 打开开发者工具
|
|
||||||
2. 切换到 Console 标签
|
|
||||||
3. 筛选显示 `[BlurText]` 日志
|
|
||||||
4. 开启模糊模式后，应该看到：
|
|
||||||
```
|
|
||||||
[BlurText] Content script loaded
|
|
||||||
[BlurText] Received message: {action: "toggleBlurMode", ...}
|
|
||||||
[BlurText] Toggle blur mode: true intensity: 10
|
|
||||||
[BlurText] Enabling blur mode
|
|
||||||
[BlurText] Event listeners attached
|
|
||||||
```
|
|
||||||
|
|
||||||
### 查看 Popup 日志
|
|
||||||
|
|
||||||
1. 右键点击扩展图标
|
|
||||||
2. 选择"检查弹出窗口"
|
|
||||||
3. 在打开的开发者工具中查看 Console
|
|
||||||
4. 点击按钮时应该看到对应的日志
|
|
||||||
|
|
||||||
### 测试点击事件
|
|
||||||
|
|
||||||
1. 开启模糊模式
|
|
||||||
2. 点击网页任意元素
|
|
||||||
3. Console 中应该显示：
|
|
||||||
```
|
|
||||||
[BlurText] Click detected, isBlurMode: true
|
|
||||||
[BlurText] Target element: DIV some-class
|
|
||||||
[BlurText] Adding blur to element, intensity: 10
|
|
||||||
[BlurText] Total blurred elements: 1
|
|
||||||
```
|
|
||||||
|
|
||||||
### 检查 CSS 是否生效
|
|
||||||
|
|
||||||
1. 开启模糊模式后点击一个元素
|
|
||||||
2. 右键该元素 → 检查
|
|
||||||
3. 在 Elements 标签中，应该看到元素有 `blurtext-blurred` 类
|
|
||||||
4. 在 Styles 中应该看到：
|
|
||||||
```css
|
|
||||||
.blurtext-blurred {
|
|
||||||
filter: blur(10px);
|
|
||||||
...
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## ✅ 确认安装成功的标志
|
|
||||||
|
|
||||||
1. ✅ `chrome://extensions/` 中看到 BlurText 扩展
|
|
||||||
2. ✅ 扩展已启用（开关是蓝色的）
|
|
||||||
3. ✅ 工具栏显示紫色扩展图标
|
|
||||||
4. ✅ 点击图标弹出精美的控制面板
|
|
||||||
5. ✅ 打开 `test.html` 能看到测试页面
|
|
||||||
6. ✅ 开启模糊模式后，页面顶部显示紫色提示条
|
|
||||||
7. ✅ 鼠标悬停在文字上有蓝色虚线边框
|
|
||||||
8. ✅ 点击文字后变模糊
|
|
||||||
|
|
||||||
## 📞 获取帮助
|
|
||||||
|
|
||||||
如果以上方法都无法解决问题：
|
|
||||||
|
|
||||||
1. **检查浏览器版本**：确保使用最新版 Chrome/Edge
|
|
||||||
2. **尝试其他网页**：在多个网站测试
|
|
||||||
3. **查看完整日志**：保存 Console 中的所有日志信息
|
|
||||||
4. **重新安装**：
|
|
||||||
- 移除扩展
|
|
||||||
- 关闭浏览器
|
|
||||||
- 重新打开浏览器
|
|
||||||
- 重新加载扩展
|
|
||||||
|
|
||||||
## 🎯 预期效果演示
|
|
||||||
|
|
||||||
### 正常工作流程
|
|
||||||
|
|
||||||
1. 点击扩展图标 → 弹出控制面板 ✅
|
|
||||||
2. 点击"开启模糊模式" → 页面顶部显示提示 ✅
|
|
||||||
3. 鼠标移到文字上 → 蓝色虚线边框 ✅
|
|
||||||
4. 点击文字 → 变模糊 ✅
|
|
||||||
5. 再次点击 → 取消模糊 ✅
|
|
||||||
6. 按 ESC → 退出模糊模式 ✅
|
|
||||||
|
|
||||||
### 视觉效果
|
|
||||||
|
|
||||||
- **模糊前**: 文字清晰可读
|
|
||||||
- **模糊后**: 文字变得模糊，像毛玻璃效果
|
|
||||||
- **模糊强度**: 可通过滑块调节，范围 5px-20px
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**如果一切正常，恭喜你成功安装了 BlurText！🎉**
|
|
||||||
46
content.css
46
content.css
@@ -10,8 +10,8 @@
|
|||||||
position: relative !important;
|
position: relative !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 模糊元素的悬停效果 */
|
/* 元素模式下的悬停效果 */
|
||||||
.blurtext-blurred:hover::after {
|
body.blurtext-mode .blurtext-blurred:hover::after {
|
||||||
content: '点击取消模糊' !important;
|
content: '点击取消模糊' !important;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: 50% !important;
|
top: 50% !important;
|
||||||
@@ -28,6 +28,48 @@
|
|||||||
filter: none !important;
|
filter: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 文本选择模式包裹的元素悬停效果 */
|
||||||
|
.blurtext-selection-wrapped {
|
||||||
|
transition: all 0.1s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurtext-selection-wrapped:hover {
|
||||||
|
background-color: rgba(102, 126, 234, 0.2) !important;
|
||||||
|
outline: 2px solid rgba(102, 126, 234, 0.5) !important;
|
||||||
|
outline-offset: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurtext-selection-wrapped:hover::after {
|
||||||
|
content: '🔓 点击恢复' !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 50% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
background: rgba(102, 126, 234, 0.98) !important;
|
||||||
|
color: white !important;
|
||||||
|
padding: 6px 12px !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
z-index: 999999 !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
filter: none !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
||||||
|
animation: blurtext-tooltipPop 0.15s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blurtext-tooltipPop {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -50%) scale(0.8);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 模糊模式下的鼠标样式 */
|
/* 模糊模式下的鼠标样式 */
|
||||||
body.blurtext-mode * {
|
body.blurtext-mode * {
|
||||||
cursor: crosshair !important;
|
cursor: crosshair !important;
|
||||||
|
|||||||
40
content.js
40
content.js
@@ -166,6 +166,11 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 避免点击已模糊的文本段落时触发（这些段落有自己的点击事件）
|
||||||
|
if (e.target.classList.contains('blurtext-selection-wrapped')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const selection = window.getSelection();
|
const selection = window.getSelection();
|
||||||
const selectedText = selection.toString().trim();
|
const selectedText = selection.toString().trim();
|
||||||
|
|
||||||
@@ -229,6 +234,15 @@
|
|||||||
const span = document.createElement('span');
|
const span = document.createElement('span');
|
||||||
span.className = 'blurtext-blurred blurtext-selection-wrapped';
|
span.className = 'blurtext-blurred blurtext-selection-wrapped';
|
||||||
span.style.setProperty('--blur-intensity', `${blurIntensity}px`);
|
span.style.setProperty('--blur-intensity', `${blurIntensity}px`);
|
||||||
|
span.style.cursor = 'pointer';
|
||||||
|
span.title = '点击恢复此段文本';
|
||||||
|
|
||||||
|
// 添加点击事件，允许单独恢复
|
||||||
|
span.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
unblurSelectionSpan(span);
|
||||||
|
});
|
||||||
|
|
||||||
// 包裹选中的内容
|
// 包裹选中的内容
|
||||||
range.surroundContents(span);
|
range.surroundContents(span);
|
||||||
@@ -245,7 +259,7 @@
|
|||||||
hideBlurButton();
|
hideBlurButton();
|
||||||
|
|
||||||
// 显示提示
|
// 显示提示
|
||||||
showHint('文本已模糊', 2000);
|
showHint('文本已模糊（点击可单独恢复）', 2000);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[BlurText] Error blurring selection:', error);
|
console.error('[BlurText] Error blurring selection:', error);
|
||||||
showHint('无法模糊该选区（可能包含复杂的HTML结构）', 3000);
|
showHint('无法模糊该选区（可能包含复杂的HTML结构）', 3000);
|
||||||
@@ -253,6 +267,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 恢复单个选择模式的模糊段落
|
||||||
|
function unblurSelectionSpan(span) {
|
||||||
|
if (!span || !span.parentNode) return;
|
||||||
|
|
||||||
|
console.log('[BlurText] Unblurring selection span');
|
||||||
|
|
||||||
|
// 从集合中移除
|
||||||
|
blurredElements.delete(span);
|
||||||
|
|
||||||
|
// 获取 span 的内容
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
while (span.firstChild) {
|
||||||
|
fragment.appendChild(span.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用原内容替换 span
|
||||||
|
span.parentNode.replaceChild(fragment, span);
|
||||||
|
|
||||||
|
// 显示提示
|
||||||
|
showHint('已恢复此段文本', 1500);
|
||||||
|
|
||||||
|
console.log('[BlurText] Selection span removed, remaining elements:', blurredElements.size);
|
||||||
|
}
|
||||||
|
|
||||||
// 鼠标悬停高亮
|
// 鼠标悬停高亮
|
||||||
function handleMouseOver(e) {
|
function handleMouseOver(e) {
|
||||||
if (!isBlurMode || blurMode !== 'element') return;
|
if (!isBlurMode || blurMode !== 'element') return;
|
||||||
|
|||||||
@@ -1,205 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>纯文本节点测试</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 40px auto;
|
|
||||||
padding: 20px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
background: white;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #667eea;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-box {
|
|
||||||
background: #f8f9fa;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px 0;
|
|
||||||
border-left: 4px solid #667eea;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-box h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #764ba2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example {
|
|
||||||
background: white;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border: 2px solid #ddd;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-auto {
|
|
||||||
background: #4caf50;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
background: #f5f5f5;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #e91e63;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
background: #e3f2fd;
|
|
||||||
border-left: 4px solid #2196f3;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 20px 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success {
|
|
||||||
background: #e8f5e9;
|
|
||||||
border-left: 4px solid #4caf50;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 20px 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1>🧪 纯文本节点测试</h1>
|
|
||||||
<p class="subtitle">测试 BlurText 自动处理纯文本节点的能力</p>
|
|
||||||
|
|
||||||
<div class="success">
|
|
||||||
<strong>✨ 新功能：</strong>现在 BlurText 可以自动处理纯文本节点！<br>
|
|
||||||
当你点击纯文本时，扩展会自动将其包裹在 <code><span></code> 中，然后模糊。
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="test-box">
|
|
||||||
<h3>测试 1：纯文本节点（自动处理）<span class="badge badge-auto">智能</span></h3>
|
|
||||||
<div class="example">
|
|
||||||
<p><strong>姓名：</strong>李四</p>
|
|
||||||
<p><strong>年龄：</strong>28</p>
|
|
||||||
<p><strong>城市：</strong>上海</p>
|
|
||||||
</div>
|
|
||||||
<p>💡 <strong>测试方法：</strong></p>
|
|
||||||
<ul>
|
|
||||||
<li>点击"李四" → 应该<strong>自动识别并只模糊"李四"</strong></li>
|
|
||||||
<li>点击"28" → 应该只模糊数字</li>
|
|
||||||
<li>点击"上海" → 应该只模糊城市名</li>
|
|
||||||
<li>点击"姓名："标签 → 模糊标签</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="test-box">
|
|
||||||
<h3>测试 2：混合文本（智能分割）<span class="badge badge-auto">智能</span></h3>
|
|
||||||
<div class="example">
|
|
||||||
<p>手机号：138-8888-9999</p>
|
|
||||||
<p>邮箱：user@example.com</p>
|
|
||||||
<p>API Key: sk-1234567890abcdefghijk</p>
|
|
||||||
</div>
|
|
||||||
<p>💡 <strong>测试方法：</strong></p>
|
|
||||||
<ul>
|
|
||||||
<li>点击"138-8888-9999" → <strong>自动识别手机号并单独模糊</strong></li>
|
|
||||||
<li>点击"user@example.com" → 自动识别邮箱并模糊</li>
|
|
||||||
<li>点击"sk-1234..." → 自动识别密钥并模糊</li>
|
|
||||||
<li>点击"手机号："文字 → 模糊整行</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="test-box">
|
|
||||||
<h3>测试 3：复杂场景</h3>
|
|
||||||
<div class="example">
|
|
||||||
<p>用户 张三 的手机号是 186-0000-1234，邮箱是 zhangsan@company.com</p>
|
|
||||||
</div>
|
|
||||||
<p>💡 <strong>测试方法：</strong></p>
|
|
||||||
<ul>
|
|
||||||
<li>点击"张三" → 只模糊名字</li>
|
|
||||||
<li>点击"186-0000-1234" → 只模糊手机号</li>
|
|
||||||
<li>点击"zhangsan@company.com" → 只模糊邮箱</li>
|
|
||||||
<li>点击"用户"或"的手机号是" → 模糊整行</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="test-box">
|
|
||||||
<h3>测试 4：列表中的纯文本</h3>
|
|
||||||
<div class="example">
|
|
||||||
<ul>
|
|
||||||
<li>订单号 ORD-20250101-001</li>
|
|
||||||
<li>金额 ¥1,288.00</li>
|
|
||||||
<li>地址 北京市朝阳区某某街道123号</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<p>💡 <strong>测试方法：</strong></p>
|
|
||||||
<ul>
|
|
||||||
<li>点击订单号 → 自动识别并模糊</li>
|
|
||||||
<li>点击金额 → 模糊数字</li>
|
|
||||||
<li>点击地址 → 模糊地址</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info">
|
|
||||||
<strong>🔍 工作原理：</strong><br><br>
|
|
||||||
<strong>1. 检测文本节点</strong><br>
|
|
||||||
当你点击纯文本时，使用 <code>document.caretRangeFromPoint()</code> 检测是否点在文本节点上<br><br>
|
|
||||||
|
|
||||||
<strong>2. 智能识别模式</strong><br>
|
|
||||||
扫描文本内容，识别常见的敏感信息模式：<br>
|
|
||||||
• 手机号：<code>/\d{3,}[-\d]*/</code><br>
|
|
||||||
• 邮箱：<code>/[\w\.-]+@[\w\.-]+\.\w+/</code><br>
|
|
||||||
• Token/密钥：<code>/[a-zA-Z0-9_-]{10,}/</code><br><br>
|
|
||||||
|
|
||||||
<strong>3. 自动包裹</strong><br>
|
|
||||||
如果识别到敏感信息，自动创建 <code><span></code> 包裹该部分<br>
|
|
||||||
如果没识别到特定模式，包裹整个文本节点<br><br>
|
|
||||||
|
|
||||||
<strong>4. 应用模糊</strong><br>
|
|
||||||
对新创建的 <code><span></code> 应用模糊效果
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="success">
|
|
||||||
<strong>✅ 预期效果：</strong><br>
|
|
||||||
• 点击敏感信息（手机号、邮箱等）→ 只模糊该信息<br>
|
|
||||||
• 点击普通文字 → 模糊整个文本节点或整行<br>
|
|
||||||
• 支持在同一行中选择性模糊不同部分<br>
|
|
||||||
• 不破坏原始 HTML 结构（只在需要时添加 span）
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info">
|
|
||||||
<strong>💡 Console 日志：</strong><br>
|
|
||||||
按 F12 打开控制台，点击文字时会看到：<br>
|
|
||||||
• <code>[BlurText] Detected text node: ...</code><br>
|
|
||||||
• <code>[BlurText] Found sensitive value: ...</code><br>
|
|
||||||
• <code>[BlurText] Wrapped text node in span</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
279
usage-guide.html
279
usage-guide.html
@@ -1,279 +0,0 @@
|
|||||||
<!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>
|
|
||||||
Reference in New Issue
Block a user