推荐语
快速打造个人专属的 DeepSeek 助手,提升你的浏览器效率。
核心内容:
1. 浏览器扩展在日常使用中的重要性和便利性
2. 使用 Cursor AI 编程助手创建个人专属浏览器扩展
3. 通过 Prompt 和 AI 模型实现 Chrome 扩展的快速开发
杨芳贤
53A创始人/腾讯云(TVP)最具价值专家
日常使用 DeepSeek/ChatGPT 等 AI 助手时,除了常规的问答和文档解析需求,经常还会有总结网页、针对网页中内容问答等需求,比如快速读取新闻、博客等,这时 Chrome 的浏览器扩展是一个很好的选择,它能直接获取网页的内容,还能和浏览器在一个界面里很直观的互动,很适合大家日常办公和生活中使用。当然可以!AI 编程助手的发展,让 AI 应用开发不再专属于程序员,每个人都能开发专属自己的 AI 应用!今天咱们用到的 AI 编程助手是 Cursor(https://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 让它修改)1. 点击 Chrome 浏览器右上角的 “扩展程序”
2. 上面的文件目录,点击“加载已解压的扩展程序”,选择对应文件夹
3. 打开对应网站后,点击扩展,选择下方这个扩展程序4. 点击上方按钮对页面内容进行总结,总结后,可以在下方输入想追问的内容后发送追问5. 这样我们的Chrome扩展开发和安装就都完成了。6. 有了第一次成功的尝试,再继续探索 AI 编程助手更多可能性吧!做自己的网页、或者看到好看的网站后截图给 Cursor 说不定有惊喜!复制一个一模一样的网站。