惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Recent Announcements
Recent Announcements
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
B
Blog
T
The Blog of Author Tim Ferriss
J
Java Code Geeks
腾讯CDC
D
Docker
G
Google Developers Blog
D
DataBreaches.Net
雷峰网
雷峰网
Blog — PlanetScale
Blog — PlanetScale
S
SegmentFault 最新的问题
The Cloudflare Blog
有赞技术团队
有赞技术团队
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Stack Overflow Blog
Stack Overflow Blog
大猫的无限游戏
大猫的无限游戏
量子位
美团技术团队
aimingoo的专栏
aimingoo的专栏
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Engineering at Meta
Engineering at Meta
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
浅谈Cursor-小白如何创建自己的chrome插件 - 少数派
2024-09-13 · via 少数派

       先给不了解Cursor的同学科普一下这是一个什么神奇的软件,起因是昨天在X上面看到一个父亲让自己8岁的女儿使用Cursor独立开发了一个智能助手的热点再一次带动起来了编程AI软件Cursor。

       那么这次我将会作为一个零基础的小白使用Cursor来从头创建一个“电子木鱼”chrome插件,发布到chrome应用商店,同时把代码开源到Github供大家共创优化。

Cursor logo

简单介绍一下Cursor的背景,而这次我们就是要用这个软件来从零开始写一个chrome休闲游戏插件。

【Cursor是一款革命性的代码编辑器,它集成了强大的AI功能,旨在提高开发者的编程效率。以下是Cursor的一些主要特点:

  • AI辅助编码:Cursor能够理解开发者的意图,提供智能代码补全和建议。
  • 自然语言编程:开发者可以用自然语言描述需求,Cursor会自动生成相应的代码。
  • 代码解释和优化:Cursor可以解释复杂的代码片段,并提供优化建议。
  • 多语言支持:支持多种编程语言,适用于各种开发场景。
  • 实时协作:支持团队成员之间的实时协作编程。

Cursor的出现标志着AI在软件开发领域的重要突破,它不仅能够帮助经验丰富的开发者提高效率,还能降低编程的门槛,使得像文中提到的8岁女孩也能轻松开发出智能应用。】

开始前,我们需要先把自己的网络环境给搭建好(就当你已经搞定),然后我们登陆Cursor的官网,点击Download进行下载软件即可。(https://www.cursor.com/)

Cursor官网

首次打开软件后,我们可以先在设置页面—Features选项下把Composer这个选项都打开。(默认情况下会关闭几个)完成以上操作就可以开始我们的创作之旅了。

Cursor打开AI设置开关

我简单来介绍一下这个软件的基础使用方法,其实如果你之前就用过Visual Studio Code的那基本和这个软件一致,首次打开软件就是简单的新建文件夹/文件的按钮,选择“Open a folder”后就是把你需要开发的文件统一保存在你选择的文件夹中,方便软件下次直接识别读取。其次页面就是分为两个区域,左边是你的文件夹-文件展示区域,后续Ai创建的文件都会在左侧展示出来,右上角就是切换UI页面的展现,其中点击调出AI窗口则会展示相应AI页面。

       接下来我们把自己需要创建的插件功能先想清楚,比如这次我想做一个可以在上班时间摸鱼打发时间的“敲木鱼”的小插件,并且可以记录下敲击的次数,每达到一个敲击次数时就会有彩蛋,同时不想展示的时候可以缩放到一个地方,不影响正常的浏览使用。由此我们的核心功能就已经创建出来了如下:

请帮我在Chrome浏览器上创建一个敲木鱼的插件,每点击一次鼠标就会敲击一次,并且记录下敲击次数,每100次会有一个彩蛋恭喜摸鱼快乐,不使用时会缩小到屏幕右侧隐藏起来。

插件应该有以下几个特性:

1、 有一个专属的敲击页面弹窗,弹窗UI风格参考苹果UI。

2、每次敲击都有声音,并且画面顶部的敲击次数会增加。

3、页面中有一个重置按钮,点击后重新开始计算。(支持连续点击3次按钮,恢复到最高点击次数) 4、不使用时点击后会缩放吸附至屏幕右边,并且展示当前的敲击次数,实时展示数据。

5、把生成的文件都存储到“电子木鱼”文件夹。

以上就是我们需要做的事情,我们更像一个产品经理把自己需要的功能用最清晰的文字描述出来,并且简单易懂即可。现在开始我们打开Cursor软件,新建一个文件夹,然后在软件页面调出智能助手(快捷键:command+i)把上面我们的描述复制进去,点击回车即可等软件自己来产出完整的代码文件。

AI代码生成页面

就是如此简单,不需要懂任何代码逻辑,AI会自动把需要把代码文件都自动生成文件并且储存到你指定的文件夹中,此时一个简单版本的chrome插件已经完成,当然后面你需要按照它的提醒在chrome扩展程序中打开“开发者模式”,然后点击“加载已解压的扩展程序”选择代码储存的文件夹上传即可,后续就是你通过不断的前端验证功能,把错误的功能提示告诉Cursor AI即可,它会根据你反馈的提示来自动修改代码并且自动保存,你只需要点击确认即可。

至此一个零基础的小白就成功的上传了一个专属自己的chrome插件,并且可以上传到应用商店供大家下载使用。我的应用已经上线商店,大家可以搜索“电子木鱼”即可出现。同时也已经开源代码到我的Github上,供大家自行下载使用。(https://github.com/guoxungit/chrome-dianzhimuyu)

插件功能其实很简单,你点击木鱼就会有敲击声,每100次点击就有彩蛋,不需要时点击图标即会收到右侧屏幕边缘,实时展示你敲击的次数。看看大家的反馈怎么样,如果大家喜欢后面我可以新增一个排行榜功能等等

Chrome 插件应用商场页面
插件弹窗页面
插件缩起形式

       感谢大家有耐心看完此片文章,本文只是简单的告诉大家如何使用,其实就是下载软件打开提问就可以了,更多是需要你自己的创意。智能AI已经可以完全替代低代码的功能,我们真正进入到人人的是开发者的年代啦。