原创 不一样的少年_ 2025-10-21 08:30 重庆
前端还原页面你肯定干过吧？像仿 xxx 首页那种。收素材时最烦的就是一张张存图，慢不说还老漏。跟我用 10 分钟做个 chrome 小插件，点一下，整页图片全下到本地
点击关注公众号，“技术干货” 及时达！
❝前端还原页面你肯定干过吧？像仿 xxx 首页那种。收素材时最烦的就是一张张存图，慢不说还老漏。跟我用 10 分钟做个 chrome 小插件，点一下，整页图片全下到本地❞先看效果：在素材网站一键批量保存所有图片废话不多说，直接上手！项目结构
chrome.contextMenus（右键菜单）「创建文件夹」「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 后台脚本负责创建并响应右键菜单等事件来下载页面图片「API 文档速查」chrome.runtime（扩展生命周期 / 事件）// 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，避免浏览器限制});});}});// 在页面中执行的函数，用于获取所有图片URLfunction getImagesFromPage() {const images = Array.from(document.images).map((img) => img.src).filter((src) => src.startsWith('http'));return images;}
