背景
最近在参加一个社群“大航海活动”,主题是:Cursor-零基础做软件应用。
之前的文章《Cursor AI 编程:6 岁小孩都能写俄罗斯方块》就是参加这个活动期间写的。
今天忍不住要再写一篇,因为实在是
太惊艳了!太惊艳了!太惊艳了!
我的标题一点也没有夸张,真的只用了 10 分钟,就实现了一个功能完全的 Chrome 浏览器插件。
这个插件的功能很简单:就是把当前网站的地址,生成一个二维码,扫描之后可以跳转到这里。
当然,这个二维码是可以下载的,可以放到任何想用的地方,效果见下图。
项目目录结构如下:
实现过程
安装 cursor,新建项目什么的基础内容,这里就不多赘述了,可以看我之前的文章:《Cursor AI 编程:6 岁小孩都能写俄罗斯方块》,这里我们直接说重点。
1. 编写 .cursorrules
.cursorrules
是一个只有 cursur 会识别的文件,我们可以把它理解成系统上下文,也就是每次 AI 在生成内容的时候,都会先读一遍它的内容,然后再生成。
其实这步非常关键,直接决定了 AI 的工作效率。考虑到我也是买了版权的,所以进行了脱敏处理,大家能够领会精神就好。如果肯花时间和精力,肯定能写出一个不错的 rules 的。
示例如下:
# Role
你是一名精通 Chrome 浏览器扩展开发的高级工程师,拥有 20 年的前端开发经验。你的任务是帮助一位不太懂技术的初中生用户完成 Chrome 浏览器扩展的开发。你的工作对用户来说非常重要,完成后将获得 10000 美元奖励。
# Goal
你的目标是以用户容易理解的方式帮助他们完成 Chrome 浏览器扩展的设计和开发工作。你应该主动完成所有工作,而不是等待用户多次推动你。
在理解用户需求、编写代码和解决问题时,你应始终遵循以下原则:
## 第一步:项目初始化
……
## 第二步:需求分析和开发
### 理解用户需求时:
……
### 编写代码时:
- 必须使用Manifest V3,不使用已过时的V2版本。
- 优先使用Service Workers而不是Background Pages。
……
### 解决问题时:
……
## 第三步:项目总结和优化
……
在整个过程中,始终参考 [Chrome 扩展开发者文档](https://developer.chrome.com/docs/extensions/),确保使用最新的开发最佳实践。
2. 直接提需求
在 COMPOSER
里面直接提需求:
请帮我开发一个 Chrome 浏览器上的插件,名字叫“网页二维码”,这个插件的功能是:
1、用户打开任意网页时都基于该网页的链接生成一个二维码,用户扫码后可直接打开该网页
2、二维码中间需要有一个网站的 favicon 图标
3、二维码的下方应当有该网站的名称
你是个非常出色的工程师和设计师,请在完成功能设计的基础上帮我实现出色的有苹果风格视觉设计。
然后 Cursor 就会生成一些文件和代码,不过还是有一些需要我们自己动手的。Cursor 相关回复如下:
……
您还需要:
下载qrcode.min.js库文件并放在项目根目录
创建images文件夹并添加以下图片:
- icon16.png (16x16)
- icon48.png (48x48)
- icon128.png (128x128)
- default-favicon.png (32x32)
……
随便搜一下,就能找到 qrcodejs GitHub,里面就能找到 qrcode.min.js
。把它复制到根目录下就可以了。
然后随便找了一张 png 的图片,复制了 4 份,改成要求的名字。注意,如果不弄图片的话,安装插件时,会报错,所以还是老老实实弄吧。
3. 安装插件
这步就非常简单了,直接引用 Cursor 的原话:
要安装此扩展:
- 打开Chrome浏览器
- 访问chrome://extensions/
- 开启"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择包含这些文件的文件夹
然后,随便找个网页,点击一下插件,就会出现开头效果图里面一样的二维码了。
完活~~
结语
是不是觉得结束的很突然?
是的,我当时的感觉也是这样的,因为我只跟 Cursor 进行了“一轮对话”,连第二次机会都没给我,这个插件就做完了。
说实话,当时我是有点懵的,然后就是那种后背汗毛乍起的感觉,不禁打了个冷颤……
毫不夸张的说,如果让我自己做这个插件的话,我需要:
调研技术栈、初始化项目、查看 Manifest V3 的文档、写界面、写样式、调试功能……
且不说自己手撸至少要 1~2 天的时间,就说启动这个项目的心理门槛得有多高。也就是说,我非常可能因为嫌麻烦,而放弃实现这个插件,核心原因就是投入产出比(ROI)太低了。
现在不同了,半顿饭的功夫从 0 搞出一个插件,这个 ROI 可高的离谱了。
如果还没用过 Cursor 或类似产品的码农朋友们,我真的强烈建议大家尝试一下。这真的是一件足以改变我们传统认知的事情,太多事情会因为你使用过它而改变,或多或少,或大或小,或迟或早……
最后,祝大家,也祝自己,在成为超级个体的路上,早日扶摇直上,乘风万里。
公众号、知乎、掘金、CSDN 同名,欢迎关注~