恢复图片搜索“查看图片”按钮：浏览器扩展实战

用搜索引擎找图这件事，我几乎每天都要干几回：写稿找配图、验证一张截图的出处、给素材找高清版本。以前在图片搜索结果页上，鼠标悬停一张图，右下角会挂着几个按钮，其中那个“查看图片”最顺手——点一下直接跳到原图，不用进中间页，也不用反复试右键。后来这个按钮没了，页面只剩一个铺满屏的瀑布流，点哪张都把我甩到一个夹着广告和推荐位的中间页面里，再点一次才看到原图。这篇东西讲的就是怎么把那个按钮找回来：一个几十行代码的浏览器扩展，三分钟装好，装上之后按钮重新长在缩略图上，点一下直出原图。它解决的不是什么高深问题，纯粹是“一次点击 vs 三次点击”的效率损耗，但只要你是重度找图用户——设计师、运营、做内容搬运的、查证图片真伪的——这个损耗一天攒下来就是几百次多余的跳转。下文我把思路、代码、踩过的坑全摊开，懂一点 HTML 的可以直接抄，完全不懂前端的照着步骤装也能跑起来。

1. 按钮消失了，消失的到底是什么

1.1 先还原用户视角的四个真实痛点

很多人以为按钮消失是“功能被砍了”，其实更准确的说法是“入口被挪走或藏起来了”。这两件事在体验上的差别很大：功能被砍意味着能力彻底不存在，入口被挪走意味着能力还在，只是你现在得多绕几步才能碰到它。

我把自己和身边几个同事的抱怨归了一下类，痛点其实就四个：

• 多一跳。以前悬停即点，直达原图；现在必须先点缩略图进中间页，再看一遍广告和“相关搜索”，才找到真正的图片链接。
• 右键失效。早期的搜索结果页右键“在新标签页中打开图片”能拿到大图，改版之后部分图片是懒加载的占位图或者低分辨率缩略图，右键存下来只有几十 KB，放大就糊。
• 位置漂移。有些图在中间页里藏的原始链接还带着一串跳转参数，手动复制出来还得删参数，删错了直接 404。
• 移动端更惨。窄屏下根本没有悬停，长按弹出的菜单里也没有“查看图片”这一项，只能一步步点。

这四条合在一起，就是一个很典型的“产品为了引导流量做的改版”与“重度用户的操作习惯”之间的冲突。改版方有它的道理——中间页能塞更多相关内容、能带更多曝光；但对于只想拿图的人来说，这条路纯属负担。

1.2 页面变了，但数据还在

我一开始也担心“是不是接口没了”。花了一个晚上在开发者工具里翻，结论让人松口气：图片的真实地址依然完整地躺在前端 DOM 里，只是承接“查看图片”这个动作的那个按钮节点，从缩略图容器里被移除了，或者被塞进了一个需要额外交互才展开的菜单。

这件事的关键在于：图片搜索页是一个典型的前端异步渲染页面。你看到的瀑布流不是一次性从服务器吐出来的 HTML，而是页面加载完之后由 JavaScript 分批请求数据、拼接 DOM、再插进容器的。滚动一屏，就插一批新节点。这个过程有个很要命的副作用——如果你在页面load事件里跑一次查询，你只能扫到第一批图片，往下滚动新出来的全是“漏网之鱼”。

所以任何“找回按钮”的方案，技术核心都不是“调接口”，而是两件事：

1. 找到图片节点：用一组尽量稳的选择器，把页面上所有缩略图<img>捞出来。
2. 跟上页面的节奏：页面每插入一批新节点，就重新扫一遍，把按钮补上去。

第一件事靠 CSS 选择器，第二件事靠MutationObserver——浏览器原生的 DOM 变更监听器。搞明白这两点，剩下的全是体力活。

提示：判断一个“页面功能消失”的问题是前端问题还是后端问题，最快的办法是打开开发者工具，在 Elements 面板里搜一下你关心的数据还在不在。在，就是前端的事；不在，才需要往后端想。

