【前端效率工具】：告别右键另存，不到 50 行代码一键批量下载网页图片
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<p> </p>
<h3 data-id="heading-0">先看效果：在素材网站一键批量保存所有图片</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202510/2149129-20251027170110713-1397808799.png"></p>
<h3 data-id="heading-1">废话不多说，直接上手！</h3>
<h3 data-id="heading-2">项目结构</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">image-downloader-extension
├── manifest.json # 扩展的"身份证"
└── background.js # 插件后台脚本</pre>
</div>
<ol>
<li>
<h4 data-id="heading-3">创建文件夹 <code>image-downloader-extension</code></h4>
</li>
<li>
<h4 data-id="heading-4">创建manifest.json文件</h4>
</li>
</ol>
<p>这个文件是插件的身份证，告诉浏览器你的插件是谁、能干啥。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">{
"manifest_version": 3,
"name": "我的下载插件",
"version": "1.0.0",
"permissions": ["contextMenus", "downloads", "scripting"],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
}
}</pre>
</div>
<h3 data-id="heading-5">关键点解读：</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202510/2149129-20251027170204102-322108553.png"></p>
<p> </p>
<ol start="3">
<li>
<h4 data-id="heading-6">创建background.js文件</h4>
</li>
</ol>
<p>background.js后台脚本负责创建并响应右键菜单等事件来下载页面图片</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 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?.result || results.result.length === 0) {
console.log('未找到图片');
return;
}
const images = results.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;
}</pre>
</div>
<p>API 文档速查</p>
<ul>
<li>
<p>chrome.runtime（扩展生命周期/事件）</p>
</li>
<li>
<p>chrome.contextMenus（右键菜单）</p>
</li>
<li>
<p>chrome.scripting（脚本执行）</p>
</li>
<li>
<p>chrome.downloads（下载管理）</p>
</li>
<li>
<p>权限声明（MV3）</p>
</li>
</ul>
<h4 data-id="heading-7">4. 加载插件到浏览器</h4>
<p>接下来我们将插件加载到浏览器中</p>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202510/2149129-20251027170355160-1529740425.webp"></p>
<h5 data-id="heading-8">步骤：</h5>
<h5 data-id="heading-9">4.1 打开扩展管理页面 在 Chrome 地址栏输入 <code>chrome://extensions/</code> 并回车</h5>
<h5 data-id="heading-10">4.2 开启开发者模式</h5>
<h5 data-id="heading-11">4.3 点击 “加载未打包的扩展程序”</h5>
<p><code>选择刚刚创建的image-downloader-extension文件夹进行加载</code></p>
<h5 data-id="heading-12">4.4 插件加载成功</h5>
<p>你会看到插件出现在列表中</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202510/2149129-20251027170420026-1110220514.png"></p>
<p>至此，我们的下载插件就搞完了，是不是非常容易？</p>
<h3 data-id="heading-13">测试（验证功能）</h3>
<p>接下来我们随便打开一个网站，点击鼠标右键，就会发现右键菜单多了一个选项</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202510/2149129-20251027170430350-1011014228.png"></p>
<p>点击“我要下载所有图片” 即可实现我们的需求了</p>
<h3 data-id="heading-14">调试（查看 background.js日志与断点）</h3>
<p>如下图：点击插件的 Service Worker 入口，会弹出调试面板。</p>
<p>在该面板中你可以：</p>
<ul>
<li>实时查看 background.js 的 console日志输出；</li>
<li>在代码中设置断点调试以排查问题。</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202510/2149129-20251027170445582-2052293769.webp"></p>
<p> </p>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19169617
頁:
[1]