【前端效率工具】:告別右鍵另存,不到 50 行代碼一鍵批量下載網(wǎng)頁(yè)圖片
????? 寫在開(kāi)頭
點(diǎn)贊 + 收藏 === 學(xué)會(huì)??????
先看效果:在素材網(wǎng)站一鍵批量保存所有圖片

廢話不多說(shuō),直接上手!
項(xiàng)目結(jié)構(gòu)
image-downloader-extension ├── manifest.json # 擴(kuò)展的"身份證" └── background.js # 插件后臺(tái)腳本
-
創(chuàng)建文件夾
image-downloader-extension -
創(chuàng)建manifest.json文件
這個(gè)文件是插件的身份證,告訴瀏覽器你的插件是誰(shuí)、能干啥。
{
"manifest_version": 3,
"name": "我的下載插件",
"version": "1.0.0",
"permissions": ["contextMenus", "downloads", "scripting"],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
}
}
關(guān)鍵點(diǎn)解讀:

-
創(chuàng)建background.js文件
background.js后臺(tái)腳本負(fù)責(zé)創(chuàng)建并響應(yīng)右鍵菜單等事件來(lái)下載頁(yè)面圖片
// 1. 插件安裝時(shí)創(chuàng)建右鍵菜單
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'downloadAllImages', // 菜單唯一標(biāo)識(shí)
title: '我要下載所有圖片', // 菜單顯示的文字
contexts: ['page'], // 在頁(yè)面任意位置右鍵時(shí)顯示
});
});
// 2. 監(jiān)聽(tīng)右鍵菜單點(diǎn)擊事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'downloadAllImages') {
// 使用 scripting API 在當(dāng)前頁(yè)面執(zhí)行腳本獲取所有圖片
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
func: getImagesFromPage,
},
(results) => {
// 獲取執(zhí)行結(jié)果
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, // 不彈出保存對(duì)話框
});
}, index * 500); // 每張圖片間隔 500ms,避免瀏覽器限制
});
}
);
}
});
// 在頁(yè)面中執(zhí)行的函數(shù),用于獲取所有圖片URL
function getImagesFromPage() {
const images = Array.from(document.images)
.map((img) => img.src)
.filter((src) => src.startsWith('http'));
return images;
}
API 文檔速查
4. 加載插件到瀏覽器
接下來(lái)我們將插件加載到瀏覽器中

步驟:
4.1 打開(kāi)擴(kuò)展管理頁(yè)面 在 Chrome 地址欄輸入 chrome://extensions/ 并回車
4.2 開(kāi)啟開(kāi)發(fā)者模式
4.3 點(diǎn)擊 “加載未打包的擴(kuò)展程序”
選擇剛剛創(chuàng)建的image-downloader-extension文件夾進(jìn)行加載
4.4 插件加載成功
你會(huì)看到插件出現(xiàn)在列表中

至此,我們的下載插件就搞完了,是不是非常容易?
測(cè)試(驗(yàn)證功能)
接下來(lái)我們隨便打開(kāi)一個(gè)網(wǎng)站,點(diǎn)擊鼠標(biāo)右鍵,就會(huì)發(fā)現(xiàn)右鍵菜單多了一個(gè)選項(xiàng)

點(diǎn)擊“我要下載所有圖片” 即可實(shí)現(xiàn)我們的需求了
調(diào)試(查看 background.js日志與斷點(diǎn))
如下圖:點(diǎn)擊插件的 Service Worker 入口,會(huì)彈出調(diào)試面板。
在該面板中你可以:
- 實(shí)時(shí)查看 background.js 的 console日志輸出;
- 在代碼中設(shè)置斷點(diǎn)調(diào)試以排查問(wèn)題。

如果對(duì)您有所幫助,歡迎您點(diǎn)個(gè)關(guān)注,我會(huì)定時(shí)更新技術(shù)文檔,大家一起討論學(xué)習(xí),一起進(jìn)步。


浙公網(wǎng)安備 33010602011771號(hào)