项目起源
作为一个经常需要长时间盯着屏幕的开发者，我一直在寻找一个简单的方法来保护眼睛。最初的想法很简单：将网页背景色替换成护眼的豆沙绿。虽然市面上已经有类似的扩展，但我想要一个更加轻量且可定制的解决方案。
这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— Stylus。不仅实现了最初的护眼模式，还扩展出了更多实用的功能。
技术选型
在开发初期，我面临着技术栈选择的问题。传统的浏览器扩展开发往往需要处理很多底层细节，特别是在 Manifest V3 规范下。在调研过程中，我发现了 WXT (Web Extension Tools) 这个强大的工具。
选择 WXT 的原因：
- 提供了现代化的开发体验
- 内置了 TypeScript 支持
- 简化了扩展开发的复杂度
- 支持 React 等现代前端框架
- 完全兼容 Manifest V3 规范
技术栈概览：
- WXT 作为核心开发框架
- React 18 构建用户界面
- TypeScript 5 确保代码类型安全
- Stylus 处理样式
- Chrome Extension Manifest V3 规范
AI 辅助开发
在开发过程中，我大量使用了 Cursor AI 作为开发助手。这极大地提升了开发效率：
-
代码生成
- 快速生成样式模板
- 编写常用的注入函数
- 处理复杂的正则匹配规则
-
问题解决
- 快速定位和修复 bug
- 优化性能问题
- 提供最佳实践建议
-
文档编写
- 生成注释和文档
- 完善 README
- 编写用户指南
核心功能实现
护眼模式
最初的核心功能 —— 护眼模式的实现：
body {background-color: #c7edcc !important;color: #333333 !important;
}/* 调整文本颜色和背景 */
p, div, span, li, td, th, caption, label, input, textarea {background-color: #c7edcc !important;color: #333333 !important;
}/* 调整图片亮度 */
img {filter: brightness(0.95) !important;
}
样式注入系统
为了使扩展更加通用，我设计了一个灵活的样式注入系统：
- 支持多样式表管理
- 实时预览功能
- URL 匹配规则
- 样式优先级控制
国际化支持
考虑到不同用户的需求，添加了多语言支持：
- 简体中文
- 繁体中文
- 日语
- 韩语
- 英语
未来计划
-
性能优化
- 减少样式注入的性能开销
- 优化规则匹配算法
- 添加样式缓存机制
-
功能扩展
- 支持更多预设模板
- 添加样式分享功能
- 实现云端同步
-
社区建设
- 开源代码
- 建立用户反馈系统
- 完善文档和示例
总结
从一个简单的护眼需求，到一个功能完整的浏览器扩展，Stylus 的开发过程让我深入理解了浏览器扩展的开发模式。通过使用现代化的开发工具和 AI 辅助，大大提升了开发效率。希望这个项目能帮助到更多需要定制网页样式的用户。
欢迎访问 项目主页 了解更多详情，也欢迎提交 Issue 和 PR 来帮助改进项目。
📌 开发者必备工具： 在 Tool.tushuoit.com 发现免费在线工具集！推荐 App Store 截图生成器、应用图标生成器 和 [小红书引导图生成器]
