作为一个经常需要长时间盯着屏幕的开发者,我一直在寻找一个简单的方法来保护眼睛。最初的想法很简单:将网页背景色替换成护眼的豆沙绿。虽然市面上已经有类似的扩展,但我想要一个更加轻量且可定制的解决方案。
这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— Stylus。不仅实现了最初的护眼模式,还扩展出了更多实用的功能。
在开发初期,我面临着技术栈选择的问题。传统的浏览器扩展开发往往需要处理很多底层细节,特别是在 Manifest V3 规范下。在调研过程中,我发现了 WXT (Web Extension Tools) 这个强大的工具。
选择 WXT 的原因:
技术栈概览:
在开发过程中,我大量使用了 Cursor AI 作为开发助手。这极大地提升了开发效率:
最初的核心功能 —— 护眼模式的实现:
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;
}
为了使扩展更加通用,我设计了一个灵活的样式注入系统:
考虑到不同用户的需求,添加了多语言支持:
从一个简单的护眼需求,到一个功能完整的浏览器扩展,Stylus 的开发过程让我深入理解了浏览器扩展的开发模式。通过使用现代化的开发工具和 AI 辅助,大大提升了开发效率。希望这个项目能帮助到更多需要定制网页样式的用户。
欢迎访问 项目主页 了解更多详情,也欢迎提交 Issue 和 PR 来帮助改进项目。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有