187 lines
5.3 KiB
Markdown
187 lines
5.3 KiB
Markdown
# 安装和调试指南
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 第一步：生成图标
|
||
|
||
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！🎉**
|