【AI+编程】0基础用cursor写一款浏览器页面总结插件

现在各种AI大模型都开发了浏览器插件, 现在我们有了AI辅助, 0基础小白也能写一款浏览器页面AI总结插件。 这里我AI编程以cursor 为例, 模型以GLM-4-Flash 举例

先看实现效果

alt

点击打开

alt

我们怎么实现这个功能, 差不多5分钟左右时间搞定

如果没用过cursor, 可以到官网下载 (https://www.cursor.com/), 下载系统对应版本。

安装好cursor编辑器, commond + L 快捷键打开对话窗口。

Q: 给我生成google浏览器插件, 能够总结当前页面。插件悬浮页面左下角,使用glm-4-flash 模型

A:

alt

这时候你可能会想, 这个目录结构难道需要手敲, no, no, 继续问。

Q: 帮我生成生成上述文件的命令

alt

生成的bash比较长, 我习惯于 新建一个文件比如 test.sh 脚本,拷贝进去。

touch summary.sh

vi summary.sh 编辑把文件拷贝进去

chmod 775 summary.sh

执行完毕, 项目工程就生成好了

alt

在使用扩展之前,需要在 content.js 中替换 YOUR_GLM_API_ENDPOINT 和 YOUR_API_KEY。

比如GLM-4-Flash ,

API_ENDPOINT = 'https://open.bigmodel.cn/api/paas/v4/chat/completions';

API_KEY直接上智谱开放平台注册就有:

https://www.bigmodel.cn/invite?icode=aSqC8mn3g0IOIO67iRoqNJmwcr074zMJTpgMb8zZZvg%3D

在浏览器中加载已解压的扩展程序加载 就可以了

alt

是不是很简单, 整个过程不超过5分钟。一款简单的 浏览器AI总结插件就有了。

需要注意的是, 这个api_key 放在浏览器端,本身不安全, 你本地玩玩可以。 如果你想开发 浏览器插件 给其他人使用, 可以通过你的后端服务接口, 服务端中转 AI大模型返回的内容。

你也可以把GLM-4-Flash 换成 chatGPT 或 Claude 等其他模型。思路本质上一样。

本文由 mdnice 多平台发布

### 关于 VSCode 插件 Cursor 的功能与解决方案 #### Cursor 插件的功能特性 Cursor一款基于 Visual Studio Code (VSCode) 开发环境的增强工具,主要特点是集成了人工智能辅助编程的能力[^1]。这不仅提升了代码编效率,还改善了用户体验。 对于开发者而言,在 VSCode 中安装并启用 Cursor 后,可以享受到更流畅的人机交互过程以及更为智能化的编码建议和服务。相较于传统的通过插件形式集成 AI 辅助功能的方式(比如 GitHub Copilot),Cursor 对原生编辑器进行了深层次定制化调整,使其能够更好地适应用户的实际需求和工作流程。 #### 使用教程 为了充分利用 Cursor 提供的各项优势,以下是几个关键的操作指南: - **启动智能提示**:在编代码过程中,只需正常输入即可触发自动补全机制;同时支持自然语言描述来获取特定函数或类别的实现方式。 - **优化项目结构管理**:利用改进后的资源浏览器视图快速定位所需文件,并可通过简单的拖拽完成重构动作而不必担心底层逻辑冲突。 - **简化调试环节**:借助强化版断点设置选项轻松追踪程序执行路径,配合即时反馈系统迅速排查错误根源。 ```csharp // 创建 Godot 游戏中的 C# 脚本实例 public class MyNode : Node { public override void _Ready() { GD.Print("This is a new script created with Cursor."); } } ``` 上述代码展示了如何在一个Godot游戏项目里创建一个新的C#脚本,这是通过右键点击场景树中的某个节点并选择“Attach Script”后指定C#作为目标语言所生成的基础模板[^2]。 #### 常见问题及解决方法 有时可能会遇到由于其他进程正在访问相同目录而导致重命名失败的情况。这类现象通常是因为存在未关闭的任务占用了相应位置下的资源所致[^3]。针对此情况可采取如下措施加以应对: - 确认所有关联的应用均已退出; - 尝试重启计算机以清除残留活动; - 若条件允许的话考虑更换至独立的工作空间开展后续作业。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值