2. 方案选型：四条路摆在面前，为什么选扩展

2.1 四条候选路线的横向对比

在动手之前我把能想到的路子都过了一遍，列成表更清楚：

方案	实现成本	生效范围	更新维护	主要短板
浏览器扩展（Content Script）	中，需要写 manifest 和注入脚本	只在匹配的域名和路径下生效	页面改版后改选择器即可	需要开启开发者模式手动加载
用户脚本管理器 + 脚本	低，一个.user.js文件	同样按 URL 匹配	同上	依赖第三方脚本管理器，多一层信任成本
书签小工具（Bookmarklet）	极低，一段javascript:代码	手动点击才执行	改书签即可	每次都要点一次，且容易被页面的 CSP 拦
浏览器自带功能 / 系统级工具	无	全局	不可控	拿不到页面内的原始图片地址

我最后选扩展，理由有三个，说穿了都很朴素：

第一，它是“一次装好，长期自动生效”的。书签小工具每次都要手动点，我这人记性差，点两次就懒得点了。扩展可以在页面加载完成后自动跑，用户完全无感。

第二，它能把按钮“长”在页面上，而不是弹一个浮层。书签小工具最常见的做法是弹一个面板列出所有图片链接，逻辑上能用，但体验割裂——你还得在面板里再找一遍“我要的是哪张”。扩展可以直接在每张缩略图上挂一个按钮，位置对应，点谁是谁。

第三，调试体验最好。扩展的 Content Script 在开发者工具里有独立的执行上下文，console.log打在页面的 Console 里，断点能打，选择器能实时改。用户脚本管理器虽然也能调，但多一层注入，出问题的时候排查链路更长。

代价也很明确：扩展的权限模型比用户脚本严格。Manifest V3 之后，content_scripts的matches必须写成明确的 URL 模式，不能用*://*/*这种大撒网（虽然技术上能写，但装的时候会弹一个非常吓人的“读取所有网站数据”提示）。我的做法是把matches收窄到搜索页的路径特征上，这样安装时只提示“读取此站点数据”，心理负担小很多，也更符合最小权限原则。

2.2 两个必须先想清楚的约束

选完路线之后，还有两个约束条件必须在写代码前定下来，不然后面全是返工。

约束一：不能破坏页面原有的点击行为。缩略图本身是可点的，点了会跳中间页。我加的按钮如果只是浮在上面，点按钮的时候事件会冒泡到父级<a>上，结果就是“既开了新标签页，原页面又跳走了”。所以按钮的点击处理里必须preventDefault()加stopPropagation()，两个都要，少一个都不行。

约束二：不能重复注入。页面是异步渲染的，我用MutationObserver监听变更，而“给容器加按钮”这个动作本身也会触发 DOM 变更——如果不做去重，就会陷入“加按钮 → 触发变更 → 再加按钮 → 再触发变更”的死循环，几秒钟之后页面上每张图叠了十几个按钮，浏览器直接卡死。解决办法是给已经处理过的容器打一个标记属性，扫描时先查标记。

这两个约束听着像是常识，但我在第一版里两个都踩了，后面第 6 节会详细说现场。

3. 核心实现拆解：三个绕不开的技术点

3.1 Manifest V3 下的最小骨架

现代浏览器扩展的清单文件已经不是当年那个宽松的 JSON 了，Manifest V3 对权限做了大幅收紧。对我们这个场景，真正需要的字段其实很少：

• manifest_version必须是3，这是硬性的。
• content_scripts是核心，它声明“在哪些页面、注入哪些文件、什么时候注入”。
• matches决定生效范围，写成搜索页的 URL 特征。
• run_at决定注入时机，这里我选document_idle。

关于run_at有句话值得展开。它有三个常见取值：document_start（DOM 还没建好就注入）、document_end（DOM 建好但资源可能没加载完）、document_idle（浏览器觉得空闲了再注入，通常在document_end到load之间）。选document_idle的原因是：我们的脚本本身要依赖MutationObserver去追后续渲染，所以完全不需要抢跑；抢跑反而会因为document.body还不存在而报一堆null引用错误。

