用搜索引擎找圖這件事我?guī)缀趺刻於家蓭谆貙懜逭遗鋱D、驗(yàn)證一張截圖的出處、給素材找高清版本。以前在圖片搜索結(jié)果頁上鼠標(biāo)懸停一張圖右下角會(huì)掛著幾個(gè)按鈕其中那個(gè)“查看圖片”最順手——點(diǎn)一下直接跳到原圖不用進(jìn)中間頁也不用反復(fù)試右鍵。后來這個(gè)按鈕沒了頁面只剩一個(gè)鋪滿屏的瀑布流點(diǎn)哪張都把我甩到一個(gè)夾著廣告和推薦位的中間頁面里再點(diǎn)一次才看到原圖。這篇東西講的就是怎么把那個(gè)按鈕找回來一個(gè)幾十行代碼的瀏覽器擴(kuò)展三分鐘裝好裝上之后按鈕重新長在縮略圖上點(diǎn)一下直出原圖。它解決的不是什么高深問題純粹是“一次點(diǎn)擊 vs 三次點(diǎn)擊”的效率損耗但只要你是重度找圖用戶——設(shè)計(jì)師、運(yùn)營、做內(nèi)容搬運(yùn)的、查證圖片真?zhèn)蔚摹@個(gè)損耗一天攢下來就是幾百次多余的跳轉(zhuǎn)。下文我把思路、代碼、踩過的坑全攤開懂一點(diǎn) HTML 的可以直接抄完全不懂前端的照著步驟裝也能跑起來。1. 按鈕消失了消失的到底是什么1.1 先還原用戶視角的四個(gè)真實(shí)痛點(diǎn)很多人以為按鈕消失是“功能被砍了”其實(shí)更準(zhǔn)確的說法是“入口被挪走或藏起來了”。這兩件事在體驗(yàn)上的差別很大功能被砍意味著能力徹底不存在入口被挪走意味著能力還在只是你現(xiàn)在得多繞幾步才能碰到它。我把自己和身邊幾個(gè)同事的抱怨歸了一下類痛點(diǎn)其實(shí)就四個(gè)多一跳。以前懸停即點(diǎn)直達(dá)原圖現(xiàn)在必須先點(diǎn)縮略圖進(jìn)中間頁再看一遍廣告和“相關(guān)搜索”才找到真正的圖片鏈接。右鍵失效。早期的搜索結(jié)果頁右鍵“在新標(biāo)簽頁中打開圖片”能拿到大圖改版之后部分圖片是懶加載的占位圖或者低分辨率縮略圖右鍵存下來只有幾十 KB放大就糊。位置漂移。有些圖在中間頁里藏的原始鏈接還帶著一串跳轉(zhuǎn)參數(shù)手動(dòng)復(fù)制出來還得刪參數(shù)刪錯(cuò)了直接 404。移動(dòng)端更慘。窄屏下根本沒有懸停長按彈出的菜單里也沒有“查看圖片”這一項(xiàng)只能一步步點(diǎn)。這四條合在一起就是一個(gè)很典型的“產(chǎn)品為了引導(dǎo)流量做的改版”與“重度用戶的操作習(xí)慣”之間的沖突。改版方有它的道理——中間頁能塞更多相關(guān)內(nèi)容、能帶更多曝光但對于只想拿圖的人來說這條路純屬負(fù)擔(dān)。1.2 頁面變了但數(shù)據(jù)還在我一開始也擔(dān)心“是不是接口沒了”?；艘粋€(gè)晚上在開發(fā)者工具里翻結(jié)論讓人松口氣圖片的真實(shí)地址依然完整地躺在前端 DOM 里只是承接“查看圖片”這個(gè)動(dòng)作的那個(gè)按鈕節(jié)點(diǎn)從縮略圖容器里被移除了或者被塞進(jìn)了一個(gè)需要額外交互才展開的菜單。這件事的關(guān)鍵在于圖片搜索頁是一個(gè)典型的前端異步渲染頁面。你看到的瀑布流不是一次性從服務(wù)器吐出來的 HTML而是頁面加載完之后由 JavaScript 分批請求數(shù)據(jù)、拼接 DOM、再插進(jìn)容器的。滾動(dòng)一屏就插一批新節(jié)點(diǎn)。這個(gè)過程有個(gè)很要命的副作用——如果你在頁面load事件里跑一次查詢你只能掃到第一批圖片往下滾動(dòng)新出來的全是“漏網(wǎng)之魚”。所以任何“找回按鈕”的方案技術(shù)核心都不是“調(diào)接口”而是兩件事找到圖片節(jié)點(diǎn)用一組盡量穩(wěn)的選擇器把頁面上所有縮略圖img撈出來。跟上頁面的節(jié)奏頁面每插入一批新節(jié)點(diǎn)就重新掃一遍把按鈕補(bǔ)上去。第一件事靠 CSS 選擇器第二件事靠MutationObserver——瀏覽器原生的 DOM 變更監(jiān)聽器。搞明白這兩點(diǎn)剩下的全是體力活。提示判斷一個(gè)“頁面功能消失”的問題是前端問題還是后端問題最快的辦法是打開開發(fā)者工具在 Elements 面板里搜一下你關(guān)心的數(shù)據(jù)還在不在。在就是前端的事不在才需要往后端想。2. 方案選型四條路擺在面前為什么選擴(kuò)展2.1 四條候選路線的橫向?qū)Ρ仍趧?dòng)手之前我把能想到的路子都過了一遍列成表更清楚方案實(shí)現(xiàn)成本生效范圍更新維護(hù)主要短板瀏覽器擴(kuò)展Content Script中需要寫 manifest 和注入腳本只在匹配的域名和路徑下生效頁面改版后改選擇器即可需要開啟開發(fā)者模式手動(dòng)加載用戶腳本管理器 腳本低一個(gè).user.js文件同樣按 URL 匹配同上依賴第三方腳本管理器多一層信任成本書簽小工具Bookmarklet極低一段javascript:代碼手動(dòng)點(diǎn)擊才執(zhí)行改書簽即可每次都要點(diǎn)一次且容易被頁面的 CSP 攔瀏覽器自帶功能 / 系統(tǒng)級(jí)工具無全局不可控拿不到頁面內(nèi)的原始圖片地址我最后選擴(kuò)展理由有三個(gè)說穿了都很樸素第一它是“一次裝好長期自動(dòng)生效”的。書簽小工具每次都要手動(dòng)點(diǎn)我這人記性差點(diǎn)兩次就懶得點(diǎn)了。擴(kuò)展可以在頁面加載完成后自動(dòng)跑用戶完全無感。第二它能把按鈕“長”在頁面上而不是彈一個(gè)浮層。書簽小工具最常見的做法是彈一個(gè)面板列出所有圖片鏈接邏輯上能用但體驗(yàn)割裂——你還得在面板里再找一遍“我要的是哪張”。擴(kuò)展可以直接在每張縮略圖上掛一個(gè)按鈕位置對應(yīng)點(diǎn)誰是誰。第三調(diào)試體驗(yàn)最好。擴(kuò)展的 Content Script 在開發(fā)者工具里有獨(dú)立的執(zhí)行上下文console.log打在頁面的 Console 里斷點(diǎn)能打選擇器能實(shí)時(shí)改。用戶腳本管理器雖然也能調(diào)但多一層注入出問題的時(shí)候排查鏈路更長。代價(jià)也很明確擴(kuò)展的權(quán)限模型比用戶腳本嚴(yán)格。Manifest V3 之后content_scripts的matches必須寫成明確的 URL 模式不能用*://*/*這種大撒網(wǎng)雖然技術(shù)上能寫但裝的時(shí)候會(huì)彈一個(gè)非常嚇人的“讀取所有網(wǎng)站數(shù)據(jù)”提示。我的做法是把matches收窄到搜索頁的路徑特征上這樣安裝時(shí)只提示“讀取此站點(diǎn)數(shù)據(jù)”心理負(fù)擔(dān)小很多也更符合最小權(quán)限原則。2.2 兩個(gè)必須先想清楚的約束選完路線之后還有兩個(gè)約束條件必須在寫代碼前定下來不然后面全是返工。約束一不能破壞頁面原有的點(diǎn)擊行為?？s略圖本身是可點(diǎn)的點(diǎn)了會(huì)跳中間頁。我加的按鈕如果只是浮在上面點(diǎn)按鈕的時(shí)候事件會(huì)冒泡到父級(jí)a上結(jié)果就是“既開了新標(biāo)簽頁原頁面又跳走了”。所以按鈕的點(diǎn)擊處理里必須preventDefault()加stopPropagation()兩個(gè)都要少一個(gè)都不行。約束二不能重復(fù)注入。頁面是異步渲染的我用MutationObserver監(jiān)聽變更而“給容器加按鈕”這個(gè)動(dòng)作本身也會(huì)觸發(fā) DOM 變更——如果不做去重就會(huì)陷入“加按鈕 → 觸發(fā)變更 → 再加按鈕 → 再觸發(fā)變更”的死循環(huán)幾秒鐘之后頁面上每張圖疊了十幾個(gè)按鈕瀏覽器直接卡死。解決辦法是給已經(jīng)處理過的容器打一個(gè)標(biāo)記屬性掃描時(shí)先查標(biāo)記。這兩個(gè)約束聽著像是常識(shí)但我在第一版里兩個(gè)都踩了后面第 6 節(jié)會(huì)詳細(xì)說現(xiàn)場。3. 核心實(shí)現(xiàn)拆解三個(gè)繞不開的技術(shù)點(diǎn)3.1 Manifest V3 下的最小骨架現(xiàn)代瀏覽器擴(kuò)展的清單文件已經(jīng)不是當(dāng)年那個(gè)寬松的 JSON 了Manifest V3 對權(quán)限做了大幅收緊。對我們這個(gè)場景真正需要的字段其實(shí)很少manifest_version必須是3這是硬性的。content_scripts是核心它聲明“在哪些頁面、注入哪些文件、什么時(shí)候注入”。matches決定生效范圍寫成搜索頁的 URL 特征。run_at決定注入時(shí)機(jī)這里我選document_idle。關(guān)于run_at有句話值得展開。它有三個(gè)常見取值document_startDOM 還沒建好就注入、document_endDOM 建好但資源可能沒加載完、document_idle瀏覽器覺得空閑了再注入通常在document_end到load之間。選document_idle的原因是我們的腳本本身要依賴MutationObserver去追后續(xù)渲染所以完全不需要搶跑搶跑反而會(huì)因?yàn)閐ocument.body還不存在而報(bào)一堆null引用錯(cuò)誤。還有all_frames默認(rèn)是false意思是只在頂層文檔注入不進(jìn) iframe。搜索結(jié)果頁的圖片基本都在主文檔里保持false就行。如果哪天你把范圍擴(kuò)到了別的站點(diǎn)發(fā)現(xiàn)某些圖在 iframe 里再把它改成true——但要注意改成true之后同一個(gè)頁面里的每個(gè) iframe 都會(huì)跑一份你的腳本去重邏輯得更小心。3.2 用 MutationObserver 追上異步渲染的頁面這是整個(gè)方案里唯一需要?jiǎng)狱c(diǎn)腦子地方。先說反面教材我第一版用的是window.addEventListener(load, ...)加上一個(gè)setInterval每 500ms 掃描一次。能用但很難看——頁面靜置的時(shí)候它也在空轉(zhuǎn)筆記本風(fēng)扇轉(zhuǎn)得明顯而且 500ms 的間隔在快速滾動(dòng)時(shí)會(huì)漏掉一些節(jié)點(diǎn)。MutationObserver的用法本身不復(fù)雜觀察document.documentElement配置childList: true和subtree: true這樣整棵樹的任何層級(jí)新增節(jié)點(diǎn)都會(huì)通知到我。但直接回調(diào)里干活會(huì)出事因?yàn)槠俨剂鳚L動(dòng)的時(shí)候DOM 變更是一秒幾十次的高頻事件每次變更都全量掃一遍頁面主線程會(huì)被拖死。所以中間必須加一層節(jié)流收到通知不立刻掃而是起一個(gè) 200ms 的定時(shí)器定時(shí)器觸發(fā)時(shí)才執(zhí)行真正的掃描。200ms 這個(gè)數(shù)值是我試出來的——低于 100ms快速滾動(dòng)時(shí)掃描次數(shù)暴漲幀率掉得能看出來高于 400ms新圖片出來之后按鈕要愣一下才出現(xiàn)手感很怪。200ms 基本是“視覺上即時(shí)、性能上無感”的平衡點(diǎn)。還有一個(gè)小細(xì)節(jié)滾動(dòng)到底部再往上滾已經(jīng)處理過的容器會(huì)重新進(jìn)入視口MutationObserver可能因?yàn)閼屑虞d替換src再次觸發(fā)。這時(shí)候前面提到的標(biāo)記屬性就派上用場了容器有標(biāo)記就直接跳過不做任何查詢。3.3 按鈕注入與去重別讓頁面長出三胞胎注入這步看著簡單——createElement(button)、設(shè)文本、掛事件、appendChild——但真正決定成敗的是掛在哪個(gè)節(jié)點(diǎn)上。我試過三種掛法掛在img上不行。img是替換元素直接給它加子節(jié)點(diǎn)會(huì)被瀏覽器忽略而且img的position屬性設(shè)置之后定位基準(zhǔn)也很怪。掛在外層a上基本可行但前提是搜索頁的結(jié)果確實(shí)是a包裹的。如果哪天改版換成div加 JS 跳轉(zhuǎn)選擇器就全廢了。掛在最近的定位祖先上最穩(wěn)。用img.closest(a, div)找到最近的可定位父容器給它加position: relative按鈕用絕對定位貼右下角。我最終用的是第二種加第三種的混合優(yōu)先找a找不到就退到最近的div。同時(shí)給容器加一個(gè)統(tǒng)一的類名方便 CSS 里統(tǒng)一處理定位。去重標(biāo)記我用的是自定義屬性>{ manifest_version: 3, name: Image View Restorer, version: 1.0.0, description: 在圖片搜索結(jié)果頁恢復(fù)“查看圖片”快捷入口, 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是占位符你需要替換成自己實(shí)際訪問的搜索頁域名。寫這個(gè)模式有幾個(gè)規(guī)則要記牢*在主機(jī)部分只能匹配一級(jí)子域https://*.example.com/*能匹配a.example.com但匹配不了a.b.example.com。路徑部分的*可以匹配任意字符包括/所以/search*能覆蓋/search?q...和/search/images?...。協(xié)議必須寫全https://和http://是兩個(gè)不同的模式要分別寫通常只寫https://就夠了。路徑不寫*就代表精確匹配很容易漏。改完matches之后必須回到擴(kuò)展管理頁重新加載一次擴(kuò)展否則新規(guī)則不生效。這是新手最容易卡住的地方——改了半天代碼怎么刷新頁面都沒反應(yīng)以為代碼寫錯(cuò)了其實(shí)是擴(kuò)展還跑在舊配置上。注意這里的域名不要圖省事寫成https://*/*。雖然技術(shù)上能跑但安裝時(shí)瀏覽器會(huì)提示“讀取和更改您在所有網(wǎng)站上的所有數(shù)據(jù)”一是心理上有負(fù)擔(dān)二是權(quán)限過大意味著哪天代碼出了 bug 可能影響到別的站點(diǎn)。4.3 content.js 完整代碼與逐段講解下面這份是能直接跑的版本我按功能分了段每段后面說清楚它在干嘛。// ---------- 1. 常量與狀態(tài) ---------- 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. 地址推導(dǎo) ---------- const SIZE_RULES [ // 把 ?w200h200 之類的尺寸參數(shù)抬到大圖 { re: /([?](?:w|width|h|height|size|sz))\d{1,4}/gi, rep: $11600 }, // 把 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是這個(gè)擴(kuò)展里唯一帶點(diǎn)“猜測”成分的函數(shù)邏輯分三層先看縮略圖地址能不能通過替換尺寸參數(shù)變大圖能就直接用不能就退到外層鏈接再不行就用原始src。這三層是遞進(jìn)關(guān)系不是并列——因?yàn)榇蠖鄶?shù)情況下縮略圖地址確實(shí)帶尺寸參數(shù)改造一下就能拿到大圖這是最優(yōu)解因?yàn)樗〉袅艘淮雾撁嫣D(zhuǎn)。// ---------- 3. 按鈕構(gòu)建 ---------- 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 冒泡避免某些頁面用它做跳轉(zhuǎn) btn.addEventListener(mousedown, (e) e.stopPropagation(), false); return btn; }這里加了mousedown的阻止冒泡是踩坑之后補(bǔ)的。有些頁面不用click做跳轉(zhuǎn)而是監(jiān)聽父容器的mousedown或者pointerdown只攔click根本攔不住。把這三個(gè)事件都攔掉才算是徹底干凈。window.open的第三個(gè)參數(shù)noopener,noreferrer也別省。它是讓新開的頁面拿不到window.opener一是安全二是某些站點(diǎn)檢測到opener存在時(shí)會(huì)改行為比如強(qiáng)制在當(dāng)前頁跳轉(zhuǎn)。// ---------- 4. 掃描與注入 ---------- const IMG_SELECTORS [ div[data-attrid] img, a[rolelink] 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里我并列了四條選擇器用逗號(hào)拼起來交給querySelectorAll語義上是“滿足任意一條即可”。為什么要冗余這么多條因?yàn)樗阉黜摰慕Y(jié)果容器經(jīng)常改class尤其是帶哈希的那種像classabc123每次構(gòu)建都變但結(jié)構(gòu)性屬性相對穩(wěn)定>// ---------- 5. 監(jiān)聽與節(jié)流 ---------- 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 }); // 兜底單頁應(yīng)用的路由切換不一定觸發(fā) 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(); }最后那個(gè)readyState判斷是保險(xiǎn)。雖然run_at: document_idle保證了注入時(shí) DOM 基本就緒但如果哪天你把run_at改成document_start做實(shí)驗(yàn)沒這個(gè)判斷就會(huì)拿到null。加上它腳本在兩種注入時(shí)機(jī)下都能正常工作。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; }設(shè)計(jì)上的幾個(gè)取舍說明一下。opacity: 0加pointer-events: none的組合是為了讓按鈕默認(rèn)隱形——圖片墻本來就很花每張圖都掛一個(gè)深色藥丸會(huì)非常吵。只在懸停時(shí)顯形視覺上干凈得多。pointer-events: none是配合opacity: 0用的不然按鈕雖然看不見但仍然可以點(diǎn)會(huì)莫名其妙觸發(fā)。focus-visible那條是為了鍵盤用戶Tab 到按鈕上時(shí)它要顯形否則鍵盤操作完全沒法用。這個(gè)細(xì)節(jié)很少有人寫但加上之后整個(gè)東西才算完整。4.5 加載與驗(yàn)證裝的過程分三步熟練的話確實(shí)三分鐘打開擴(kuò)展管理頁右上角打開“開發(fā)者模式”開關(guān)。點(diǎn)“加載已解壓的擴(kuò)展程序”選中那個(gè)包含manifest.json的文件夾?；氐剿阉黜撍⑿乱淮?。驗(yàn)證方法很簡單鼠標(biāo)懸停一張縮略圖右下角應(yīng)該浮出一個(gè)深色的小按鈕。點(diǎn)它新標(biāo)簽頁打開的就是大圖。如果沒出現(xiàn)按這個(gè)順序排查先看擴(kuò)展有沒有加載成功。管理頁里如果顯示紅色錯(cuò)誤說明manifest.json有語法問題最常見的是多了一個(gè)逗號(hào)或者少了一個(gè)引號(hào)。再看matches寫對沒有。在搜索頁按 F12Console 里敲location.href把實(shí)際地址和你的模式對一遍。最后看 Console 有沒有報(bào)錯(cuò)。Content Script 的錯(cuò)誤會(huì)打在頁面的 Console 里紅字很顯眼。5. 從“能用”到“順手”的三個(gè)增強(qiáng)5.1 地址推導(dǎo)的邊界在哪里upgradeUrl那兩條正則只能覆蓋最常見的情況。真實(shí)世界里圖片地址的尺寸參數(shù)五花八門有的用?w200有的用?width200有的用路徑里的-320x480還有的把尺寸編在哈希里這種基本沒救只能老老實(shí)實(shí)跳中間頁拿原圖。我的建議是不要試圖寫完所有規(guī)則而是先抓高頻的跑一段時(shí)間看哪些圖還是拿不到大圖再把對應(yīng)規(guī)則補(bǔ)進(jìn)去。這是典型的“二八開”場景前兩條規(guī)則大概能覆蓋八成圖片剩下兩成補(bǔ)規(guī)則的成本急劇上升收益卻很小。有個(gè)例外情況值得單獨(dú)說如果原圖本身就比縮略圖小你的放大操作會(huì)拿到 404。因?yàn)榉?wù)器上根本沒有那個(gè)尺寸的文件。所以upgradeUrl返回的地址最好在打開前做一次可用性檢查——但window.open之前做異步檢查會(huì)丟失“用戶手勢”上下文導(dǎo)致彈窗被攔。折中方案是不檢查直接開如果 404 了用戶退回原頁面再點(diǎn)一次按鈕手動(dòng)點(diǎn)“復(fù)制圖片地址”。我在按鈕上加了一個(gè)contextmenu監(jiān)聽右鍵按鈕直接復(fù)制地址到剪貼板算是給這種情況留了個(gè)后門。5.2 別讓樣式污染頁面.ivr-host那條規(guī)則用了!important這在我的代碼里是唯一一處。原因是搜索結(jié)果頁的樣式表非?！鞍缘馈贝罅渴褂酶邇?yōu)先級(jí)的定位規(guī)則不加!important經(jīng)常被覆蓋導(dǎo)致按鈕跑到頁面左上角去。但!important是把雙刃劍——它會(huì)讓這條規(guī)則在層疊里幾乎無法被覆蓋。所以我把它限制在最小的范圍只影響position這一個(gè)屬性而且只在帶ivr-host類的節(jié)點(diǎn)上生效。ivr-前綴的作用是避免和頁面原有類名撞車這個(gè)前綴策略是所有注入式擴(kuò)展都應(yīng)該遵守的基本規(guī)矩。還有一個(gè)更隱蔽的污染我最初給按鈕設(shè)的是all: unset想清掉瀏覽器默認(rèn)樣式。結(jié)果按鈕的字體、行高全丟了和頁面風(fēng)格完全不搭。后來改成顯式聲明font-family: inherit和line-height: 1.5讓它繼承頁面的排版風(fēng)格觀感自然得多。5.3 一個(gè)順手的鍵盤增強(qiáng)按鈕加好之后我給自己又補(bǔ)了一個(gè)功能按Shift 點(diǎn)擊直接復(fù)制大圖地址不打開新標(biāo)簽頁。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 已復(fù)制; setTimeout(() { btn.textContent 查看圖片; }, 1200); } catch (err) { btn.textContent 復(fù)制失敗; } return; } window.open(url, _blank, noopener,noreferrer); });navigator.clipboard.writeText在擴(kuò)展的 Content Script 里是能用的但有兩個(gè)前提頁面必須是安全上下文HTTPS且調(diào)用時(shí)要有用戶手勢。Shift 點(diǎn)擊恰好滿足這兩個(gè)條件所以很穩(wěn)。復(fù)制成功后把按鈕文字改成“已復(fù)制”1.2 秒后改回來這個(gè)反饋很輕但很有用——不然你點(diǎn)了之后不知道到底成沒成。6. 排坑實(shí)錄那些讓我熬夜的問題6.1 問題速查表這張表是我自己還有幾個(gè)同事遇到的問題匯總按“癥狀 → 可能原因 → 處理方式”組織遇到問題可以直接對著查癥狀最可能的原因處理方式按鈕完全不出現(xiàn)matches沒匹配上當(dāng)前地址在 Console 敲location.href比對模式按鈕出現(xiàn)但頁面滾動(dòng)后新圖沒有沒監(jiān)聽 DOM 變更或監(jiān)聽了但沒節(jié)流檢查MutationObserver是否掛上同一張圖疊了多個(gè)按鈕去重判斷寫成了querySelector找自身改用hasAttribute點(diǎn)按鈕后原頁面也跳走了只攔了click沒攔mousedown兩個(gè)都要stopPropagation打開的圖很小幾十 KB拿到的是縮略圖地址補(bǔ)SIZE_RULES規(guī)則頁面滾動(dòng)明顯掉幀掃描太頻繁或全量掃document調(diào)大節(jié)流間隔縮小掃描范圍刷新后擴(kuò)展沒生效改了manifest.json沒重載擴(kuò)展回管理頁點(diǎn)重新加載按鈕位置跑到頁面角落宿主容器沒有position: relative檢查.ivr-host是否生效6.2 三條讓我印象最深的心得第一條先確認(rèn)數(shù)據(jù)在不在再?zèng)Q定要不要寫代碼。我最開始花了大半天時(shí)間研究“怎么找替代入口”甚至想過寫個(gè)工具去模擬點(diǎn)擊中間頁再解析結(jié)果。后來在開發(fā)者工具里隨手document.querySelectorAll(img).length發(fā)現(xiàn)頁面上躺著好幾十個(gè)imgsrc全是真實(shí)的大圖地址。那一刻我意識(shí)到自己差點(diǎn)走了一條完全錯(cuò)誤的路線。遇到“功能消失”類問題第一件事永遠(yuǎn)是打開開發(fā)者工具看一眼原始數(shù)據(jù)還在不在這個(gè)動(dòng)作只要十秒鐘卻能省下大半天。第二條不要用class做選擇器的主力。第一版我寫的是.isv-r img和.Wf5APd img這類選擇器當(dāng)天能用。三天后我打開搜索頁按鈕全沒了——因?yàn)樗褞Ч５念惷匦律闪?。后來改成?