【CodeBuddy】从0到1，打造一个“牛马打鸡血仪”

【CodeBuddy 】从0到1，打造一个“牛马打鸡血仪”

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

🌟嗨，我是LucianaiB！

🌍 总有人间一两风，填我十万八千梦。

🚀 路漫漫其修远兮，吾将上下而求索。

我想要设计一个谷歌插件，实现下面的功能：

• 💸 金钱可视化：将抽象的薪资转化为具象的“每秒收入”，直观感受时间的价值
• 📈 实时累积：看着“今日已赚”的数字实时跳动增长，提供持续的正向反馈和动力（无论是摸鱼还是奋斗）
• ✨ 炫酷体验：金色主题、数字动画、粒子背景，打造沉浸式的“赚钱”氛围
• ⚙ 个性设置：支持多种薪资模式、工时设置及货币选择，贴合不同工作情况
• 💾 本地轻量：纯前端实现，用户数据本地存储，安全高效

环境准备——下载CodeBuddy

（1）打开网站：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴，点击免费使用

（2）点击前往 JetBrains IDEs 插件市场，在跳转的页面点击Get，为Pycharm进行安装。

（3）安装完成后，在Pycharm中打开“腾讯云代码助手”面板（通常位于IDE的右侧或底部），然后使用您的腾讯云账号进行登录。登录成功后，您将看到如下所示的CodeBuddy界面。

CodeBuddy实战

直接对它提我们要开发的要求，请按照用户故事和注意点帮我开发谷歌插件：

作品：“牛马打鸡血仪” ——The Money Meter
制作一个谷歌插件，我为了工作摸鱼，想要在上班时看看这个班值不值得上，弄一个牛马打鸡血的工具，让我在在公司工作或者摸鱼的时候，就能时时刻刻看到都有钱入账。
​
注意： 
1.使用manifest v3版本开发 
2.注意中文编码问题
​
# 任务 
请按照用户故事和目的帮我开发谷歌插件，随便起一个名字
​
​
概要
项目类型:纯前端静态站点,无需任何后端和数据库
核心功能:用户设置薪资与工时,页面实时展示“每秒收入”和“今日累计收入”
风格:金色炫酷,动效简洁流畅,兼容手机与桌面
功能需求
1.设置面板
工资输入
支持月薪、日薪或时薪三种模式任选
数值输入框,允许整数或两位小数(单位:元)
工时输入
支持每天工作时长(单位:小时,可输入小数,如7.5)
实时预览
用户修改任何设置后,立即更新计算结果,无需刷新页面
2. 实时计算与展示
计算公式
当日总薪资=月薪+工作日数(可假定22天)或 日薪
或 时薪×工时
每秒收入=当日总薪资+(工作时长x3600)
数值精度
每秒收入保留到分(0.01元),页面显示时四舍五入
动态展示
页面加载或用户点击“开始”后,从零开始实时累加,每秒
刷新
栏目一:大字号显示“当前每秒收入:X.XX元/秒”
栏目二:实时报表“今日已赚:Y.YY元”
3.控制交互
开始/暂停:切换实时累加状态
重置今日收益:清零累计数值,重置计时
设置收起/展开:隐藏或显示输入面板,保证主界面简洁
界面与动效
主题色:金色渐变为主,搭配深色背景
数字动画:
“每秒收入”使用数字翻牌或平滑滚动效果
“今日已赚”使用递增动画,突出增长感
背景特效:可选金色粒子飘落或轻微光晕,注意性能
技术要求
框架:纯静态,无框架也可;若需组件化建议使用Vue3或 React
样式:Tailwind CSS或纯CSS+Flex布局
定时器:setlnterval(1000ms)或requestAnimationFrame
状态管理:简单JS对象+LocalStorage(用于页面刷新后恢复今日累计)
响应式:
桌面:固定最大宽度,居中展示
​
可选扩展
多货币切换:支持切换元/美元/欧元符号
主题模式:深色/浅色切换
本地存储:保存用户设置与累计值,关闭后下次恢复

在输入初始指令后，它就开始思考问题

直接开始设计，全部点击接收

在过程中，首先设计了一个项目架构：

money-meter/
├── manifest.json      # 插件配置文件
├── popup/
│   ├── popup.html    # 弹出窗口界面
│   ├── popup.css     # 样式文件
│   └── popup.js      # 主要逻辑
├── background.js     # 后台脚本
├── _locales/        # 国际化资源
│   └── zh_CN/       # 中文语言包
└── icons/           # 插件图标

下面整个过程：

