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文件，保存以下内容
# 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开发过程
由于前期需求聊的笔记重复，我直接指挥干活了。
@.rules.md 如何使用chrom插件 ，在同一个屏幕比较京东，淘宝，拼多多的商品搜索结果，
帮我实现一个实用的解决方案，要求免登录（利用浏览器的cookie）
我都说了不用爬虫，它还给我跑偏了，真笨。写一个详细优化版的提示词吧：
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万免… 购物车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交流。
