🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付
【前端效率工具】：告別右鍵另存，不到 50 行碼一鍵批次下載網頁圖片
前端還原頁面你肯定幹過吧？像仿 xxx 首頁那種。收素材時最煩的就是一張張存圖，慢不說還老漏。
跟我用 10 分鐘做個 Chrome 小插件，點一下，整頁圖片全下到本地。
先看效果：在素材網站一鍵批量保存所有圖片
廢話不多說，直接上手！
專案結構
image-downloader-extension
├── manifest.json # 擴展的 "身份證"
└── background.js # 插件後台腳本- 創建資料夾
image-downloader-extension - 創建 manifest.json 檔案
這個檔案是插件的 身份證，告訴瀏覽器你的插件是誰、能幹啥。
{
"manifest_version": 3,
"name": "我的下載插件",
"version": "1.0.0",
"permissions": ["contextMenus", "downloads", "scripting"],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
}
}關鍵點解讀：
| 字段 | 说明 |
|---|---|
| manifest_version: 3 | 使用最新的 Manifest V3 擴展規範 |
| name | 插件名稱 |
| version | 插件版本號 |
| permissions | 申請權限（contextMenus 創建右鍵菜單，downloads 下載） |
- 創建 background.js 檔案
background.js 後台腳本負責創建並響應右鍵菜單等事件來下載頁面圖片。
// 1. 插件安裝時創建右鍵菜單
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'downloadAllImages', // 菜單唯一標識
title: '我要下載所有圖片', // 菜單顯示的文字
contexts: ['page'], // 在頁面任意位置右鍵時顯示
});
});
// 2. 監聽右鍵菜單點擊事件
chrome.contextMenus.onClicked((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. 加載插件到瀏覽器
接下來我們將插件加載到瀏覽器中。
步驟：
- 打開擴展管理頁面 在 Chrome 位址欄輸入
chrome://extensions/並回車 - 開啟開發者模式
- 點擊 “加載未打包的擴展程序”
選擇剛剛創建的 image-downloader-extension 資料夾進行加載。
- 插件加載成功
你會看到插件出現在列表中。
至此，我們的下載插件就搞完了，是不是非常容易？
測試
接下來我們隨便打開一個網站，點擊滑鼠右鍵，就會發現右鍵菜單多了一個選項。
點擊 “我要下載所有圖片” 即可實現我們的需求了。
總結
這一次帶你用一個小巧的 Chrome 插件，一鍵把當前網頁的所有圖片下載下來，希望對你有所幫助。
如果覺得對您有幫助，歡迎點贊 👍 收藏 ⭐ 关注 🔔 支持一下！
往期實戰推薦：
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
🏆 本月排行榜
評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付