还有all_frames，默认是false，意思是只在顶层文档注入，不进 iframe。搜索结果页的图片基本都在主文档里，保持false就行。如果哪天你把范围扩到了别的站点，发现某些图在 iframe 里，再把它改成true——但要注意，改成true之后同一个页面里的每个 iframe 都会跑一份你的脚本，去重逻辑得更小心。

3.2 用 MutationObserver 追上异步渲染的页面

这是整个方案里唯一需要动点脑子地方。先说反面教材：我第一版用的是window.addEventListener('load', ...)加上一个setInterval每 500ms 扫描一次。能用，但很难看——页面静置的时候它也在空转，笔记本风扇转得明显；而且 500ms 的间隔在快速滚动时会漏掉一些节点。

MutationObserver的用法本身不复杂：观察document.documentElement，配置childList: true和subtree: true，这样整棵树的任何层级新增节点都会通知到我。但直接回调里干活会出事，因为瀑布流滚动的时候，DOM 变更是一秒几十次的高频事件，每次变更都全量扫一遍页面，主线程会被拖死。

所以中间必须加一层节流：收到通知不立刻扫，而是起一个 200ms 的定时器，定时器触发时才执行真正的扫描。200ms 这个数值是我试出来的——低于 100ms，快速滚动时扫描次数暴涨，帧率掉得能看出来；高于 400ms，新图片出来之后按钮要愣一下才出现，手感很怪。200ms 基本是“视觉上即时、性能上无感”的平衡点。

还有一个小细节：滚动到底部再往上滚，已经处理过的容器会重新进入视口，MutationObserver可能因为懒加载替换src再次触发。这时候前面提到的标记属性就派上用场了，容器有标记就直接跳过，不做任何查询。

3.3 按钮注入与去重：别让页面长出三胞胎

注入这步看着简单——createElement('button')、设文本、挂事件、appendChild——但真正决定成败的是挂在哪个节点上。

我试过三种挂法：

• 挂在<img>上：不行。<img>是替换元素，直接给它加子节点会被浏览器忽略，而且<img>的position属性设置之后定位基准也很怪。
• 挂在外层<a>上：基本可行，但前提是搜索页的结果确实是<a>包裹的。如果哪天改版换成<div>加 JS 跳转，选择器就全废了。
• 挂在最近的定位祖先上：最稳。用img.closest('a, div')找到最近的可定位父容器，给它加position: relative，按钮用绝对定位贴右下角。

我最终用的是第二种加第三种的混合：优先找<a>，找不到就退到最近的div。同时给容器加一个统一的类名，方便 CSS 里统一处理定位。

去重标记我用的是自定义属性>{ "manifest_version": 3, "name": "Image View Restorer", "version": "1.0.0", "description": "在图片搜索结果页恢复“查看图片”快捷入口", "content_scripts": [ { "matches": [ "https://*.example-search.tld/search*", "https://*.example-search.tld/imghp*" ], "js": ["content.js"], "css": ["inject.css"], "run_at": "document_idle", "all_frames": false } ] }

matches里的example-search.tld是占位符，你需要替换成自己实际访问的搜索页域名。写这个模式有几个规则要记牢：

• *在主机部分只能匹配一级子域，https://*.example.com/*能匹配a.example.com，但匹配不了a.b.example.com。
• 路径部分的*可以匹配任意字符（包括/），所以/search*能覆盖/search?q=...和/search/images?...。
• 协议必须写全，https://和http://是两个不同的模式，要分别写（通常只写https://就够了）。
• 路径不写*就代表精确匹配，很容易漏。

改完matches之后，必须回到扩展管理页重新加载一次扩展，否则新规则不生效。这是新手最容易卡住的地方——改了半天代码，怎么刷新页面都没反应，以为代码写错了，其实是扩展还跑在旧配置上。

