前言
今天继续使用Cursor练手,实现一个简单的获取Github trending信息的浏览器扩展,优秀开源项目一键触达。
限制
GitHub Trending 是国外网站,有时会出现拉取失败的情况,拉取失败时可以在浏览器打开看是否可以正常访问
Github Trending简介
GitHub Trending 是一个可以实时展示Github上最受关注和最受欢迎的开源项目,在这里我们可以时刻找到优秀的开源项目,学习到具有价值的技术和信息。
Github Trending官网地址:github.com/trending

使用Cursor开发
使用Cursor开发项目第一步还是要写清楚项目背景、要求,今天开发的是浏览器插件,为了使Cursor具备更强的浏览器插件知识和开发能力,我们可以使用大佬开发的Cursor提示词插件为项目添加一个.cursorrules(有要求的小伙伴也可以自己写)
使用Cursor Rules
Cursor插件市场搜索下面的插件进行安装

安装完成,使用快捷键【Cmd+Shift+P】唤起命令面板,选择【添加Cursor规则文件】回车

选择【Chrome插件】

添加完成后,我们就拥有了一个完整的浏览器插件的提示词

插件开发
有了提示词下面就是要通过提示词描述我们的需求了,我们的提示词可以大致描述如下:
markdown
我准备开发一个基于V3版本的浏览器插件,该插件的主要功能是通过爬虫解析github trending网页获取对应的项目列表信息,我会为你提供相关材料和要求:
1. github trending地址:https://github.com/trending
2. 解析并获取网页中`Repositories`的下项目的详细信息,包括项目名称、描述、stars数、今天的stars数、follow数及项目url
3. 浏览器插件通过列表的形式合理展示爬取的项目列表信息,点击项目列表可以跳转到对应的github项目
- 插件页面结构简洁明了,使用大厂设计风格和配色方案
为了让Cursor更好的理解和分析网址,可以将github.com/trending链接单...

等待Cursor完成,这里Cursor没有直接提供icon图标,而是给了2种生成图标的方式

在浏览器中打开 icons/icon_maker.html 将icon保存到项目


加载浏览器插件
在浏览器点击【管理扩展程序】或输入下面地址打开浏览器扩展
arduino
chrome://extensions/
点击【加载已解压到扩展程序】,选择插件目录


加载完成后就可以看到插件信息

使用插件
在浏览器点击【扩展程序】,从插件列表找到对应插件

插件加载出来了,但是有问题

我们可以将问题告诉Cursor,让Cursor帮我们修复

修复完成后,点击插件的刷新按钮更新插件或者删除插件重新加载

修复完成后,可以看到基本信息了,效果看着还是蛮不错的,还加了语言类型标签👍。但是数据仍有问题,我们继续让Cursor尝试解决
|------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
| |
|
经过了多轮尝试后,最终实现效果如下:

总结
今天这个案例Cursor除了在获取stars数、今日stars数和关注数的的环节卡壳,其他的任务完成的都非常好,对于复杂逻辑和不太容易使用语言能描述的需求建议直接使用示例的方式,通过示例引导Cursor理解我们想要表达的需求。
项目地址
项目放到Github了,感兴趣的小伙伴可以自行玩耍
Github地址:github.com/MisterZhouZ...
友情提示
见原文:【Cursor实战】实现一个爬取Github Trending热榜插件
本文同步自微信公众号 "程序员小溪" ,这里只是同步,想看及时消息请移步我的公众号,不定时更新我的学习经验。