一款基于 Chrome Extension Manifest V3 开发的浏览器扩展,提供实时加密货币价格追踪功能。
📖 项目的开始:无聊 + 一点技术好奇
最初真的很简单。
有段时间工作不算忙,摸鱼的时候就想着:
要不自己写个 Chrome 插件玩玩?反正平时也经常在浏览器里刷行情,干脆把价格直接放到眼前。
于是开始查文档、看示例、踩坑。 在我折腾了大概两天之后,Crypto Tracker 的 V1.0 版本就这么诞生了。
现在回头看,只能说一句: 哈哈哈,这也太丑了吧。 但是基本功能是实现了
- 价格能拉到
- 数据能更新
- 插件能跑 作为一个“随手写写”的小工具,它已经完成任务了。 然后我就去忙别的事情了。
🤔 丑,其实不只是不好看
最近工作稍微清闲了一点,又开始摸鱼。 看着这个插件,我突然有点嫌弃:
作为一个前端程序猿, 我怎么能写出这么个界面? 要是 UI 设计师看到,岂不会说:“跟我合作这么久,一点审美都没学到吗?”
最近 AI 不是挺火的嘛,于是我决定让 ChatGPT 帮我生成一个暗黑风格风格的界面,然后进行重构。
重构之后,它变成了现在这个样子:
嗯……
确实顺眼多了。果然是人靠衣装,马靠鞍。
🧩 核心功能
Crypto Tracker 核心功能模块主要包括 background、popup、content 三部分。
- background
主要负责获取实时价格、推送价格数据 - popup 主要用于管理币种:新增、移除、设置价格预警
- content
主要负责价格信息的展示
🛠️ 技术栈
| 技术 | 用途 |
|---|---|
| React 19 | UI 框架 |
| TypeScript | 类型安全 |
| Vite 7 | 构建工具 |
| Tailwind CSS 4 | 样式框架 |
| Framer Motion | 动画效果 |
| CRXJS Vite Plugin | Chrome 扩展开发 |
📝 写在最后
目前这个插件只有在本地开发模式使用。还存在一些 bug。
项目已放在 GitHub 上: github.com/CHYYHC123/c…
release 目录下包含已打包好的 Chrome 扩展,可直接安装体验。 链接:github.com/CHYYHC123/c…
目前的功能设计更多是基于个人使用习惯,如果你在使用过程中有更好的想法、发现问题,或者有不同的设计思路,欢迎一起交流讨论。