🎨 Web Background Switcher

一个功能丰富的 Chrome 扩展，让你能够轻松自定义任何网页的背景。支持纯色、渐变、透明度调节，让浏览体验更加个性化和舒适。

✨ 功能特性

🎨 强大的样式定制

• 纯色模式: 7种精选预设颜色，支持自定义任意颜色
• 渐变模式: 3种精美渐变预设，支持自定义双色渐变
• 方向控制: 4种渐变方向（上下、左右、斜向）
• 透明度调节: 0-100%精确透明度控制

🧠 智能记忆系统

• 最近使用: 自动保存最近使用的2个样式
• 站点记忆: 按网站记住样式偏好，下次自动应用
• 数据迁移: 智能兼容旧版本数据

🎯 用户体验优化

• 实时预览: 所有修改立即生效
• 深色模式: 完美适配系统主题
• 友好提示: 清晰的状态反馈和错误处理
• 响应式设计: 适配不同屏幕尺寸

📸 预览

扩展界面简洁美观，操作直观

🚀 快速开始

从 Chrome 应用商店安装

[即将上架 Chrome 应用商店]

开发者模式安装

1. 克隆本仓库：

   git clone https://github.com/ponyfly6/web-background-switcher.git
   cd web-background-switcher

2. 打开 Chrome 扩展管理页面：chrome://extensions/
3. 开启右上角的 开发者模式
4. 选择 加载已解压的扩展程序，选择仓库目录即可

📖 使用指南

基本操作

1. 打开扩展: 在任意网页点击扩展图标
2. 选择样式: 从预设、最近使用或自定义中选择
3. 实时预览: 所有修改立即在页面上生效
4. 保存偏好: 可选择记住当前网站的样式

高级功能

• 纯色模式: 选择单一颜色，调节透明度
• 渐变模式: 选择起始和结束颜色，调整渐变方向
• 站点记忆: 勾选后下次访问相同网站自动应用样式
• 重置功能: 一键恢复网页原始背景

⚠️ 注意: 出于安全限制，Chrome 在 chrome://、扩展商店等特殊页面禁止注入脚本。

🔐 权限说明

本扩展遵循最小权限原则：

权限	用途	必要性
activeTab	访问当前活动标签页	✅ 必需
scripting	注入内容脚本修改背景	✅ 必需
storage	保存用户偏好设置	✅ 必需

📁 项目结构

web-background-switcher/
├── manifest.json          # 扩展配置文件
├── popup.html             # 弹窗界面
├── popup.css              # 样式文件
├── popup.js               # 主要逻辑
├── content.js             # 内容脚本
├── images/                # 图标资源
│   ├── icon16.png        # 16x16 图标
│   ├── icon48.png        # 48x48 图标
│   └── icon128.png       # 128x128 图标
├── README.md              # 项目说明
└── LICENSE                # 开源许可证

🛠️ 技术栈

• 前端: 原生 HTML5 / CSS3 / JavaScript (ES6+)
• 扩展规范: Chrome Manifest V3
• 样式: CSS Grid, Flexbox, CSS Variables
• 架构: 模块化设计，Promise-based API

🚀 开发

环境要求

• Chrome 88+
• 无需构建工具，开箱即用

开发步骤

1. 克隆仓库
2. 在 Chrome 中加载扩展
3. 修改代码后点击扩展管理页面的"重新加载"按钮

调试技巧

• 使用 Chrome DevTools 调试弹窗
• 使用 console.log 调试内容脚本
• 查看扩展管理页面的错误信息

🤝 贡献

欢迎贡献代码、报告问题或提出建议！

如何贡献

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

📝 更新日志

v1.0.0 (2024-09-28)

• ✨ 初始版本发布
• 🎨 支持纯色和渐变背景
• 🧠 智能站点记忆功能
• 🌗 深色模式支持
• 📱 响应式设计

🎯 路线图

• 🏪 发布到 Chrome Web Store
• 🌐 多语言支持 (i18n)
• ⌨️ 快捷键支持
• 📤 样式导入/导出
• 🧪 自动化测试
• 📊 使用统计

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

---

⭐ 如果这个项目对你有帮助，请给个 star 支持一下！