手把手教你用 DeepSeek + AI 编程工具开发 chrome 游览器插件

手把手教你用 DeepSeek + AI 编程工具开发 chrome 游览器插件

请添加图片描述

手把手教学，结合AI与DeepSeek，让你轻松掌握Chrome插件开发，提升编程效率，探索技术赋能的新可能！

在这里插入图片描述

一、找 DeepSeek 帮我们生成提示词

在这里插入图片描述

二、选择一个合适的 AI 编程工具

如何和安装就跳过了，找到官网地址，下载，安装即可～

在这里插入图片描述

三、使用 AI 编程工具实现插件开发

我这边用的 Trae 做示例：

我直接把提示词丢给 builder（在 cursor 中是 compser），ai 就可以自动帮我们生成项目代码了。

在这里插入图片描述

然后这里就完成 Chrome 插件编写了，然后在 Chrome 游览器中把写好的插件导入验证一下是否可以用

四、插件导入 Chrome 游览器

在Chrome浏览器中，你可以按照以下步骤来找到插件管理页面、开启开发者模式，并导入自定义插件：

1. 打开Chrome浏览器：首先确保你已经安装了Google Chrome浏览器。
2. 访问扩展程序页面：
   • 你可以直接在地址栏输入 chrome://extensions/ 并按回车键，这将直接带你到Chrome的扩展程序管理界面。
   • 或者，点击右上角的三个点（更多操作）> 更多工具 > 扩展程序。

1. 启用开发者模式：
   • 在扩展程序页面顶部，你会看到一个叫做“开发者模式”的开关。请将其打开。一旦启用了开发者模式，页面下方会出现一些额外选项，如加载已解压的扩展程序和打包扩展程序等。

1. 导入自定义插件：
   • 如果你的插件是以未压缩的形式存在的文件夹，请点击“加载已解压的扩展程序”按钮，然后选择包含该插件文件的文件夹。注意，这个文件夹里必须有manifest.json文件，它是每个Chrome插件的核心配置文件。【我们开发的插件就是这种形式】
   • 若插件是作为一个.crx文件提供的（即已经被打包好的），则通常需要先将其拖放到此页面，或者使用命令行工具等方法进行安装。但请注意，从网上下载的.crx文件可能存在安全风险，在安装前请确认来源可靠。
2. 完成：成功加载后，你应该能够在扩展程序列表中看到新添加的插件了。如果一切正常，插件图标也会出现在浏览器右上方的工具栏内。

在这里插入图片描述

五、验证插件效果

以我的个人网站（https://gorit.cn/）为例

1. 点击插件

1. 触发截图

1. 下载查看截图效果

看着感觉还可以哈！游览器显示的画面完完整整的被截图下来了。

六、获取源代码

代码地址：https://gitee.com/CodingGorit/smart-capture

七、后续优化点

基于这个版本的代码，你可以再此基础上扩展更多功能，比如 滚动截图、性能优化，指定区域截图等等，甚至等这个工具完善了，你还可以上架到 Chrome 游览器插件应用市场，以后还可以考虑做付费功能等等～