AI编程：一键下载网页里的图片或文本

1.什么是浏览器插件

大部分人都不知道浏览器插件是什么。它是能给浏览器“扩展新能力”的小工具。举一些实际的例子，有了插件你就直接能在浏览器里实现这些功能：

1.自动翻译网页内容（比如 Google 翻译插件）

2.屏蔽广告（比如 Adblock）

3.记住密码、自动填表（比如 LastPass）

4.一键截图网页、下载视频、保存网页笔记等等

2.为什么要做一个插件

插件和网页一样，包含了完整的产品逻辑：界面 + 逻辑 + 交互，所以它是理解“软件是如何工作”的最佳微缩模型。

插件的技术和网页的技术原理也是类似的，开发过程简单还无需配置复杂的环境，甚至不需要花钱。是经济又实惠的AI编程入门产品。

从功利性上看，插件就像“浏览器的超能力”，能让用户少浪费时间、少点麻烦。但很多用户有各种奇奇怪怪的需求，专业程序员开发的插件是满足不了他们的。所以用AI编程做一个属于自己的浏览器插件时机已经成熟，也很有必要。

3.开发流程

和开发网页一样简单，用AI开发一个浏览器插件的步骤也只要两步。

第一步：说出你的需求

可以参考获得AI编程正向激励最好的方法：先做一个网页这一篇文章。

不用下载专业的AI编程软件，就在任意一个对话式AI（这里以deepseek为例）里输入你的需求即可。

以“将网页里的图片和文字一键下载”这个功能为例。我的提示词如下：

写一个浏览器插件。要求一键可以将当前网页正文中的图片都下载，图片以“图片_序号”命名，同时也能下载网页中的正文文本，原文中有图片的位置就用【图片_序号】代替。用户可以自定义保存路径下的文件夹的名字。整个插件要求用户友好参考专业插件的UI。

将提示词给到deepseek后，deepseek最终给出了三个文件。我其实是莫名奇妙的。我需要的是一个插件，但它给了我三个代码文件，下面该怎么做才能实现我想要的功能？很多小白应该都有这个疑问。这个时候，直接继续问Deepseek怎么操作就可以了。

根据Deepseek的提示操作一步步进行就可以完成插件的设计和调试。这里不详细罗列。

但从这个例子就可以看到，当代码文件比较多，尤其他们之间还有某些层级结构的时候，单纯靠通用型的AI（chatgpt、豆包、deepseek、通义等）已经不能够高效进行编程操作了。

此时我们就需要使用专业的AI编程工具，它们能够帮我们完成这些繁杂枯燥的事情，尽可能让用户当甩手掌柜，让编程更高效。对于普通人，我还是比较推荐Trae/CodeBuddy等AI编程软件。这些软件都是傻瓜式安装，而且都配备了适合小白使用的模式。

以CodeBuddy为例，Craft模式就是适用于小白的甩手掌柜编程模式。输入一个需求，基本只需要负责点击确认就行了。

可以看到，同样的提示词下，专业的编程工具直接就帮我把各类的文件层级整理好，并且将文件非常清晰的展示在软件的左侧。甚至还生成了一个用户使用指南，告诉你该如何使用这些文件。

第二步：调试和使用

当AI生成了一堆代码文件后，我们该如何使用它？

首先把这个插件安装起来。流程如下：

1.打开Chrome浏览器。访问扩展管理页面：地址栏输入：chrome://extensions/

（或菜单 → 更多工具 → 扩展程序）

2.启用开发者模式：点击右上角的"开发者模式"开关

3.加载插件：点击"加载已解压的扩展程序"，选择包含插件代码文件的文件夹（就是存着所有代码的那个文件夹）

完成以上操作后就可以在“所有扩展程序”这一栏里看到该插件。

下面就可以调试和使用了。

打开任意一个网页（为了测试功能，最好打开一个包含有图片信息的网页）。点击Chrom浏览器右上角的方框按钮

随即就会弹出我们的插件图标，点击该插件。

在弹出的插件的交互界面上，设置好文件夹的名称，然后点击扫描，最后点击“开始下载”即可。

如果功能未能成功实现，将问题实时反馈给编程软件。同时，在扩展管理页面上点击“详情”，还可看到插件运行过程中报的错误。将这些错误信息同步复制发给编程软件，更有利于bug的解决。

每次AI修改过代码后，需要点击圆圈箭头，这样做是为了重新加载插件源代码。此时就可以重新测试插件功能是否正常了。

效果展示

先按照“调试和使用”这一章节将插件正确安装。

在弹出的界面上，点击‘扫描内容’按钮，最终就会显示出网页中的图片和文字数量，点击‘开始下载’即可在目标文件夹内看到所下载的内容。

当然，市面上的网页类型很多，所需要下载的内容形式也有很多，我的这个插件可能并不适用所有网站。但任何罕见的需求都值得用AI编程去尝试实现一下，这才是普通人用AI编程的意义。