# 安装和调试指南

## 🚀 快速开始

### 第一步：生成图标

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！🎉**