知乎表情的實現方式：貼圖
知乎的表情事實上是一系列由方括號包裹的關鍵字標記的圖片，和微信聊天中的表情類似。當我們將滑鼠移到表情上時，就可以看到圖片的alt資訊，即表情的關鍵字：
阻斷圖片載入
看起來，要想實現將知乎表情顯示為純文字標籤，我們只需要阻斷知乎網頁對錶情包圖片的載入即可，那根據HTML語法，圖片的alt屬性就會顯示在頁面上，達到了我們的目的。經過F12開發者工具審查頁面發現，這些圖片和正文中出現的其他圖片一樣，都是從形如pic[0-9].zhimg.com這樣的域名下載入的，而一種明顯的區分方法是這些表情圖片是固定的png，對應的載入URL直接是https://pic[0-9].zhimg.com/v2-xxxxx.jpg這樣的形式，而其他的圖片不論格式會有一個額外的source引數，形如...?source=xxxx。因此，我們可以使用uBlock Origin這樣的廣告攔截外掛，基於URL的匹配規則來特異性地阻斷這些表情圖片的載入。對應需要配置的過濾規則如下：
! 註釋使用單個!
! uBlock Origin支援子串或EasyList語法的過濾規則
||pic*.zhimg.com/*.png
然而，這樣我們會驚奇地發現，知乎中的表情消失了，但是相應的alt內容沒有呈現，這相當於丟失了表情在文中的資訊，肯定是不能接受的：
阻斷事件監聽器
繼續深挖出現問題的HTML段落，我們會注意到如下情況：
在原始碼中，sticker類圖片物件被標記為灰色的，說明整體隱藏了，而它們都附有事件監聽器，會不會是這些監聽器在圖片未成功載入時改變了圖片的顯示行為呢？我們注意到這些監聽器的來源是https://unpkg.zhimg.com，而這個域名似乎不承擔其他的功能，那就可以大膽地繼續配置規則把它們也阻斷，觀察效果：
! 這次使用子串匹配域名即可
unpkg.zhimg.com
這樣就成功了，說明上述的監聽器就是文字標籤被隱藏的原因。個人對這種設計不太理解，因為文字標籤就是用於在圖片載入失敗時顯示以表示意義的，而不應該被隱藏。不過總之我們已經成功地將知乎表情顯示為純文字標籤了。
本文由部落格一文多發平臺 OpenWrite 釋出！