注意：这里的域名不要图省事写成"https://*/*"。虽然技术上能跑，但安装时浏览器会提示“读取和更改您在所有网站上的所有数据”，一是心理上有负担，二是权限过大意味着哪天代码出了 bug 可能影响到别的站点。

4.3 content.js 完整代码与逐段讲解

下面这份是能直接跑的版本，我按功能分了段，每段后面说清楚它在干嘛。

// ---------- 1. 常量与状态 ---------- const MARK_ATTR = 'data-ivr-injected'; const BTN_CLASS = 'ivr-view-btn'; const HOST_CLASS = 'ivr-host'; const SCAN_DELAY = 200; const MIN_SIZE = 80; let scanTimer = null; // ---------- 2. 地址推导 ---------- const SIZE_RULES = [ // 把 ?w=200&h=200 之类的尺寸参数抬到大图 { re: /([?&](?:w|width|h|height|size|sz))=\d{1,4}/gi, rep: '$1=1600' }, // 把 xxx-320x480.jpg 这类后缀去掉 { re: /-\d{2,4}x\d{2,4}(\.(?:jpe?g|png|webp|gif))/i, rep: '$1' } ]; function upgradeUrl(url) { if (!url) return ''; let out = url; for (const r of SIZE_RULES) { out = out.replace(r.re, r.rep); } return out; } function resolveTargetUrl(img) { const raw = img.currentSrc || img.src || ''; const upgraded = upgradeUrl(raw); if (upgraded && upgraded !== raw) return upgraded; const anchor = img.closest('a[href]'); if (anchor && anchor.href) return anchor.href; return raw; }

resolveTargetUrl是这个扩展里唯一带点“猜测”成分的函数，逻辑分三层：先看缩略图地址能不能通过替换尺寸参数变大图，能就直接用；不能就退到外层链接；再不行就用原始src。这三层是递进关系，不是并列——因为大多数情况下缩略图地址确实带尺寸参数，改造一下就能拿到大图，这是最优解，因为它省掉了一次页面跳转。

// ---------- 3. 按钮构建 ---------- function buildButton(img) { const btn = document.createElement('button'); btn.type = 'button'; btn.className = BTN_CLASS; btn.textContent = '查看图片'; btn.setAttribute(MARK_ATTR, '1'); btn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const url = resolveTargetUrl(img); if (url) { window.open(url, '_blank', 'noopener,noreferrer'); } }, false); // 阻止 mousedown 冒泡，避免某些页面用它做跳转 btn.addEventListener('mousedown', (e) => e.stopPropagation(), false); return btn; }

这里加了mousedown的阻止冒泡，是踩坑之后补的。有些页面不用click做跳转，而是监听父容器的mousedown或者pointerdown，只拦click根本拦不住。把这三个事件都拦掉，才算是彻底干净。

window.open的第三个参数'noopener,noreferrer'也别省。它是让新开的页面拿不到window.opener，一是安全，二是某些站点检测到opener存在时会改行为（比如强制在当前页跳转）。

// ---------- 4. 扫描与注入 ---------- const IMG_SELECTORS = [ 'div[data-attrid] img', 'a[role="link"] img', 'div[jsname] img', 'div > a > img' ].join(','); function markHost(container) { if (!container) return null; if (container.hasAttribute(MARK_ATTR) || container.querySelector(`[${MARK_ATTR}]`)) { return null; } container.classList.add(HOST_CLASS); return container; } function scan(root) { let imgs; try { imgs = root.querySelectorAll(IMG_SELECTORS); } catch (err) { return; } for (const img of imgs) { if (img.naturalWidth && img.naturalWidth < MIN_SIZE) continue; if (img.naturalHeight && img.naturalHeight < MIN_SIZE) continue; let host = img.closest('a') || img.closest('div'); host = markHost(host); if (!host) continue; host.setAttribute(MARK_ATTR, '1'); host.appendChild(buildButton(img)); } }

