开发背景
最近学习了Cursor，又想开发一个 Chrome 扩展,可以方便地下载网页中的图片和视频，最后上传到应用市场,总结一下这次的经验。
开发过程
第一阶段:实现基础图片下载
- 首先我们实现了最基本的图片拖拽功能
创建了一个固定在右上角的下载区域
遇到第一个问题:图片拖到区域后会在新标签页打开
让 AI 改进代码,使用 chrome.downloads API 实现直接下载
分析发现某些网站的图片被特殊处理过
尝试了多种方案:
克隆节点方案(失败)
修改事件监听方案(部分成功)
直接设置属性方案(最终采用)
优化了下载区域的视觉反馈
添加了下载状态提示
这一块比较简单，和cursor口语化对话提要求，十分钟就完成了。
第二阶段:添加 B 站视频解析
实现了基本的视频解析功能
添加了一个独立的工具按钮
- 发现布局问题:两个功能区域重叠4. 优化布局:
图片下载区域放在右上角
视频解析按钮放在右下角
使用 B 站主题色
添加交互动效
这个阶段出了一点问题，cursor无法理解如何直接从视频网站下载视频，抓取解析的节点无法下载，所以我找了现成的网站发给cursor让它模仿学习，还是挺有效果的。
第三阶段:学习其他工具经验
分析了其他下载工具的实现方式
观察它们的网络请求和日志
学习到了一些技巧:
如何正确解析视频地址
如何处理特殊的图片元素
如何优化用户体验
通过这次与 Cursor协作的经验
有效的沟通方式
清晰描述当前问题
提供具体的错误信息
说明期望的效果
分享参考实现的例子
开发策略
每次只解决一个问题
先实现基本功能再优化
及时测试和验证
保留已经可用的代码
AI 的优势
快速生成基础代码
提供多种解决方案
帮助解决技术难点
可以学习和分析其他代码
实用技巧
开发过程中的技巧
使用 console.log 跟踪问题
观察其他工具的实现方式
分步骤推进开发
及时处理发现的问题
调试技巧
查看网络请求了解API
分析其他工具的日志
测试各种特殊情况
在不同网站验证功能
总结
这次开发经历让我深刻体会到:
AI 是很好的编程助手,但需要学会如何与它协作
观察和学习他人的实现很重要
开发过程要循序渐进
持续优化才能做好产品
推荐一个cursor-固定ruleshttps://www.kdocs.cn/l/cqCaEsjlTcwK
Chrome 扩展上传应用市场的曲折之路
初次尝试：Google Chrome 网上应用店
作为一个新手开发者,我首选的当然是 Chrome 网上应用店。然而现实很快给了我一记重拳：
需要支付 5 美元的开发者注册费
支付过程中遇到交易失败
即使按提示去个人中心查看,依然显示"正在审核资料"
最终不得不暂时放弃这条路
转战 Edge 插件市场
既然 Chrome 之路暂时受阻,我决定尝试 Edge 插件市场。但是这个过程同样充满了挑战。
注册步骤详解
基础准备
首先需要注册 Microsoft 账号
访问 Edge 插件市场: microsoftedge.microsoft.com/addons/Micr…
点击"发布扩展"进入详情页
开发者账号注册
可直接访问注册页面: partner.microsoft.com/zh-cn/dashb…
选择个人开发者身份
选择国家为中国
填写基本信息
关键注意事项
如果提交不通过,将语言标记修改为 "en-us"
多次尝试无效可以切换:
不同代理
手机热点
关闭代理
最终切换成手机才有
State/Province 必须使用手机浏览器操作,因为只有手机端显示下拉选择框（我的电脑这个必填，没有下拉框，每次都会报错，最终换手机才成功）
支付环节
成功提交后会跳转到支付页面
需要支付约 100 多元的账号费用
支付完成后自动进入发布流程（我直接关闭了，也可以发布插件包）
发布流程
准备材料
代码打包成 zip 文件,包含:
manifest.json
background.js
content.js
styles.css
images/icon.svg
在 iconfont 准备应用图标
编写应用详情描述
提交审核
上传 zip 包
上传应用图标
填写详细信息
点击发布等待审核
结语
从构思需求、开发实现,到最后的应用市场发布,整个过程既有技术层面的挑战,也有流程上的波折。虽然过程曲折,但最终看到自己的作品上线还是很有成就感的。希望这些经验能帮助到其他想要发布浏览器扩展的开发者,少走一些弯路。
