淄博 网站推广,进入百度搜索网站,汽车建设网站,怎么低成本做网站项目起源
作为一个经常需要长时间盯着屏幕的开发者#xff0c;我一直在寻找一个简单的方法来保护眼睛。最初的想法很简单#xff1a;将网页背景色替换成护眼的豆沙绿。虽然市面上已经有类似的扩展#xff0c;但我想要一个更加轻量且可定制的解决方案。
这个简单的需求逐渐…项目起源
作为一个经常需要长时间盯着屏幕的开发者我一直在寻找一个简单的方法来保护眼睛。最初的想法很简单将网页背景色替换成护眼的豆沙绿。虽然市面上已经有类似的扩展但我想要一个更加轻量且可定制的解决方案。
这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— 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 截图生成器、应用图标生成器 和 [小红书引导图生成器]
