Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Stylus 浏览器扩展开发-Cursor AI辅助

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

作者头像
井九
发布于 2024-12-20 01:45:41
发布于 2024-12-20 01:45:41
13100
代码可运行
举报
文章被收录于专栏:四楼没电梯四楼没电梯
运行总次数:0
代码可运行

项目起源

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

这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— 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
    • 编写用户指南

核心功能实现

护眼模式

最初的核心功能 —— 护眼模式的实现:

代码语言:javascript
代码运行次数:0
运行
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;
}
样式注入系统

为了使扩展更加通用,我设计了一个灵活的样式注入系统:

  • 支持多样式表管理
  • 实时预览功能
  • URL 匹配规则
  • 样式优先级控制
国际化支持

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

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

未来计划

  1. 性能优化
    • 减少样式注入的性能开销
    • 优化规则匹配算法
    • 添加样式缓存机制
  2. 功能扩展
    • 支持更多预设模板
    • 添加样式分享功能
    • 实现云端同步
  3. 社区建设
    • 开源代码
    • 建立用户反馈系统
    • 完善文档和示例

总结

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
谷歌浏览器扩展开发的原理与实践(DIY存网文)
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴(文末下载)
悟空聊架构
2025/05/17
1330
谷歌浏览器扩展开发的原理与实践(DIY存网文)
通过浏览器扩展获取本机 MAC 地址
在 Web 技术主导的 B/S 架构项目中,获取终端设备硬件信息(如 MAC 地址)的需求经常会碰到。尽管 Electron/CEF 等混合应用框架可通过系统级 API 轻松实现,但纯浏览器环境下的硬件信息获取则不那么容易。因为现代浏览器基于沙箱机制和隐私保护策略,严格禁止网页直接访问底层硬件资源。
云水木石
2025/03/19
3640
通过浏览器扩展获取本机 MAC 地址
带你快速走进Chrome扩展开发的大门
Chrome 扩展程序通过可以向 Chrome 浏览器添加特性和功能来增强浏览体验,可以构建一些强大的生产力工具,也可以丰富网页的内容,还可以做一些信息的聚合等等。本篇文章将带你通过三个简单的案例带你快速走进Chrome扩展开发的大门。
前端小鑫同学
2023/04/22
8930
带你快速走进Chrome扩展开发的大门
Chrome扩展开发入门
近几年,随着 IE 浏览器的落幕,Chrome(包括使用Chrome内核的浏览器)其实质上已经垄断整个浏览器行业了,就连微软的 Edge 都用上了 Chrome 内核。 可以说,Chrome 的标准,事实上就可以看做是行业标准了。可以预见,Chrome 的发展前景将会非常广阔。
epoos
2022/09/19
4.2K0
Chrome扩展开发入门
使用 WXT 开发浏览器插件(上手使用篇)
WXT (https://wxt.dev/), Next-gen Web Extension Framework. 号称下一代浏览器开发框架. 可一套代码 (code base) 开发支持多个浏览器的插件.
Cloud-Cloudys
2024/03/16
8330
使用 WXT 开发浏览器插件(上手使用篇)
Chrome扩展开发入门体验
****前言**** Chrome浏览器扩展开发算是相当简单的,基本只要掌握HTML+CSS+Javascript,即可快速开发一个属于你的Chrome插件! ---- ****Chrome扩展基本目录结构**** manifest.json 这是一个配置文件,里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容; icon.png 这个一看便知,就是扩展的图标~~~ popup.html 点击扩展图标,弹出的面板页面(如果在manifest.json中配置了default
AlicFeng
2018/06/08
1.2K0
从零到一:腾讯云 AI 代码助手 + DeepSeek 写一个浏览器插件
这个实现方案完全使用矢量图形绘制,不依赖任何图片素材,核心游戏逻辑与UI组件分离,便于维护和扩展。游戏控制逻辑完整包含开始/暂停/重置功能,并实现了经典贪吃蛇的所有核心机制。
全栈若城
2025/02/28
1680
从零到一:腾讯云 AI 代码助手 + DeepSeek 写一个浏览器插件
开发者必备!用纯 CSS 搞定网站黑暗模式
最近上线了一个用户管理后台,忙得焦头烂额。没想到上线后的用户反馈让我直冒冷汗:“网站晚上用着太刺眼了,能不能加个黑暗模式?”
前端达人
2025/01/09
1300
开发者必备!用纯 CSS 搞定网站黑暗模式
全流程 Chrome 扩展开发之按键提示
key-prompt 是一个基于 Extension.js 开发工具和其提供的 vue-typescript 模板开发的 Chrome 扩展程序,可以在任意网页的左下方位置显示你对当前页面的键盘操作,其实这是一个无聊的扩展程序,只当图一乐儿 😁
前端小鑫同学
2024/08/06
2030
全流程 Chrome 扩展开发之按键提示
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
虽然AI编程知识简单对话就行,不过咱要逐步深入到项目开发中,所以还需要前面的需求分析、调研等等步骤,下面是完成一个需求的流程图:
卷福同学
2025/02/05
4360
chrome浏览器扩展v3版本配置项整理备忘
2、除了在插件内部contenscript background 和 popup之间传递消息以外,其他网站也可以给插件发送消息。方法如下 首先,需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息,相当于白名单,只有在白名单中的站点发送的消息,扩展才会监听
fastmock
2023/10/23
6430
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 浏览器插件(也称为扩展)是一段有趣且有成就感的过程。在本教程中,我将引导你从零开始,逐步创建一个简单的 Chrome 插件。无论你是编程新手还是有一定基础的用户,我们都将以简单易懂的方式介绍整个过程。
南山竹
2024/08/09
3.7K0
手摸手教你,从0到1开发一个Chrome浏览器插件
安装量终于破千了!聊聊浏览器扩展开发的相关问题与解决方案
我开发的浏览器扩展安装量终于过千了!在 Firefox AddOns 已经有2.1k+安装,在 Chrome WebStore 已经有2k+安装。实际上在Firefox的扩展市场里是周平均安装量,当天的实际安装量要高出平均值不少,而Chrome的扩展市场在超过1k安装量之后就不精确显示安装量了,实际安装量也会高于1k。
WindRunnerMax
2025/05/22
840
用ChatGPT(o3-mini-high)& Claude-3.7-sonnet开发谷歌浏览器插件!实战+踩坑修复+源码对比
ChatGPT生成了一个新的removeHighlights方法,并在highlightText中先调用它。
前端达人
2025/04/13
1370
用ChatGPT(o3-mini-high)& Claude-3.7-sonnet开发谷歌浏览器插件!实战+踩坑修复+源码对比
从油猴脚本管理器的角度审视Chrome扩展
在之前一段时间,我需要借助Chrome扩展来完成一个需求,当时还在使用油猴脚本与浏览器扩展之间调研了一波,而此时恰好我又有一些做的还可以的油猴脚本 TKScript (点个star吧 😁),相对会比较熟悉脚本管理器的能力,预估是不太能完成需求的,所以趁着这个机会,我又学习了一波浏览器扩展的能力。那么在后来需求的开发过程中,因为有些能力是类似于脚本管理器提供的基础环境,致使我越来越好奇脚本管理器是怎么实现的,而实际上脚本管理器实际上还是一个浏览器扩展,浏览器也并没有给脚本管理器开后门来实现相关能力,而让我疑惑的三个问题是:
WindRunnerMax
2024/05/14
4320
开发一款浏览器插件
可以从这个网站[1]下载个好看的图标,命名为default_icon字段对应的名称
fliter
2024/05/10
1810
开发一款浏览器插件
开发一个浏览器插件从未如此简单 ...
实际上我们平时说的浏览器插件指的就是浏览器扩展,它可以帮助我们实现非常多强大的能力。以我们最常接触到的 Chrome 扩展 (Chrome Extension) 为例,它可以帮助我们实现请求的抓取和劫持、各种事件监听、浏览器窗口控制、更改网页内容等等。
ConardLi
2023/01/09
1.8K0
开发一个浏览器插件从未如此简单 ...
手把手教你打造全宇宙最强 Firefox 浏览器
Firefox 和 Chrome 分别是当今世界最流行的浏览器之一,虽然这两款浏览器都有各自的优势,但随着时间的推移,Firefox 的受欢迎程度在逐渐下降,开始走下坡路。这无可厚非,并不是 Firefox 不行了,而是 Chrome 太强了,背靠 Google 顶级大厂,无缝整合 Google 服务,界面极度简洁,它就像一个十足精美的篮子,你往里面放的鸡蛋越多,它就越好用。
米开朗基杨
2022/05/25
2.3K0
手把手教你打造全宇宙最强 Firefox 浏览器
浏览器扩展开发系列教程(一)
以谷歌内核的浏览器扩展,包括 edge chrome ,还有我们常用的国产浏览器都能使用
唯一Chat
2022/11/22
5020
浏览器扩展开发系列教程(一)
浏览器插件开发-manifest文件解读「建议收藏」
"content_security_policy": "script-src 'self' https://*.xxx.com; object-src 'self'"
全栈程序员站长
2022/07/28
2.8K0
推荐阅读
相关推荐
谷歌浏览器扩展开发的原理与实践(DIY存网文)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验