AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


打造自定义专属 DeepSeek 助手,只需一杯咖啡的时间:Cursor 和 Chrome 扩展开发实践

发布日期:2025-02-09 05:33:04 浏览次数: 2077 来源:AI 启蒙小伙伴
推荐语

快速打造个人专属的 DeepSeek 助手,提升你的浏览器效率。

核心内容:
1. 浏览器扩展在日常使用中的重要性和便利性
2. 使用 Cursor AI 编程助手创建个人专属浏览器扩展
3. 通过 Prompt 和 AI 模型实现 Chrome 扩展的快速开发

杨芳贤
53A创始人/腾讯云(TVP)最具价值专家
为什么大家需要浏览器扩展?
日常使用 DeepSeek/ChatGPT 等 AI 助手时,除了常规的问答和文档解析需求,经常还会有总结网页、针对网页中内容问答等需求,比如快速读取新闻、博客等,这时 Chrome 的浏览器扩展是一个很好的选择,它能直接获取网页的内容,还能和浏览器在一个界面里很直观的互动,很适合大家日常办公和生活中使用。
我可以做一个自己专属的浏览器扩展吗?
当然可以!AI 编程助手的发展,让 AI 应用开发不再专属于程序员,每个人都能开发专属自己的 AI 应用!
今天咱们用到的 AI 编程助手是 Cursorhttps://cursor.com/
1. 下载安装完成后,先打开一个文件夹,作为后面程序文件默认可以存放的目录。打开后按 cmd/win + L 键打开右侧的 AI 助手窗口,有 CHAT 和 COMPOSER 两种模式,其中 COMPOSER 具备 Agent 能力,在上下文选择等方面有自主判断,对于初学者来说,可以先从 CHAT 模式开始,它和 AI 助手的使用方式很接近。
2. 对于 Chrome 扩展来说,创建的 Prompt 也很简单,我提供一个最简单的示例,大家可以根据自己的需要定义“请为我创建一个 Chrome 扩展,它固定在浏览器右侧,具备总结网页内容和追问的能力。”
3. 输入 Prompt,可以选择自己想要的 LLM,可以选择 Deepseek-r1,或 GPT、Claude 等模型,实现这个简单的扩展都没问题。(备注:这里甚至可以免费用 DeepSeek R1 等模型做非开发类的问答)选择后让 AI 助手开始工作,对 Chrome 扩展的场景,会生成这样的文件结构
your-extension-folder/├── manifest.json├── popup.html└── popup.js
4. 每个文件都生成了对应的内容,创建对应文件拷贝内容就可以了(如果大家对 Cursor 熟悉了,使用 COMPOSER 模式可以自行创建文件目录,连手动拷贝内容都可以省略)
5. 默认生成的程序可以直接运行吗?不行,因为 AI 需要模型对应的 API Key 才能使用,对国内用户来说,申请国内 AI 模型更容易,比如 DeepSeek、Kimi、Doubao、GLM 等,大家可以到对应官网的开发者平台申请,目前这几个都有免费的 API Key 可以用。
  - DeepSeek-R1: 开工了,DeepSeek 还没恢复!给大家推荐几个可以用 DeepSeek 的薅羊毛渠道 ??
  - Kimi: https://platform.moonshot.cn/
  - Doubao: https://www.volcengine.com/product/doubao/
  - GLM: https://bigmodel.cn/
6. 申请到 API Key 后,不知道怎么编写调用代码怎么办,没关系,继续让 Cursor 完成就好,只需要把对应开发者平台的调用示例代码贴给 Cursor,让它替换刚刚生成的 AI 模型调用代码,再把 API Key 对应替换进去就可以了,下面是 DeepSeek R1 的 Node.JS 接入示例,可以输入 Cursor,告诉它用 Javascript 语言在刚刚的文件中修改调整。
// Please install OpenAI SDK first: `npm install openai`
import OpenAI from "openai";
const openai = new OpenAI({        baseURL: 'https://api.deepseek.com',        apiKey: '<DeepSeek API Key>'});
async function main() {  const completion = await openai.chat.completions.create({    messages: [{ role: "system", content: "You are a helpful assistant." }],    model: "deepseek-chat",  });
  console.log(completion.choices[0].message.content);}
main();
7. 这样我们的最简单的浏览器扩展就搞定了,把上面几个文件拷贝到同一个目录下备用(备注:如果下面的安装过程中出现问题,把对应问题贴给 Cursor 让它修改)
接下来就到了 Chrome 扩展安装步骤

1. 点击 Chrome 浏览器右上角的 “扩展程序”

2. 上面的文件目录,点击“加载已解压的扩展程序”,选择对应文件夹

3. 打开对应网站后,点击扩展,选择下方这个扩展程序
4. 点击上方按钮对页面内容进行总结,总结后,可以在下方输入想追问的内容后发送追问
5. 这样我们的Chrome扩展开发和安装就都完成了。
6. 有了第一次成功的尝试,再继续探索 AI 编程助手更多可能性吧!做自己的网页、或者看到好看的网站后截图给 Cursor 说不定有惊喜!复制一个一模一样的网站。

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

和创始人交个朋友

回到顶部

 

加载中...

扫码咨询