IMG_SELECTORS里我并列了四条选择器，用逗号拼起来交给querySelectorAll，语义上是“满足任意一条即可”。为什么要冗余这么多条？因为搜索页的结果容器经常改class（尤其是带哈希的那种，像class="abc123"，每次构建都变），但结构性属性相对稳定：>// ---------- 5. 监听与节流 ---------- function scheduleScan() { if (scanTimer) return; scanTimer = setTimeout(() => { scanTimer = null; scan(document); }, SCAN_DELAY); } function boot() { scan(document); const mo = new MutationObserver(scheduleScan); mo.observe(document.documentElement, { childList: true, subtree: true }); // 兜底：单页应用的路由切换不一定触发 DOM 变更 window.addEventListener('popstate', scheduleScan, false); document.addEventListener('visibilitychange', () => { if (!document.hidden) scheduleScan(); }, false); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot, { once: true }); } else { boot(); }

最后那个readyState判断是保险。虽然run_at: document_idle保证了注入时 DOM 基本就绪，但如果哪天你把run_at改成document_start做实验，没这个判断就会拿到null。加上它，脚本在两种注入时机下都能正常工作。

4.4 inject.css：让按钮不碍事

.ivr-host { position: relative !important; } .ivr-view-btn { position: absolute; right: 8px; bottom: 8px; z-index: 20; padding: 4px 10px; border: none; border-radius: 14px; background: rgba(16, 16, 16, 0.78); color: #fff; font-size: 12px; line-height: 1.5; font-family: inherit; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; } .ivr-host:hover .ivr-view-btn, .ivr-view-btn:focus-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

设计上的几个取舍说明一下。opacity: 0加pointer-events: none的组合是为了让按钮默认隐形——图片墙本来就很花，每张图都挂一个深色药丸会非常吵。只在悬停时显形，视觉上干净得多。pointer-events: none是配合opacity: 0用的，不然按钮虽然看不见但仍然可以点，会莫名其妙触发。

focus-visible那条是为了键盘用户：Tab 到按钮上时它要显形，否则键盘操作完全没法用。这个细节很少有人写，但加上之后整个东西才算完整。

4.5 加载与验证

装的过程分三步，熟练的话确实三分钟：

1. 打开扩展管理页，右上角打开“开发者模式”开关。
2. 点“加载已解压的扩展程序”，选中那个包含manifest.json的文件夹。
3. 回到搜索页，刷新一次。

验证方法很简单：鼠标悬停一张缩略图，右下角应该浮出一个深色的小按钮。点它，新标签页打开的就是大图。

如果没出现，按这个顺序排查：

• 先看扩展有没有加载成功。管理页里如果显示红色错误，说明manifest.json有语法问题，最常见的是多了一个逗号或者少了一个引号。
• 再看matches写对没有。在搜索页按 F12，Console 里敲location.href，把实际地址和你的模式对一遍。
• 最后看 Console 有没有报错。Content Script 的错误会打在页面的 Console 里，红字很显眼。

5. 从“能用”到“顺手”的三个增强

5.1 地址推导的边界在哪里

upgradeUrl那两条正则只能覆盖最常见的情况。真实世界里图片地址的尺寸参数五花八门：有的用?w=200，有的用?width=200，有的用路径里的-320x480，还有的把尺寸编在哈希里（这种基本没救，只能老老实实跳中间页拿原图）。

我的建议是不要试图写完所有规则，而是先抓高频的，跑一段时间看哪些图还是拿不到大图，再把对应规则补进去。这是典型的“二八开”场景，前两条规则大概能覆盖八成图片，剩下两成补规则的成本急剧上升，收益却很小。

有个例外情况值得单独说：如果原图本身就比缩略图小，你的放大操作会拿到 404。因为服务器上根本没有那个尺寸的文件。所以upgradeUrl返回的地址最好在打开前做一次可用性检查——但window.open之前做异步检查会丢失“用户手势”上下文，导致弹窗被拦。折中方案是：不检查，直接开；如果 404 了，用户退回原页面再点一次按钮，手动点“复制图片地址”。我在按钮上加了一个contextmenu监听，右键按钮直接复制地址到剪贴板，算是给这种情况留了个后门。

5.2 别让样式污染页面

.ivr-host那条规则用了!important，这在我的代码里是唯一一处。原因是搜索结果页的样式表非常“霸道”，大量使用高优先级的定位规则，不加!important经常被覆盖，导致按钮跑到页面左上角去。

但!important是把双刃剑——它会让这条规则在层叠里几乎无法被覆盖。所以我把它限制在最小的范围：只影响position这一个属性，而且只在带ivr-host类的节点上生效。ivr-前缀的作用是避免和页面原有类名撞车，这个前缀策略是所有注入式扩展都应该遵守的基本规矩。

还有一个更隐蔽的污染：我最初给按钮设的是all: unset，想清掉浏览器默认样式。结果按钮的字体、行高全丢了，和页面风格完全不搭。后来改成显式声明font-family: inherit和line-height: 1.5，让它继承页面的排版风格，观感自然得多。

5.3 一个顺手的键盘增强

按钮加好之后，我给自己又补了一个功能：按Shift + 点击直接复制大图地址，不打开新标签页。

btn.addEventListener('click', async (e) => { e.preventDefault(); e.stopPropagation(); const url = resolveTargetUrl(img); if (!url) return; if (e.shiftKey) { try { await navigator.clipboard.writeText(url); btn.textContent = '已复制'; setTimeout(() => { btn.textContent = '查看图片'; }, 1200); } catch (err) { btn.textContent = '复制失败'; } return; } window.open(url, '_blank', 'noopener,noreferrer'); });

navigator.clipboard.writeText在扩展的 Content Script 里是能用的，但有两个前提：页面必须是安全上下文（HTTPS），且调用时要有用户手势。Shift + 点击恰好满足这两个条件，所以很稳。复制成功后把按钮文字改成“已复制”，1.2 秒后改回来，这个反馈很轻但很有用——不然你点了之后不知道到底成没成。

6. 排坑实录：那些让我熬夜的问题

6.1 问题速查表

这张表是我自己还有几个同事遇到的问题汇总，按“症状 → 可能原因 → 处理方式”组织，遇到问题可以直接对着查：

症状	最可能的原因	处理方式
按钮完全不出现	matches没匹配上当前地址	在 Console 敲location.href比对模式
按钮出现但页面滚动后新图没有	没监听 DOM 变更，或监听了但没节流	检查MutationObserver是否挂上
同一张图叠了多个按钮	去重判断写成了querySelector找自身	改用hasAttribute
点按钮后原页面也跳走了	只拦了click，没拦mousedown	两个都要stopPropagation
打开的图很小，几十 KB	拿到的是缩略图地址	补SIZE_RULES规则
页面滚动明显掉帧	扫描太频繁，或全量扫document	调大节流间隔，缩小扫描范围
刷新后扩展没生效	改了manifest.json没重载扩展	回管理页点重新加载
按钮位置跑到页面角落	宿主容器没有position: relative	检查.ivr-host是否生效

6.2 三条让我印象最深的心得

第一条：先确认数据在不在，再决定要不要写代码。

我最开始花了大半天时间研究“怎么找替代入口”，甚至想过写个工具去模拟点击中间页再解析结果。后来在开发者工具里随手document.querySelectorAll('img').length，发现页面上躺着好几十个<img>，src全是真实的大图地址。那一刻我意识到自己差点走了一条完全错误的路线。遇到“功能消失”类问题，第一件事永远是打开开发者工具看一眼原始数据还在不在，这个动作只要十秒钟，却能省下大半天。

第二条：不要用class做选择器的主力。

第一版我写的是.isv-r img和.Wf5APd img这类选择器，当天能用。三天后我打开搜索页，按钮全没了——因为它把带哈希的类名重新生成了。后来改成用>