【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片

前端还原页面你肯定干过吧?像仿 xxx 首页那种。收素材时最烦的就是一张张存图,慢不说还老漏。

跟我用 10 分钟做个小插件,点一下,整页图片全下到本地

先看效果:在素材网站一键批量保存所有图片

废话不多说,直接上手!

项目结构

arduino 复制代码
image-downloader-extension
├── manifest.json      # 扩展的"身份证"
└── background.js      # 插件后台脚本

创建文件夹 image-downloader-extension

创建manifest.json文件

这个文件是插件的身份证,告诉浏览器你的插件是谁、能干啥。

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文件

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 文档速查

4. 加载插件到浏览器

接下来我们将插件加载到浏览器中

步骤:
4.1 打开扩展管理页面 在 Chrome 地址栏输入 chrome://extensions/ 并回车
4.2 开启开发者模式
4.3 点击 "加载未打包的扩展程序"

选择刚刚创建的image-downloader-extension文件夹进行加载

4.4 插件加载成功

你会看到插件出现在列表中

至此,我们的下载插件就搞完了,是不是非常容易?

测试

接下来我们随便打开一个网站,点击鼠标右键,就会发现右键菜单多了一个选项

点击"我要下载所有图片" 即可实现我们的需求了

总结

这一次带你用一个小巧的 Chrome 插件,一键把当前网页的所有图片下载下来,希望对你有所帮助

相关推荐
不如摸鱼去6 分钟前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
im_AMBER17 分钟前
JavaScript 03 【基础语法学习】
javascript·笔记·学习
IT_陈寒1 小时前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端1 小时前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家1 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞1 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手1 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞1 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor2 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i2 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员