当前位置：首页 > news >正文

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

news 2025/7/9 8:10:11

项目起源

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

这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— 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 截图生成器、应用图标生成器和 [小红书引导图生成器]