我用Claude Code和Cursor同时写了一个Chrome插件，差距比想象中大

最近有个小需求：想把浏览器里看到的任何API返回JSON，一键格式化并截图分享。听起来不复杂，但手动复制到JSON格式化工具再截图实在太烦了。

正好手上有Claude Code和Cursor两个AI编程工具，我决定做个对比测试——用它们各自独立写同一个Chrome插件，看看谁更好用。项目不大，正好能在两小时内完成，适合做一次公平的比较。

先说结论：两个都能写出来，但过程和产出质量差异很大。下面是我的完整测试记录。

测试设置

项目：一个Chrome扩展，自动检测页面中的JSON响应，点击扩展图标后格式化显示，并支持一键截图复制。

测试条件：

测试机是MacBook Pro M3，Node 20。代码仓库放在GitHub上，测试过程录了屏。

根据Stack Overflow 2025年开发者调查，约62%的开发者已经在日常工作中使用AI编程助手，而Chrome扩展开发是AI辅助编程的典型场景之一——因为API固定、逻辑清晰、项目规模适中。

我的prompt很简单：”创建一个Chrome扩展，能检测当前页面中的JSON响应，点击扩展图标弹出一个格式化面板，显示格式化后的JSON，并支持复制和截图下载。”

Claude Code先问了几个澄清问题，比如”JSON从哪里获取——从Network请求还是页面内容”、”截图需要包含扩展面板还是只截JSON区域”。我回答了”从background.js监听网络请求获取”和”只截JSON区域”。

然后它开始写了。过程挺有意思的：它不是一口气写完所有文件，而是先创建manifest.json，然后创建background.js，再创建popup页面。每个文件写完后会问”这部分是否符合预期”，确认了再往下走。

总共花了大概35分钟。生成的代码包括：

第一版跑起来后发现了两个问题：一是截图时格式化的JSON区域有白边，二是某些HTTPS请求拦截不到。我反馈后，Claude Code又迭代了两轮，各花了10分钟左右。最终版本在第3轮修复了这两个问题。

从开始到最终可用版本，总耗时大约55分钟。

同样的prompt，在Cursor的Composer窗口（Ctrl+K模式）输入。这次我选择了”Agent”模式，让它能自动创建和修改文件。

Cursor的反应更快——输入prompt后大约3秒就开始生成代码了。它一次性创建了所有文件，没有中间确认步骤。这个过程很快，大概12分钟就完成了所有代码。

但问题是第一版根本跑不起来。manifest.json里漏了”host_permissions”，popup.js引用了chrome.debugger API但权限没配对。点开扩展图标直接报错。

我把错误信息粘贴回Cursor让它修。它很快识别了问题，改了manifest和popup.js。第二次尝试，能弹出来了，但JSON格式化功能是空的——它用了一个假的示例JSON而不是真正的网络响应数据。

又修了两轮。第三版终于能拦截到网络请求了，但截图功能依赖的html2canvas版本太旧，有兼容性问题。第四版换了dom-to-image库，终于跑通了。

总耗时大约70分钟。比Claude Code多花了15分钟，主要是因为修bug的轮次更多。

跑通之后我把两个版本都review了一遍。有几个明显的差异：

错误处理。 Claude Code生成的代码在每个可能出错的地方都有try-catch，而且会向用户显示友好的错误提示。Cursor的版本基本没有错误处理，出错了就直接在控制台抛异常。

代码结构。 Claude Code把不同功能拆分到了独立文件中，main.js只做入口调度。Cursor把所有逻辑都塞进了popup.js，一个文件将近400行。

注释和文档。 Claude Code给每个函数写了JSDoc注释，还在根目录放了个README。Cursor基本没写注释。

安全性。 Claude Code生成的manifest用了最小权限原则，只请求了必要的API。Cursor的版本直接请求了”“权限，这在Chrome Web Store审核时会被打回来。

但如果只看”能不能跑”，两个版本最终都能跑通。对于只想快速验证想法的场景，Cursor的速度优势在前半段更明显。

Claude Code的对话式交互让我感觉更像在和一个初级开发者协作——它会问问题、确认方向、迭代改进。好处是最终质量更高，坏处是过程有点啰嗦。

Cursor的一键生成体验很爽，但”一次生成完就跑”的模式在遇到复杂项目时容易翻车。你得自己debug，而Cursor对已有代码的上下文理解不如Claude Code深入。

我的个人感受：如果项目逻辑简单（比如一个静态页面），Cursor的效率更高。但如果涉及多个文件的协作、权限配置、API调用，Claude Code的迭代式生成更靠谱。

这次测试我大概记录了轮次数据：

GitHub Copilot在2026年2月发布了一份报告，说他们的用户平均每次编程任务会发起3.2次AI交互。这个数字和我这次的测试结果挺接近的——不管哪个工具，很少有一次生成就完美的。

测试的完整代码放在GitHub上，有兴趣的可以去看看。项目地址就不贴了，搜”json-viewer-chrome-extension”应该能找到。

这个对比不科学，样本量只有1，但我写这个不是为了证明谁更好。纯粹是记录一次真实的使用体验。

AI编程工具这两年进步太快了。2024年的时候，让AI写一个Chrome扩展还经常出现结构性问题。到了2026年年中，两个工具都能独立完成一个可用的小项目。

真正有价值的已经不是”AI能不能写代码”，而是”怎么让AI写出来的代码少出问题”。从这个角度看，Claude Code的迭代式生成模式，至少在复杂项目上更让人放心。

下次我打算拿一个更大的项目来测——一个带后端的全栈应用。到时候再写一篇。