first commit

INSTALL.md

@@ -0,0 +1,186 @@
+# 安装和调试指南
+
+## 🚀 快速开始
+
+### 第一步：生成图标
+
+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！🎉**