618又要到了，家属又要开始加入剁手党了，每次都要拿着小本本，计算买什么最划算，怎么可以领取平台补贴，怎么可以薅羊毛！！！ 重复3次以上的工作都可以用AI实现，面对商家名目缭乱的各种补贴，如何让AI帮助我们选品，实现利益最大化？ 本次教程使用Augment Code开发，使用其他AI工具效果一样（500行以内的MVP开发没太大区别，都是用的Claude 4），主要是用Augment Code免费14天的额度。
第1步：先跟AI讨论一下都有哪些方案
1、不要写任何代码，我们讨论下，我想同时对比京东，淘宝，拼多多，
商品搜索结果差异，如何写一个程序实现？图片\] Augment Code给推荐了API官方接口，或者爬虫网页方式。 女人买东西不可能搜过一下就下单，怎么也得货比三家。京东淘宝不可能给开放API查询接口的，爬虫机制又涉及到反爬机制，不想搞的这么兴师动众。于是就问，用chrome插件如何实现？ 程序又给了3个推荐方案： * 浏览器扩展+简单对比 * 桌面应用+深度分析 * 移动端+社区功能 从体验上看，chrome插件最简单。  这个方案可以在一个窗口打开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） ```  我都说了不用爬虫，它还给我跑偏了，真笨。写一个详细优化版的提示词吧： ```less 1、重新设计卡片交互，不要使用爬虫机制，真实打开京东，淘宝，拼多多的三个网页， 在同一个窗口并且分成3个卡片（三个真实的网页iframe）。顶部一个搜索框， 一个"搜索"按钮，一个"网格布局/标签布局"下拉框， 2、搜索框输入数据数据时候，点击"搜索"按钮，全部网页进行输入框的关键字搜索。 网页地址如下： http://jd.com/ https://www.taobao.com/ https://mobile.pinduoduo.com/ 3.点击某个卡片放大，其他卡片变成竖状排列tab。 4、点击某个竖状排列Tab，恢复卡片窗口。 5、点击"网格布局"下拉框，三个卡片在同一个页面显示，分列布局。 6、点击"标签布局"下拉框，选择的tab列网页呈现，其他网页只显示tab竖状排列。 ```  ## 第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个图标而已。  个人感觉，如果说自然语言成为第一开发语言，js将要成为第二开发语言，html天生可视化比python有优势，即使不懂电脑的媳妇都能看得懂网页。 ## 第5步 安装测试 1。打开Chrome浏览器，地址栏输入: chrome://extensions/ 点击右上角，开启开发者模型， 2、然后点击"加载已经解压的扩展程序"，选择AI生成代码的文件目录，完成chrome初级的加载。 3、每次代码有更新，点击右下角的刷新按钮即可。  基本功能满足最初的设想，可以在3个网站进行同步比价了。  ## 后续更新，需要开发的能力，在【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交流。