源于实际需求，我把这个开源 Chrome 图片下载插件改得「更好用」了

最近项目服务的公司有个小需求：设计部人员需要在海外电商独立站采集一些图片。

一开始本想用 RPA 工具采集独立站全站图片，但实际业务场景中，设计部人员并非图片越多越好，他们需要挑选自己喜欢的款式下载。此时批量下载不仅收益有限，反而增加了筛选难度。

直接在独立站网站上选择想要的图片，路径更短、更直接、更符合需求。

所以放弃了裁剪图片的念头，转而用浏览器插件帮助他们完成批量图片裁剪。

当然，现成的浏览器图片插件有很多，但综合效果并不理想。这类插件更适合全站图片下载，而用于单个电商商品详情页时，因采集深度过深，反而会抓取大量无关图片——包括二级页面或隐藏图片。原本一个详情页只需采集十张以内图片，但通用插件会加载近两百张，导致加载卡顿，需人工等待，体验极差。

就算启用内置筛选条件，通常也只是按图片尺寸（长×宽像素）过滤掉低于阈值的图片，这种筛选过于粗略，无法满足我精准选择特定尺寸的需求。

后来冒出一个念头：既然AI编程这么好用，不如直接找找这些图片插件有没有开源项目，拿过来稍作修改，满足自己的特定需求就OK了，比起从零开始写一个工具，直接用开源项目来开干，简单了许多。

最后，简单搜索一下，选择了这一个的开源项目进行改造。PactInteractive/image-downloader

最后结果还不错，经过几轮AI对话，基本能满足需求，做出一个符合自己场景的定制化浏览器插件。

公众号文章插图

它的修改优化点：

新增了精确尺寸选项，支持自定义高宽尺寸。
增加了一个启动补丁，原程序需等待网页加载完成才开始采集，速度太慢。我已改造为最晚两秒即启动采集——毕竟网页框架已加载完毕，可直接采集，无需等待所有元素加载。
再增加一个最终尺寸选择，用于在我已定义多个精确尺寸时，对搜索结果进行二次筛选。
其实底层我做了一个优化：只采集可视区域内的图片，不在当前屏幕中的图片一律不采集，目的是减少无关图片的采集量，尽管实际效果可能有限，但初衷是为了控制采集数量。

更多细节，可以参考下AI帮我总结的以下内容

改造点 1：别等页面完全加载了，3秒后就给我开始扫图

之前的问题

打开很多图文网站，经常会看到浏览器标签页还在转圈（加载中），这时候插件完全不动，非要死等页面加载完成才会开始抓图。

经常要手动等半天，或者按 F12 看，感觉很「死」。

我的解决思路

既然等完全加载太慢，我能不能让插件更「主动」一点？

方案A：直接立即就扫（但试过几次发现扫不全，很多图还没渲染出来）
方案B：3秒后强制开始（页面框架基本有了，主要内容大概率已经出来）
方案C：立即扫 + 每隔几秒补扫一次，持续一段时间（兜底策略，既想要快，又想要全）

改造的功能

我把这三种方案都做进了插件设置里，用户自己选：

**Delay（默认）**：等3秒后开始（稳定，扫得全）
Progressive：立即扫一次，然后每隔2秒补扫一次，持续10秒
（之前的「立即扫」模式因为扫不全，被我默认下线了，但代码里留着，懂的人可以自己改回来）

改造点 2：精确尺寸筛选，支持一次输入多个值

之前的问题

原来的「精确宽度」「精确高度」只能输入一个数字，比如我要同时抓宽度为300、640、1080的图片，只能反复改三次，很麻烦。

我的解决思路

改成文本框，用逗号隔开，比如直接输入 300, 640, 1080，自动解析成多个值，命中任一即可。

另外，我还加了一个很实用的功能：「Width * Height」组合筛选，比如直接输入 300*250, 640*960，一次性按整组宽高来过滤，非常适合抓「淘宝主图」「小红书封面图」这种固定尺寸的场景。

细节上也做了一些鲁棒性处理：

支持中文逗号，和英文逗号 ,
自动去空格
强制转整数
过滤非法输入
自动去重

改造点 3：界面太「重」了，我只想要一个勾选框

之前的问题

原来的每张图片卡片上，右上角有一排悬浮按钮（剪切/去背景、新标签页打开、下载），底部还可以展开看图片URL、复制URL，功能确实全，但我日常用不上。

我主要就做一件事：快速勾选我要的图，然后批量下载。

那些额外的按钮反而占地方、干扰视线，甚至有时候不小心会误触。

我的解决思路

直接去掉所有干扰元素：

隐藏右上角那排按钮
隐藏底部URL输入框和复制按钮
只保留左上角的勾选框，以及底部的「宽×高」和「文件大小」

现在界面非常清爽，扫完一眼就能看尺寸、快速勾选，专注于选图，心里也踏实。

改造点 4：工具栏固定住，滚图的时候别跟着跑

之前的问题

原来的工具栏（全选、列数、切换 matching/filtered out）是放在顶部的，但一滚动图片列表，工具栏就跟着往上走，经常滚到一半想全选，还得往上滚回去，很「断」。

我的解决思路

用 CSS 固定（吸顶）在上方，根据 Header 高度动态调整 top 位置，这样不管你往下滚多少张图，工具栏始终在最上面，随手就能点。

改造点 5：在匹配结果里，再加一层「真实尺寸分类」筛选

之前的问题

虽然我在设置里写了精确尺寸筛选，但有时候会遇到「命中规则的图里，真实尺寸还有好几种」，我想在已经选出来的 matching 图里再「挑挑拣拣」，只保留某一两种真实尺寸。

我的解决思路

在工具栏下面加了一行：

Actual sizes（或者中文）
全部尺寸（一键恢复全选）
所有出现过的真实尺寸（比如 967×1450、1500×2250），做成带勾选的按钮形式

默认全选，你可以点具体尺寸按钮来「只保留」或「取消」这一尺寸，非常直观。

为了这个功能，我还做了不少底层优化：

尺寸来源做了双兜底：优先读隐藏缓存区，拿不到再读卡片自己的统计缓存
加了响应式版本号信号，保证卡片上的尺寸一出来，分类按钮就立刻更新
把渲染方式也改得更直接，避免组件包装导致的显示延迟

（顺便吐槽：原来工具栏按钮太高了，因为全局 button 样式写死了 32px，我单独给这排按钮覆盖成了更矮的 26px，现在看起来和谐多了）

改造点 6：修复了「扫不全 + 必须手动Reload」的小毛病

之前的问题

有时候即使页面加载完了，你会发现右侧 matching 数量很少，但你明明感觉页面上有很多图，点一下「Reload」按钮，立刻就出来一大堆，这种体验很不好。

排查下来是注入脚本时的辅助函数没放在注入函数内部，导致注入后直接报错，扫描直接挂了。

我的解决思路

把 waitForDocumentReady 移到了 findImages 函数内部，保证注入执行时是自包含的，不再依赖外部作用域的函数。

总结一下

我这一轮的改造，主要围绕这几个方向：

启动策略更灵活：别死等，给用户更多控制权
筛选方式更高效：支持一次输入多个值，支持宽高组合筛选
界面更极简、干扰更少：只留核心功能，专注选图
交互更顺手：工具栏吸顶，匹配结果再叠一层真实尺寸分类
修复小问题：扫不到图的 bug、按钮高度的小细节

代码已在本地跑通、自测过，如果你也在用这个插件，可以参考一下我的思路，或者直接在基础上改。