【Vibe coding解决100个问题】15分钟搞定一款chrome工具,赚了1000元

618又要到了,家属又要开始加入剁手党了,每次都要拿着小本本,计算买什么最划算,怎么可以领取平台补贴,怎么可以薅羊毛!!! 重复3次以上的工作都可以用AI实现,面对商家名目缭乱的各种补贴,如何让AI帮助我们选品,实现利益最大化? 本次教程使用Augment Code开发,使用其他AI工具效果一样(500行以内的MVP开发没太大区别,都是用的Claude 4),主要是用Augment Code免费14天的额度。

第1步:先跟AI讨论一下都有哪些方案

复制代码
1、不要写任何代码,我们讨论下,我想同时对比京东,淘宝,拼多多,
商品搜索结果差异,如何写一个程序实现?

图片\] Augment Code给推荐了API官方接口,或者爬虫网页方式。 女人买东西不可能搜过一下就下单,怎么也得货比三家。京东淘宝不可能给开放API查询接口的,爬虫机制又涉及到反爬机制,不想搞的这么兴师动众。于是就问,用chrome插件如何实现? 程序又给了3个推荐方案: * 浏览器扩展+简单对比 * 桌面应用+深度分析 * 移动端+社区功能 从体验上看,chrome插件最简单。 ![11.png](https://oss.xyyzone.com/jishuzhan/article/1930869026430955522/ef64c9655943fd455f7be371276b4f7c.webp) 这个方案可以在一个窗口打开4个页面,可以在一个屏幕下对比商品。 ## 第2步 配置chrome插件的rules chrome插件开发是一个高频需求,可以在使用以下chrome-extension-development的rules ,引导模型生成。 在当前项目空间,新建一个.rules.md文件,保存以下内容 ```diff # Chrome 扩展开发指南 你是一位专业的 Chrome 扩展程序开发人员,精通 JavaScript/TypeScript、浏览器扩展 API 和 Web 开发。 ## 代码风格与结构 - 编写清晰、模块化的 TypeScript 代码,并提供适当的类型定义 - 遵循函数式编程模式,避免使用类 - 使用描述性变量名(例如:isLoading、hasPermission) - 按逻辑组织文件:弹出页(popup)、后台(background)、内容脚本(content scripts)、工具函数(utils) - 实现适当的错误处理和日志记录 - 使用 JSDoc 注释对代码进行文档说明 ## 架构与最佳实践 - 严格遵循 Manifest V3 规范 - 在后台、内容脚本和弹出页之间划分职责 - 遵循最小权限原则配置权限 - 使用现代构建工具(webpack/vite)进行开发 - 实现适当的版本控制和变更管理 ## Chrome API 使用 - 正确使用 chrome.* API(存储、标签页、运行时等) - 使用 Promise 处理异步操作 - 为后台脚本使用 Service Worker(MV3 要求) - 实现 chrome.alarms 用于定时任务 - 使用 chrome.action API 实现浏览器操作 - 妥善处理离线功能 ## 安全与隐私 - 实现内容安全策略(CSP) - 安全处理用户数据 - 防止 XSS 和注入攻击 - 在组件之间使用安全消息传递 - 安全处理跨域请求 - 实现安全的数据加密 - 遵循 web_accessible_resources 最佳实践 ## 性能与优化 - 最小化资源使用并避免内存泄漏 - 优化后台脚本性能 - 实现适当的缓存机制 - 高效处理异步操作 - 监控和优化 CPU / 内存使用 ## UI 与用户体验 - 遵循 Material Design 设计指南 - 实现响应式弹出窗口 - 提供清晰的用户反馈 - 支持键盘导航 - 确保正确的加载状态 - 添加适当的动画效果 ## 国际化 - 使用 chrome.i18n API 进行翻译 - 遵循_locales 目录结构 - 支持从右到左(RTL)语言 - 处理区域格式 ## 可访问性 - 实现 ARIA 标签 - 确保足够的颜色对比度 - 支持屏幕阅读器 - 添加键盘快捷键 ## 测试与调试 - 高效使用 Chrome DevTools - 编写单元测试和集成测试 - 测试跨浏览器兼容性 - 监控性能指标 - 处理错误场景 ## 发布与维护 - 准备商店列表和截图 - 编写清晰的隐私政策 - 实现更新机制 - 处理用户反馈 ## 维护文档 - 遵循官方文档 - 参考 Chrome 扩展程序文档 - 及时了解 Manifest V3 的变化 - 遵循 Chrome Web Store 指南 - 监控 Chrome 平台更新 ## 输出期望 - 提供清晰、可运行的代码示例 - 包含必要的错误处理 - 遵循安全最佳实践 - 确保跨浏览器兼容性 - 编写可维护和可扩展的代码 ``` ## 第3步 chrome开发过程 由于前期需求聊的笔记重复,我直接指挥干活了。 ```python @.rules.md 如何使用chrom插件 ,在同一个屏幕比较京东,淘宝,拼多多的商品搜索结果, 帮我实现一个实用的解决方案,要求免登录(利用浏览器的cookie) ``` ![22.png](https://oss.xyyzone.com/jishuzhan/article/1930869026430955522/17e66e05ba35587af2b0afd8c04e7130.webp) 我都说了不用爬虫,它还给我跑偏了,真笨。写一个详细优化版的提示词吧: ```less 1、重新设计卡片交互,不要使用爬虫机制,真实打开京东,淘宝,拼多多的三个网页, 在同一个窗口并且分成3个卡片(三个真实的网页iframe)。顶部一个搜索框, 一个"搜索"按钮,一个"网格布局/标签布局"下拉框, 2、搜索框输入数据数据时候,点击"搜索"按钮,全部网页进行输入框的关键字搜索。 网页地址如下: http://jd.com/ https://www.taobao.com/ https://mobile.pinduoduo.com/ 3.点击某个卡片放大,其他卡片变成竖状排列tab。 4、点击某个竖状排列Tab,恢复卡片窗口。 5、点击"网格布局"下拉框,三个卡片在同一个页面显示,分列布局。 6、点击"标签布局"下拉框,选择的tab列网页呈现,其他网页只显示tab竖状排列。 ``` ![33.png](https://oss.xyyzone.com/jishuzhan/article/1930869026430955522/4ba4923194ea75ce8124a84041116a96.webp) ## 第4步 如何生成图标 chrome插件需要icon图标,4个尺寸, icon16.png icon32.png icon48.png icon128.png 直接在[www.svgrepo.com/网站下载,有100万免...](https://link.juejin.cn?target=https%3A%2F%2Fwww.svgrepo.com%2F%25E7%25BD%2591%25E7%25AB%2599%25E4%25B8%258B%25E8%25BD%25BD%25EF%25BC%258C%25E6%259C%2589100%25E4%25B8%2587%25E5%2585%258D%25E8%25B4%25B9%25E5%25BA%2594%25E7%2594%25A8%25E5%259B%25BE%25E6%25A0%2587%25E3%2580%2582%25E6%2590%259C%25E7%25B4%25A2%25E4%25B8%258B%25E8%25BD%25BD "https://www.svgrepo.com/%E7%BD%91%E7%AB%99%E4%B8%8B%E8%BD%BD%EF%BC%8C%E6%9C%89100%E4%B8%87%E5%85%8D%E8%B4%B9%E5%BA%94%E7%94%A8%E5%9B%BE%E6%A0%87%E3%80%82%E6%90%9C%E7%B4%A2%E4%B8%8B%E8%BD%BD") 购物车svg图。 设计了一个html页面,可以输入svg图,一次性转换4个尺寸图。 当然您也可以用ps工具处理,就是4个图标而已。 ![44.png](https://oss.xyyzone.com/jishuzhan/article/1930869026430955522/12be696fed2757f2eec678ac6d4ccd2c.webp) 个人感觉,如果说自然语言成为第一开发语言,js将要成为第二开发语言,html天生可视化比python有优势,即使不懂电脑的媳妇都能看得懂网页。 ## 第5步 安装测试 1。打开Chrome浏览器,地址栏输入: chrome://extensions/ 点击右上角,开启开发者模型, 2、然后点击"加载已经解压的扩展程序",选择AI生成代码的文件目录,完成chrome初级的加载。 3、每次代码有更新,点击右下角的刷新按钮即可。 ![55.png](https://oss.xyyzone.com/jishuzhan/article/1930869026430955522/d2a5e6159a25573d8adfe7cf725b5f58.webp) 基本功能满足最初的设想,可以在3个网站进行同步比价了。 ![66.png](https://oss.xyyzone.com/jishuzhan/article/1930869026430955522/22a05d992381932beb62cc7fac243aa8.webp) ## 后续更新,需要开发的能力,在【vibe coding 解决100个问题】持续刷新 1、如何上传到chrome插件市场,让更多的人看到?如果用的人比较多,是不是可以设置会员版本? 2、给定一个商品,如何选品薅羊毛,参加满减活动? 3、如何每天自动跟踪一个商品,看他的价格曲线?保证商家不是先调整价格再给补贴优惠? ## 🎯 愿景和目标 尝试用各种最新AI模型及工具(Cursor/Augment Code,模型涉及Claude/OpenAI/Deepseek等),去解决工作,生活中的各种真实,开源提示词及解决思路。 如果你也想在AI时代开发一个小项目,也许你完全不懂编程?也许你学过编程但是不懂如何从0到1搭建一个MVP项目?欢迎订阅我公众号,这是一个以Augment/Cursor实战为主,以实战案例的形式开发几十个项目,包括:网站、微信小程序、浏览器插件、App应用、Dify+Coze智能体。 * 欢迎提供真实的问题和痛点。一切需要重复3次以上的工作,都值得用AI重写一遍。 * 更新频率:每周预计更新5篇,含提示词、演示示例及文章教程 * 欢迎收藏,点赞,转发,并观摩100个问题,如何从0到1的逐步撰写过程。 以上就是今天的全部内容,如果你觉得不错,欢迎点赞、在看、转发三连,帮助更多的朋友,这对我也很重要。 欢迎加vx ahong2866交流。

相关推荐
funfan05176 小时前
Claude4、GPT4、Kimi K2、Gemini2.5、DeepSeek R1、Code Llama等2025主流AI编程大模型多维度对比分析报告
ai编程
草梅友仁6 小时前
草梅 Auth 1.1.0 发布与最新动态 | 2025 年第 30 周草梅周报
开源·github·ai编程
LinXunFeng7 小时前
AI - Gemini CLI 摆脱终端限制
openai·ai编程·gemini
程序员X小鹿8 小时前
腾讯还是太全面了,限时免费!超全CodeBuddy IDE保姆级教程!(附案例)
ai编程
yeshan12 小时前
使用 Claude Code 的自定义 Sub Agent 完善博文写作体验
ai编程·claude·掘金·日新计划
人生都在赌15 小时前
一个AI工作流如何让代码审查从手动到智能?实战拆解
ai编程·devops·cursor
北极的树15 小时前
大模型上下文工程之Prefix Caching技术详解
人工智能·ai编程
软件测试君15 小时前
【Rag实用分享】小白也能看懂的文档解析和分割教程
aigc·openai·ai编程
qiyue7715 小时前
AI编程专栏(七)-什么是上下文工程,与提示工程区别
人工智能·ai编程·cursor
wayne21415 小时前
不写一行代码,也能做出 App?一文看懂「Vibe Coding」
人工智能·ai编程