打造自定义专属 DeepSeek 助手，只需一杯咖啡的时间：Cursor 和 Chrome 扩展开发实践 - 文章 - 开发者社区

picture.image

为什么大家需要浏览器扩展？

日常使用 DeepSeek/ChatGPT 等 AI 助手时，除了常规的问答和文档解析需求，经常还会有总结网页、针对网页中内容问答等需求，比如快速读取新闻、博客等，这时 Chrome 的浏览器扩展是一个很好的选择，它能直接获取网页的内容，还能和浏览器在一个界面里很直观的互动，很适合大家日常办公和生活中使用。

我可以做一个自己专属的浏览器扩展吗？

当然可以！AI 编程助手的发展，让 AI 应用开发不再专属于程序员，每个人都能开发专属自己的 AI 应用！

今天咱们用到的 AI 编程助手是 Cursor（https://cursor.com/）

picture.image

下载安装完成后，先打开一个文件夹，作为后面程序文件默认可以存放的目录。打开后按 cmd/win + L 键打开右侧的 AI 助手窗口，有 CHAT 和 COMPOSER 两种模式，其中 COMPOSER 具备 Agent 能力，在上下文选择等方面有自主判断，对于初学者来说，可以先从 CHAT 模式开始，它和 AI 助手的使用方式很接近。
对于 Chrome 扩展来说，创建的 Prompt 也很简单，我提供一个最简单的示例，大家可以根据自己的需要定义“请为我创建一个 Chrome 扩展，它固定在浏览器右侧，具备总结网页内容和追问的能力。”
输入 Prompt，可以选择自己想要的 LLM，可以选择 Deepseek-r1，或 GPT、Claude 等模型，实现这个简单的扩展都没问题。（备注：这里甚至可以免费用 DeepSeek R1 等模型做非开发类的问答）选择后让 AI 助手开始工作，对 Chrome 扩展的场景，会生成这样的文件结构

  
your-extension-folder/  
├── manifest.json  
├── popup.html  
└── popup.js

每个文件都生成了对应的内容，创建对应文件拷贝内容就可以了（如果大家对 Cursor 熟悉了，使用 COMPOSER 模式可以自行创建文件目录，连手动拷贝内容都可以省略）
默认生成的程序可以直接运行吗？不行，因为 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/

申请到 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();

这样我们的最简单的浏览器扩展就搞定了，把上面几个文件拷贝到同一个目录下备用（备注：如果下面的安装过程中出现问题，把对应问题贴给 Cursor 让它修改）

接下来就到了 Chrome 扩展安装步骤

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

picture.image

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

picture.image

打开对应网站后，点击扩展，选择下方这个扩展程序

picture.image

点击上方按钮对页面内容进行总结，总结后，可以在下方输入想追问的内容后发送追问

picture.image

这样我们的Chrome扩展开发和安装就都完成了。
有了第一次成功的尝试，再继续探索 AI 编程助手更多可能性吧！做自己的网页、或者看到好看的网站后截图给 Cursor 说不定有惊喜！复制一个一模一样的网站。

朋友们如果在过程中有任何问题，欢迎留言给我。