使用方法

1. 下载**源代码**： 将插件的源代码文件夹（包含 manifest.json,popup.html , popup.css,popup.js等文件）下载到你的本地电脑。
2. 打开扩展管理页面： 打开 Chrome 浏览器，在地址栏输入chrome://extensions/并回车，或者通过菜单进入“扩展程序”管理页面。
3. 开启开发者模式： 在扩展管理页面的右上角，开启“开发者模式”开关。
4. 加载已解压的扩展程序： 在左上角找到并点击“加载已解压的扩展程序”按钮。
5. 选择文件夹： 在弹出的文件浏览器中，选择你刚才下载的插件源代码文件夹。
6. 完成安装： 插件将被加载并显示在你的扩展程序列表中，其图标（默认齿轮，建议替换）会出现在浏览器工具栏。

使用说明

1. 打开插件： 点击浏览器工具栏上的「牛马打鸡血仪」插件图标，即可打开插件弹窗。

1. 设置薪资与工时：
   1. 点击右上角的 ⚙️ 图标，展开设置面板。
   2. 选择你的“薪资模式”（月薪、日薪或时薪）。
   3. 在“薪资金额”输入框中填入你的工资数值。
   4. 在“每日工时”输入框中填入你每天的工作时长（小时）。
   5. （可选）选择你希望显示的货币符号。
   6. 你的设置会自动保存，并在面板收起后生效。

1. 开始/暂停计时：
   1. 点击主界面下方的“开始”按钮，插件将开始实时累加你的今日收入，“今日已赚”的数字会跳动增长。
   2. 按钮会变成“暂停”，点击“暂停”可以暂停收入累加。
   3. 再次点击“开始”可以继续累加。

1. 重置今日收益： 点击“重置今日收益”按钮，可以将“今日已赚”的数值清零。
2. 收起/展开设置： 点击右上角的 ⚙️ 图标，可以在主界面和设置面板之间切换显示/隐藏。

总结

经过一番努力，我终于完成了“牛马打鸡血仪”这个谷歌插件的开发。在这个过程中，CodeBuddy作为我的得力助手，发挥了巨大的作用。

从最初的需求构思到最终的插件完成，我经历了需求分析、环境搭建、项目架构设计、代码编写、调试优化以及最终的测试发布等阶段。在需求分析阶段，我明确了金钱可视化、实时累积、炫酷体验、个性设置和本地轻量等核心功能。环境搭建时，腾讯云代码助手CodeBuddy的便捷性让我快速开始了开发之旅。项目架构设计阶段，我规划了清晰的文件结构，为后续的代码编写打下了坚实基础。在代码编写过程中，CodeBuddy的智能提示和代码补全功能极大地提高了我的开发效率，让我能够更专注于逻辑实现。调试优化阶段，我通过CodeBuddy的代码评审功能，快速定位并解决了多个问题，确保了插件的稳定性和性能。最后，在测试发布阶段，CodeBuddy的智能问答功能帮助我解决了不少技术难题，让我顺利完成了插件的发布。

使用CodeBuddy的过程中，我深刻体会到了AI编程助手的强大。它不仅能够提供代码补全和智能提示，还能根据上下文理解我的需求，给出精准的代码建议。在开发“牛马打鸡血仪”时，CodeBuddy帮助我快速生成了项目的基本框架，让我能够将更多精力放在功能实现和用户体验上。此外，CodeBuddy的代码评审功能也让我受益匪浅，它能够快速发现代码中的潜在问题，并给出优化建议，帮助我提升了代码质量。

牛马打鸡血仪”插件最终成功上线，它实现了金钱可视化、实时累积、炫酷体验、个性设置和本地轻量等核心功能。用户可以通过设置薪资模式、工时和货币选择，直观地看到每秒收入和今日累计收入，从而获得持续的动力。这个插件不仅满足了我最初的设计初衷，也为其他用户提供了实用的工具。未来，我计划继续优化插件的性能，增加更多实用功能，如多货币切换、主题模式切换等，以满足更多用户的需求。

通过这次开发经历，我不仅提升了自己的编程技能，也对AI编程助手有了更深入的了解。CodeBuddy作为我的编程伙伴，让我在开发过程中更加得心应手，也让我对未来开发工作充满了信心。如果你对“牛马打鸡血仪”感兴趣，不妨一试，相信它能为你的工作和学习带来新的动力和乐趣。

嗨，我是LucianaiB。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

点击这里👉LucianaiB ，获取最新动态，⚡️ 让信息传递更加迅速。