Cursor新人入门操作项目01：做一个Chrome浏览器插件——网页二维码

功能&需求背景说明

我在YouTube和B站经营一个自媒体频道「AI进化论-花生」，我做的主要是AI教学类的视频，在录制的视频中常常需要给用户演示使用不同的网站去做不同的功能，但是常常遇到一个很大的痛点是我很难把网页链接直接发给视频观众。尤其是B站的视频简介区和评论区不支持网页链接直接跳转，甚至发链接都是违规的，所以我会使用的一个做法是，在视频中演示到对应网页时，放上该网站的二维码，方便用户直接扫码访问。

而这个插件就是用来解决这个问题的，让我不必再特意找工具每次为视频中的页面生成二维码，再剪辑视频，而是在演示的时候可以让二维码直接展示在网页右下角。二维码是移动互联网的入口，我相信你也还能想到别的很多用二维码比使用链接方便的例子。

准备.cursorrules文件

我有个习惯是为不同类型的项目准确不同的.cursorrules文件。你在前面可能已经学过了，在 Cursor 中，Rules for AI 可以帮你为 AI 生成的代码设定一些基本规则，比如风格、命名方式等。这样，无论是在代码补全还是命令执行中，AI 都能更符合你的项目需求。

但是存在一些问题在于，如果你做不同的项目，尤其是当你频繁地切换写脚本、做网站、做app这些不同项目时，把Rules for AI完全写死不是个好主意。

这时候你可以使用.cursorrules，可以认为这是个更高级的项目定制系统提示词的模式。

如果你的项目需要更细致的规则，那么可以在项目根目录下创建一个 .cursorrules 文件。这样，Cursor 会自动加载其中的定制化指令，为这个项目量身打造生成效果。

用.cursorrules有下面三个好处：

1、多项目的差异化管理：不同项目有不同的编码规范和库要求，.cursorrules 能让每个项目的 Cursor 表现都符合你的预期。

2、减少手动调整：设定好命名规则、依赖库，Cursor 就会自动应用这些规范，无需频繁修改。

3、统一风格：无论是变量命名还是注释格式，AI 都会遵循项目特定要求，让代码更连贯。

有了.cursorrules这个文件，Cursor 在这个项目中与你对话时都会读取作为它的system prompt并执行这些规则。

在Chrome浏览器插件的项目中，你可以根目录创建.cursorrules文件，并在其中放入以下规范要求：

# Role

你是一名精通Chrome浏览器扩展开发的高级工程师，拥有20年的浏览器扩展开发经验。你的任务是帮助一位不太懂技术的初中生用户完成Chrome扩展的开发。你的工作对用户来说非常重要，完成后将获得10000美元奖励。

# Goal

你的目标是以用户容易理解的方式帮助他们完成Chrome扩展的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。

在理解用户需求、编写代码和解决问题时，你应始终遵循以下原则：

## 第一步：项目初始化

- 当用户提出任何需求时，首先浏览项目根目录下的README.md文件和所有代码文档，理解项目目标、架构和实现方式。

- 如果还没有README文件，创建一个。这个文件将作为项目功能的说明书和你对项目内容的规划。

- 在README.md中清晰描述所有功能的用途、使用方法、参数说明和返回值说明，确保用户可以轻松理解和使用这些功能。

## 第二步：需求分析和开发

### 理解用户需求时：

- 充分理解用户需求，站在用户角度思考。

- 作为产品经理，分析需求是否存在缺漏，与用户讨论并完善需求。

- 选择最简单的解决方案来满足用户需求。

### 编写代码时：

- 必须使用Manifest V3，不使用已过时的V2版本。

- 优先使用Service Workers而不是Background Pages。

- 使用Content Scripts时要遵循最小权限原则。

- 实现响应式设计，确保在不同分辨率下的良好体验。

- 使用TypeScript进行类型检查，提高代码质量。

- 每个函数和关键代码块都要添加详细的中文注释。

- 实现适当的错误处理和日志记录。

- 所有用户数据传输必须使用HTTPS。

### 解决问题时：

- 全面阅读相关代码文件，理解所有代码的功能和逻辑。

- 分析导致错误的原因，提出解决问题的思路。

- 与用户进行多次交互，根据反馈调整解决方案。

## 第三步：项目总结和优化

- 完成任务后，反思完成步骤，思考项目可能存在的问题和改进方式。

- 更新README.md文件，包括新增功能说明和优化建议。

- 考虑使用Chrome扩展的高级特性，如Side Panel、Offscreen Documents等。

- 优化扩展性能，包括启动时间和内存使用。

- 确保扩展符合Chrome Web Store的发布要求。

在整个过程中，确保使用最新的Chrome扩展开发最佳实践，必要时可请求用户给你访问[Chrome扩展开发文档](https://developer.chrome.com/docs/extensions)的权限让你查询最新规范。

在Composer中清晰明确表达你的需求

做到上面的准备工作，就到了你表达需求的时刻了，你可以通过Command+I（或ctrl+I）的快捷键调出Cursor的Composer功能，在其中清晰明确地表达你的需求。通常来说，如果你的需求比较复杂的话，一步步来，每次只表达一部分的需求是更好的，因为AI的上下文窗口有限，每次能处理的任务量有限，为了避免出错，提高每个模块的输出效率，你最好让他每次处理的任务少一些。不过我们目前的浏览器插件需求很简单，所以你可以比较直接完成你的需求表述，比如：

请帮我开发一个Chrome浏览器上的插件，名字叫“网页二维码”，这个插件的功能是：

1、用户打开任意网页时都基于该网页的链接生成一个二维码，用户扫码后可直接打开该网页

2、二维码中间需要有一个网站的favicon图标

3、二维码的下方应当有该网站的名称

你是个非常出色的工程师和设计师，请在完成功能设计的基础上帮我实现出色的有苹果风格视觉设计。

接着，你就看到Cursor非常快速的帮我完成了相关代码文件的新建和写入了：

同时，你也可以看出，Cursor在完成我们的任务之后也对我们提出的两个需求，那就是下载文件和创建图标，因为cursor还没有能力下载文件和创建png图片，你按着它的指引去做就好了：

1、前往https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/ 下载qrcode.min.js文件放在这个文件的根目录中

2、icon你可以随便在网上找一些图片，或者使用文生图工具生成，然后按cursor的指引，创建一个icons文件夹，在其中保存文件名分别为icon16.png、icon48.png、icon128.png的文件，他们的大小最好分别是16*16、48*48、128*128，但其实chrome对这方面的校验不严格，你使用一个图片分别命名成这三个名字也可以。或者还有个更容易的方式创建图标，就是cursor虽然没法创建png图标，但是它非常创建写代码，可以创建svg格式的图片，你可以让它用svg格式写出图标，然后到我这个网站https://www.img2046.com/svg-generator把svg格式代码转化为png格式图片保存即可。