【前端效率工具】：告别右键另存，不到 50 行代码一键批量下载网页图片

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

 

先看效果：在素材网站一键批量保存所有图片

废话不多说，直接上手！

项目结构

image-downloader-extension
├── manifest.json      # 扩展的"身份证"
└── background.js      # 插件后台脚本

1. 创建文件夹 image-downloader-extension

2. 创建manifest.json文件

这个文件是插件的身份证，告诉浏览器你的插件是谁、能干啥。

{"manifest_version": 3,"name": "我的下载插件","version": "1.0.0","permissions": ["contextMenus", "downloads", "scripting"],"host_permissions": ["<all_urls>"],"background": {"service_worker": "background.js"}
}

关键点解读：

 

3. 创建background.js文件

background.js后台脚本负责创建并响应右键菜单等事件来下载页面图片

// 1. 插件安装时创建右键菜单
chrome.runtime.onInstalled.addListener(() => {chrome.contextMenus.create({id: 'downloadAllImages', // 菜单唯一标识title: '我要下载所有图片', // 菜单显示的文字contexts: ['page'], // 在页面任意位置右键时显示});
});// 2. 监听右键菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {if (info.menuItemId === 'downloadAllImages') {// 使用 scripting API 在当前页面执行脚本获取所有图片chrome.scripting.executeScript({target: { tabId: tab.id },func: getImagesFromPage,},(results) => {// 获取执行结果if (!results || !results[0]?.result || results[0].result.length === 0) {console.log('未找到图片');return;}const images = results[0].result;// 批量下载图片images.forEach((url, index) => {setTimeout(() => {chrome.downloads.download({url: url,filename: `images/image_${index + 1}.jpg`, // 保存路径saveAs: false, // 不弹出保存对话框});}, index * 500); // 每张图片间隔 500ms，避免浏览器限制});});}
});// 在页面中执行的函数，用于获取所有图片URL
function getImagesFromPage() {const images = Array.from(document.images).map((img) => img.src).filter((src) => src.startsWith('http'));return images;
}

API 文档速查

• chrome.runtime（扩展生命周期/事件）

• chrome.contextMenus（右键菜单）

• chrome.scripting（脚本执行）

• chrome.downloads（下载管理）

• 权限声明（MV3）

4. 加载插件到浏览器

接下来我们将插件加载到浏览器中

 

步骤：

4.1 打开扩展管理页面 在 Chrome 地址栏输入 chrome://extensions/ 并回车

4.2 开启开发者模式

4.3 点击 “加载未打包的扩展程序”

选择刚刚创建的image-downloader-extension文件夹进行加载

4.4 插件加载成功

你会看到插件出现在列表中

至此，我们的下载插件就搞完了，是不是非常容易？

测试（验证功能）

接下来我们随便打开一个网站，点击鼠标右键，就会发现右键菜单多了一个选项

点击“我要下载所有图片” 即可实现我们的需求了

调试（查看 background.js日志与断点）

如下图：点击插件的 Service Worker 入口，会弹出调试面板。

在该面板中你可以：

• 实时查看 background.js 的 console日志输出；
• 在代码中设置断点调试以排查问题。

 

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。