【Cursor实战】实现一个爬取Github Trending热榜插件

前言

今天继续使用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热榜插件

本文同步自微信公众号 "程序员小溪" ,这里只是同步,想看及时消息请移步我的公众号,不定时更新我的学习经验。

相关推荐
就是这么拽呢2 小时前
论文查重低但AIGC率高,如何补救?
论文阅读·人工智能·ai·aigc
Bigger4 小时前
第一章:我是如何剖析 Claude Code 整体架构与启动流程的
前端·aigc·claude
树獭叔叔4 小时前
Claude Code 工具系统深度剖析:从静态注册到动态发现
后端·aigc·openai
云边云科技_云网融合4 小时前
详解Token经济:智能时代的价值标尺与产业全链路重构
人工智能·aigc·token
树獭叔叔4 小时前
Claude Code 的上下文管理:多层渐进式压缩架构深度解析
后端·aigc·openai
AI攻城狮4 小时前
Anthropic 开源了 Claude 的 Agent Skills 仓库:文档技能的底层实现全公开了
人工智能·云原生·aigc
星纬智联技术5 小时前
深度测评:GEO优化实战,如何构建AI搜索引擎偏爱的“高引用体质”?
人工智能·aigc·geo
AI先驱体验官6 小时前
实时交互数字人:企业服务场景的技术落地分析
大数据·运维·人工智能·重构·aigc
用户5191495848457 小时前
InstaWP Connect 漏洞利用工具 (CVE-2024-2667)
人工智能·aigc
星纬智联技术7 小时前
微信小程序72小时交付:从“营销噱头”到“标准服务”的拐点已至
人工智能·aigc·搜索引擎优化