Cursor从小白到专家-第三课

UP主: Next蔡蔡 · 时长: 4:12 · 🔗 B站原视频

标签: Cursor · AI编程 · 浏览器插件 · 低代码开发 · 效率工具

课程简介与项目准备

哈喽，各位精神股东们，今天是 Cursor 系列课程的第三课。大家平时使用浏览器可能会遇到一些问题，比如外文视频没字幕看不懂、下载图片视频有水印得二次处理等。虽然可能已经有插件提供了差不多的解决方案，但要么付费，要么解决问题不彻底，要么不支持特定浏览器。没关系，学完今天的 Cursor 第三课，你就能手搓一个满足自己特定需求的实用插件。

老样子，先创建一个新的文件夹用来承载开发项目，然后用 Cursor 打开这个文件夹，接着创建一个 Cursor Rules 文档。今天的 Cursor Rules 内容和第二课不同，是指向浏览器插件开发的。大家不用着急截图，我同样会把第三课的所有指令都打包放到视频最后。Cursor Rules 的作用就不在这里赘述，想了解的小伙伴可以移步第二课。这里分享两个好用的 Cursor Rules 范例及工具，一个是 Cursor Directory，一个是 Cursor List，超多范例直接复制就能用。

需求指令与代码生成

做完准备工作，就可以把自己的需求指令发给 Cursor。需求尽可能清晰具体，没有歧义。比如我要开发一个用于生成金句卡片的插件，我会把插件名称、基础架构、核心功能清单都列出来。这是因为 AI 的生成具有随机性，如果我们只是给 Cursor 提一个很粗略的需求，那它就会根据自己的理解去出方案，但这种往往会和我们预期相差较大。

每轮代码生成后，Cursor 都会在最后总结上述代码都实现了哪些功能。我们确认功能这么实现没问题的话，就可以点击 Accept All。接着就是根据 Cursor 的提示以及你自己的需求，一步步完善这个插件的代码。

MVP 测试策略与 Codebase 检查

这里补充一个小技巧，也是我使用 Cursor 踩过的众多坑之一，就是别被 Cursor 牵着走，生成太多轮代码后再去测试，否则很可能出现测试报错，但因为代码太多很难定位的情况。所以我在给 Cursor 下第三轮指令的时候加了一句话：完成核心功能后我们就开始测试 MVP。这里的 MVP 是产品开发中的一个术语，即最小可行性产品。用大白话来解释，就是先做个能用的产品出来，好不好用再说。

因为浏览器插件测试经常会各种报错，所以在正式测试前，我们可以用 Cursor 的 Codebase 功能对项目代码进行全盘检查。Codebase 的功能非常强大，它不仅能检查单个文件的代码是否准确、是否考虑到特殊情况，还能检查整个代码结构、不同代码文件之间的关联是否合理。完成代码优化后，就可以进入测试环节。

解决非代码问题与模型切换技巧

如果不知道怎么测试浏览器插件，同样可以把问题抛给 Cursor，然后 Cursor 就会给出分步骤流程。从 Cursor 给出的回复看，我的插件要运行起来还需要添加三种本地字体以及四张 icon 缩略图。不知道这些字体怎么获取？没关系，直接问 Cursor。

一般这种非代码编写相关的问题，我会从 Composer 模式切换到 Chat 模式，然后把模型从 Claude 3.5 Sonnet 切换到 GPT-4o mini。这么切换有两个原因：切换 Chat 模式是因为这个模式下能更快速解决问题，第二课有详细分享 Chat 和 Composer 的区别，这里不赘述；切换模型则是因为 GPT-4o mini 不限量，Claude 3.5 Sonnet 要省着用。

字体和 icon 的具体解决过程就不展示了，附上我常用的几个免费实用的字体素材和 icon 素材工具。字体素材工具包括 Google Fonts、100font，如果你知道字体的具体名称，GitHub 也是一个不错的选择。icon 素材工具的话，阿里的矢量图标库 Iconfont 就非常够用了。

插件加载与报错调试

解决完字体和图标问题，我们回到测试环节。打开 Google，右上角依次点击“扩展程序”-“管理扩展程序”。在打开的扩展程序页面右上角开启“开发者模式”，接着就可以点击左上角的“加载已解压的扩展程序”。这里提到的“已解压的扩展程序”大家不用理解复杂了，它其实就是我们最开始创建的文件夹，文件夹里包含了后续 Cursor 生成的所有文件。

无法成功加载扩展程序同样没关系，把这段报错复制下来发给 Cursor，根据 Cursor 给到的解决方案进行解决，一部分需要我们手动运行终端指令。解决完加载失败的问题后，重新打开扩展程序页面，在刚才的报错窗口点击重试，这时候系统就会加载修改后的代码。

核心功能测试与后续迭代

加载成功只是测试的第一步，我们接下来还得找个网页来测试下插件的核心功能。卡片模板、背景设置、字体设置、文字对齐、导出设置、导出功能都有，问题出在选择的文字不显示。没关系，把我们发现的问题丢给 Cursor。如果是那种用文字很难描述清楚的问题，还可以把截图一并丢给它。

等 Cursor 解决完问题后，我们刷新下加载的程序，再刷新下页面。一定要记得刷新页面，不然可能因为缓存导致你以为修复没生效。这一轮测试没什么大问题的话，就算大功告成了。后续有哪些想要增加的功能，可以在这个基础上继续迭代。

最后补充一个小的知识点，浏览器插件开发成功后，你不仅可以自用，还可以直接打包发给亲友用。但如果你还想要发布到浏览器商店，那就得走上架流程，流程也是可以问 Cursor。Cursor 第三课就到这里了，明天第四课见。