毛玻璃效果插件 - Glass Effect

💡 开发背景

在开放式办公环境中,我们经常需要保护屏幕隐私:

• 👀防止同事窥屏 - 临时离开座位时,一键模糊屏幕内容
• 🔒保护敏感信息 - 浏览私人邮件、聊天记录时快速模糊
• 🎭隐私保护 - 在公共场合浏览网页时避免尴尬
• ⚡快速切换 - 有人靠近时,一秒模糊屏幕

这个插件就是为了解决这些日常隐私需求而开发的。

✨ 功能特性

• 🎨iOS 风格毛玻璃效果 - 使用 CSS backdrop-filter 实现类似 iOS 的磨砂玻璃效果
• ⌨️快捷键支持 - 一键开启/关闭模糊效果
• 🎛️便捷控制面板 - 精美的 iOS 风格弹窗界面
• 🔧自定义快捷键 - 支持修改默认快捷键
• 🚀轻量快速 - 零性能影响,即开即用

📦 安装方法

1. 1 下载插件安装包
2. 2解压下载的压缩包
3. 3打开 Chrome 浏览器,访问 chrome://extensions/
4. 4开启右上角的「开发者模式」
5. 5点击「加载已解压的扩展程序」
6. 6选择解压后的文件夹

🎮 使用说明

🛠️ 技术栈

• •框架: Plasmo - 现代浏览器扩展开发框架
• •语言: TypeScript + React
• •样式: CSS backdrop-filter 实现毛玻璃效果
• •构建: Chrome Manifest V3

📁 项目结构

plasmo-glass/
├── contents/
│   └── glass.ts          # 内容脚本 - 实现毛玻璃效果
├── popup.tsx             # 控制面板界面
├── background.ts         # 后台脚本 - 处理快捷键
├── assets/               # 图标资源
├── package.json          # 项目配置
└── tsconfig.json         # TypeScript 配置

💡 使用场景

• 📖阅读模式 - 模糊背景,专注内容
• 🎨设计参考 - 快速查看页面模糊效果
• 🖼️截图美化 - 为截图添加毛玻璃背景
• 🎭隐私保护 - 快速模糊敏感信息

⚠️ 注意事项

• •需要 Chrome 88 或更高版本(支持 backdrop-filter)
• •毛玻璃效果仅在当前标签页生效
• •刷新页面后效果会自动清除

📝 更新日志

📄 许可证

MIT License