10分钟!用 AI 制作网址转 QR 插件

63 阅读5分钟

背景

最近在参加一个社群“大航海活动”,主题是: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 相关回复如下:

……

您还需要:

  1. 下载qrcode.min.js库文件并放在项目根目录

  2. 创建images文件夹并添加以下图片:

  • icon16.png (16x16)
  • icon48.png (48x48)
  • icon128.png (128x128)
  • default-favicon.png (32x32)

……

随便搜一下,就能找到 qrcodejs GitHub,里面就能找到 qrcode.min.js。把它复制到根目录下就可以了。

然后随便找了一张 png 的图片,复制了 4 份,改成要求的名字。注意,如果不弄图片的话,安装插件时,会报错,所以还是老老实实弄吧。

3. 安装插件

这步就非常简单了,直接引用 Cursor 的原话:

要安装此扩展:

  1. 打开Chrome浏览器
  2. 访问chrome://extensions/
  3. 开启"开发者模式"
  4. 点击"加载已解压的扩展程序"
  5. 选择包含这些文件的文件夹

然后,随便找个网页,点击一下插件,就会出现开头效果图里面一样的二维码了。

完活~~

结语

是不是觉得结束的很突然?

是的,我当时的感觉也是这样的,因为我只跟 Cursor 进行了“一轮对话”,连第二次机会都没给我,这个插件就做完了。

说实话,当时我是有点懵的,然后就是那种后背汗毛乍起的感觉,不禁打了个冷颤……

毫不夸张的说,如果让我自己做这个插件的话,我需要:

调研技术栈、初始化项目、查看 Manifest V3 的文档、写界面、写样式、调试功能……

且不说自己手撸至少要 1~2 天的时间,就说启动这个项目的心理门槛得有多高。也就是说,我非常可能因为嫌麻烦,而放弃实现这个插件,核心原因就是投入产出比(ROI)太低了。

现在不同了,半顿饭的功夫从 0 搞出一个插件,这个 ROI 可高的离谱了。

如果还没用过 Cursor 或类似产品的码农朋友们,我真的强烈建议大家尝试一下。这真的是一件足以改变我们传统认知的事情,太多事情会因为你使用过它而改变,或多或少,或大或小,或迟或早……

最后,祝大家,也祝自己,在成为超级个体的路上,早日扶摇直上,乘风万里。

公众号、知乎、掘金、CSDN 同名,欢迎关注~