🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
先看效果：在素材網站一鍵批量保存所有圖片
廢話不多説，直接上手！
項目結構
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"
}
}
關鍵點解讀：
-
創建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日誌輸出；
- 在代碼中設置斷點調試以排查問題。
