万字细解零基础代码能力如何使用cursor，以制作一款浏览器插件为例
AI开发时代不再是程序员专属，
本文能够带你从0用Cursor和大模型API做出一个能读取网页内容并自动生成摘要的插件。里面有一些cursor的使用技巧，如果不是零基础也可以看看技巧总结。
项目目录
一.cursor是什么以及如何下载？（已经了解可以跳过）
二.插件结构介绍以及分析项目清晰思路
三.插件制作实操环节
四.插件打磨，优化产品体验
五.部署插件，以及上传github分享插件
六.总结
一.cursor是什么以及如何下载？
Cursor是什么
Cursor是一款基于AI技术的现代化代码编辑器，专为提高编程效率而设计。有非常强大的Tab功能，而且新账号有14天的免费试用期。它结合了传统IDE的功能与先进的AI辅助功能，非常适合初学者和专业开发者使用。
如何下载
首先打开官网，浏览器输入 cursor.com 即可进入官网。（默认配置好网络环境）
点击sign in登录。
登录好之后即可看到看到关于自己的账号信息，cursor是有14天免费试用的，大家感兴趣一定要亲自试一试，cursor是现在AI产品中，为数不多的使用体验感比较好的产品。
接下来直接点击下载就可以了。
打开之后是这个界面，由于我不是第一次打开，所以会有所不同，这里由于重点是实操环节，所以就不过多说明。
二.插件结构介绍以及分析项目清晰思路
下面我们正式开始这个插件制作。
在一个项目中，我们首先需要做的是分析需求和明确项目思路，这有助于我们明确规划和让cursor减少降智风险，让项目更加可控。首先，明确一个插件需要什么结构。
梳理插件功能结构，划分模块：
manifest.json 配置
content.js 负责网页内容提取
background.js 协调后台逻辑
popup 页面呈现 UI
utils.js 封装工具函数
当然，这一步也可以使用AI来帮助我们完成，比如问AI我要制作一个插件（APP，小程序等等），我应该这么做，简单的项目现在的模型基本都可以胜任。
我们明确了项目结构，接下来就可以开始制作这个插件了。
三.插件制作实操环节
这里我使用GPT4o为例（这里也可以使用cursor或者其他AI），来生成cursor的提示词，这一步还是比较关键的，能够明确项目的具体功能和实现方法，如果不满意在继续修改，这里粒度对齐好，就可以下一步了。（尽可能不要在制作过程中临时修改功能，这样太容易混乱，需要修改也要在功能全部打磨好后，在进行添加。）
将文案复制下来创建.txt文件即可
这里我使用的与GPT同样的文案
这里cursor已经把所有代码全部生成好（在重要项目中不建议这样做，因为代码多，容易出现错误，这里这样使用是因为插件比较简单，而且项目不多，在比较复杂的项目中，一定要分开操作，也就是每个文件都使用单独的对话，这样比如容易修改）
下面就是导入插件，这里也是非常简单。点击管理扩展程序，
加载已解压的扩展程序，，选择到文件放置的根目录，就可以导入了
这个错误是因为插件需要图标文件，但我们之前只创建了图标文件夹，没有添加实际的图标文件，我们只需要把这个错误在发给cursor，就可以自动生成空图片，然后就可以打开了。
最后插件打开是这样的，初步功能就已经能够实现了。下面就是进行产品打磨，优化产品体验。下一步是最重要的一步，我会在打磨过程加入一些使用技巧。
四.插件打磨，优化产品体验
这一步是最重要的一步，我会在打磨过程加入一些使用技巧。这一步决定是插件的上限，会有点麻烦，所以要有耐心。
现在可以看到，这个插件功能还不完善，比如： 1.我无法看到提取网页的结果，只能看到摘要部分。
2.我无法使用其他模型的API，只能使用deepseek模型。（如果没有多模型需求，只使用单模型API就可以，多模型容易出问题）
还有其他各种各样的问题，比如下载格式不够丰富等等，但是尽量不要一次性更改太多内容，所以我先将这两个问题给cursor。
API补充：
各个模型基本都会有一个详细的调用API教程，我以deepseek为例子，来介绍如何使用cursor快速使用API
点击API开放平台
点击接口文档
将上面的网址复杂下来（使用其他API时，复制的要是介绍调用API的网址）
打开cursor，输入@，选择Docs（后面会详细说明Docs的作用）
在最下面找到Add new doc
输入刚才复制的网址，粘贴进去，起一个名字，点击Confirm
当然，不想这么麻烦也可以直接将刚才的网址复制到对话框（在这个项目中，效果相同）
然后让cursor按照这个来配置API，API就自动配置好了。（简单吧）
接下来就是获取API密钥，直接在API密钥 创建API key 就可以了，
创建好一定要把这个数字记好，也不要把这个key分享给陌生人，因为这是花自己的钱（非常便宜，在新账号中deepseek默认有十元，可以用很长时间，使用API基本不会出现服务器未响应情况，当然，如果有本地部署模型，用本地模型也可以。）
这样API就配置好了。
下面我们继续优化使用体验，现在可以看到，cursor已经把刚才两个问题解决好了，但是现在还有许多可以优化的地方： 1.我无法看到API链接情况，需要增加可以API测试阶段 2.由于我提取的网站是英文网站，导致回答我的也是英文，要统一为中文回答。
3.只能下载摘要，无法下载原文，我需要都可以下载
4.没有悬浮球设置
Doce
是用来文件检索和浏览器检索功能
例子
当是https://docs.cursor.com时候，就只是搜索这一个页面，在后面跟一个/，就会搜索这些这些所有子页面
技巧：在打磨过程中，我们可以不先确认，在0.46版本后，cursor会自动应用，我们可以先看看插件的UI，看看更改的功能是否让我们满意，如果更改满意，在选择更改。如果不满意，在重新提问，这样能最大程度减小cursor乱改。
后面就是不断打磨，让插件更加好用的过程。这里我就增加跳过了，大家可以根据自己的需求来打磨功能。
注：在打磨过程中大概率会遇到这个问题，就是cursor突然就可以解释这个项目功能了，这个说明cursor已经开始出现混乱了，一定不要应用这次的修改操作。
我们需要创建一个新窗口
使用@命令选择Past Chats，
然后选择刚才进行的对话，这样能够减小上下文过长导致的混乱问题。
Past Chats 命令就是总结这个对话的消息，同样是在0.46版本更新后加入。
打磨过程我就跳过了，因为都差不多，关键是需求明确，简单如：
关于悬浮球： 1.现在悬浮球没有UI 2.悬浮球无法实时跟随鼠标 3.我要能够选择悬浮球的开与关
最后我们打磨好的就是这个样子
五.部署插件，以及上传github分享插件
下面如果对github不了解可以去了解一下，直接问AI就可以了，它是全球最大的开源社区平台。
当然，这一步依据可以让cursor帮我们完成。
当然，他无法完全帮你上传github，但是会给你一些命令，点击运行这些命令就可以登录你的github账号，然后点击这个加号，就可以创建一个空仓库，在空仓库点击上传，选择刚才创建的所有文件，就可以上传成功啦。
六.总结
随着AI时代的来临，“写代码”这件事正在被彻底改写。不再需要精通各种语言，也不再受限于传统的学习路径。尤其是Cursor这类AI IDE的出现，让零基础用户也能以项目为目标，边做边学。
这篇教程将用最简单的方式，带你完成一个真实可用的浏览器插件，从读取网页内容、调用大模型API生成摘要、到打包上线，一步步教会你如何借助AI构建自己的第一个产品。
回顾整个插件开发过程，不难发现：
AI降低了知识门槛：你不需要成为工程师，也可以构建工具。
项目驱动比知识积累更重要：边做边学，才是当下最实用的学习方法。
AI只是工具，人依然是创造者：你来定义需求，AI来实现构想。
这个插件只是开始。或者说，这是这个AI时代的开始，AI的发展无限放大了知识平权，而我们在时代的发展中或许微不足道，但是有什么关系呢，你现在可以用AI做许多之前想都不敢想的事情，这就足够了，因为人生是自己来定义的，现在是，未来也是，而且，现在你有来一个如此强大的帮手。不打算做一番事业吗？
下一次，不妨问自己： “我能不能用AI，做出一个解决我自己问题的小工具？” 答案几乎永远是：当然可以！
