Stylus 浏览器扩展开发-Cursor AI辅助

项目起源

作为一个经常需要长时间盯着屏幕的开发者，我一直在寻找一个简单的方法来保护眼睛。最初的想法很简单：将网页背景色替换成护眼的豆沙绿。虽然市面上已经有类似的扩展，但我想要一个更加轻量且可定制的解决方案。

这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— 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 作为开发助手。这极大地提升了开发效率：

1. 代码生成

   • 快速生成样式模板
   • 编写常用的注入函数
   • 处理复杂的正则匹配规则

2. 问题解决

   • 快速定位和修复 bug
   • 优化性能问题
   • 提供最佳实践建议

3. 文档编写

   • 生成注释和文档
   • 完善 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 匹配规则
• 样式优先级控制

国际化支持

考虑到不同用户的需求，添加了多语言支持：

• 简体中文
• 繁体中文
• 日语
• 韩语
• 英语

未来计划

1. 性能优化

   • 减少样式注入的性能开销
   • 优化规则匹配算法
   • 添加样式缓存机制

2. 功能扩展

   • 支持更多预设模板
   • 添加样式分享功能
   • 实现云端同步

3. 社区建设

   • 开源代码
   • 建立用户反馈系统
   • 完善文档和示例

总结

从一个简单的护眼需求，到一个功能完整的浏览器扩展，Stylus 的开发过程让我深入理解了浏览器扩展的开发模式。通过使用现代化的开发工具和 AI 辅助，大大提升了开发效率。希望这个项目能帮助到更多需要定制网页样式的用户。

欢迎访问 项目主页 了解更多详情，也欢迎提交 Issue 和 PR 来帮助改进项目。

---

📌 开发者必备工具： 在 Tool.tushuoit.com 发现免费在线工具集！推荐 App Store 截图生成器、应用图标生成器 和 [小红书引导图生成器]