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

@井九

已于 2024-12-10 13:18:08 修改

阅读量916

点赞数 21

文章标签： stylus 前端 css

于 2024-12-06 11:21:25 首次发布

本文链接：https://blog.csdn.net/problc/article/details/144286697

版权

项目起源

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

这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— 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;
}