ytc/blurweb

Fork 0

Files

ytc1012 760f3ec0d0 first commit

2025-12-10 18:18:30 +08:00

5.3 KiB

Raw Blame History

安装和调试指南

🚀 快速开始

第一步：生成图标

在浏览器中打开 icon-generator.html 文件
右键点击每个图标，选择"另存为图像"
将图标保存到 icons/ 文件夹，文件名分别为：
- icon16.png
- icon32.png
- icon48.png
- icon128.png

💡 提示: 如果右键保存不方便，可以点击每个图标下方的"下载"按钮

第二步：安装扩展

打开 Chrome 浏览器
在地址栏输入 chrome://extensions/ 并回车
开启右上角的"开发者模式"开关
点击"加载已解压的扩展程序"
选择 blurweb 文件夹
看到扩展出现在列表中，说明安装成功！

第三步：测试功能

方法一：使用测试页面

在浏览器中打开 test.html 文件
按照页面上的说明进行测试

方法二：测试任意网页

打开任意网页（如百度、GitHub 等）
点击浏览器工具栏的 BlurText 图标（紫色图标）
点击"开启模糊模式"按钮
在网页上点击任意文字，观察模糊效果

🔍 故障排查

问题 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 尚未注入到页面

解决：

刷新当前页面（F5）
再次点击扩展图标
点击"开启模糊模式"

问题 3：扩展图标不显示

原因： 图标文件未正确生成或路径错误

解决：

确认 icons/ 文件夹存在
确认包含所有 4 个图标文件
文件名必须完全匹配：icon16.png, icon32.png, icon48.png, icon128.png
重新加载扩展

问题 4：某些网页无法使用

原因： 浏览器限制扩展在特殊页面运行

说明： 以下页面不支持扩展：

chrome:// 开头的页面（如设置页、扩展页）
chrome-extension:// 开头的页面
Chrome Web Store 页面
新标签页（某些情况下）

解决： 在普通网页上使用（如百度、GitHub、新闻网站等）

🐛 调试技巧

查看 Content Script 日志

在网页上按 F12 打开开发者工具
切换到 Console 标签
筛选显示 [BlurText] 日志

开启模糊模式后，应该看到：

[BlurText] Content script loaded
[BlurText] Received message: {action: "toggleBlurMode", ...}
[BlurText] Toggle blur mode: true intensity: 10
[BlurText] Enabling blur mode
[BlurText] Event listeners attached

右键点击扩展图标
选择"检查弹出窗口"
在打开的开发者工具中查看 Console
点击按钮时应该看到对应的日志

测试点击事件

开启模糊模式
点击网页任意元素

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 是否生效

开启模糊模式后点击一个元素
右键该元素 → 检查
在 Elements 标签中，应该看到元素有 blurtext-blurred 类

在 Styles 中应该看到：

.blurtext-blurred {
  filter: blur(10px);
  ...
}

✅ 确认安装成功的标志

✅ chrome://extensions/ 中看到 BlurText 扩展
✅ 扩展已启用（开关是蓝色的）
✅ 工具栏显示紫色扩展图标
✅ 点击图标弹出精美的控制面板
✅ 打开 test.html 能看到测试页面
✅ 开启模糊模式后，页面顶部显示紫色提示条
✅ 鼠标悬停在文字上有蓝色虚线边框
✅ 点击文字后变模糊

📞 获取帮助

如果以上方法都无法解决问题：

检查浏览器版本：确保使用最新版 Chrome/Edge
尝试其他网页：在多个网站测试
查看完整日志：保存 Console 中的所有日志信息
重新安装：
- 移除扩展
- 关闭浏览器
- 重新打开浏览器
- 重新加载扩展

🎯 预期效果演示

正常工作流程

点击扩展图标 → 弹出控制面板 ✅
点击"开启模糊模式" → 页面顶部显示提示 ✅
鼠标移到文字上 → 蓝色虚线边框 ✅
点击文字 → 变模糊 ✅
再次点击 → 取消模糊 ✅
按 ESC → 退出模糊模式 ✅

视觉效果

模糊前: 文字清晰可读
模糊后: 文字变得模糊，像毛玻璃效果
模糊强度: 可通过滑块调节，范围 5px-20px

如果一切正常，恭喜你成功安装了 BlurText！🎉

5.3 KiB Raw Blame History Unescape Escape