重寫 Ptt 上的 Imgur Userscript 解決圖片出不來的問題

前幾個禮拜 Imgur 決定擋掉 Ptt 的網頁版,所以 Ptt 網頁版上會發現 Imgur 的圖都不見了:「[問題] 突然imgur的貼圖無法顯示」。

這是因為 Imgur 用 Referer 擋了 Ptt 的關係,後來 Ptt 官方在 8/15 後有針對 https://i.gslin.com/imgur/ 的圖片改用 https://cache.ptt.cc/ 過一層,不過 https://imgur.com/ 的就沒圖了。

這邊可以參考 Certificate Transparency 的「crt.sh | cache.ptt.cc」記錄,以及台大對於 Ptt 的流量的記錄 (出自「PTT 流量分析」這邊):

除了 Ptt 官方的解法外,另外可以自己寫 userscript,用 Referrer-Policy 繞過 (需要比較新版的瀏覽器,不過目前的瀏覽氣應該都夠新),看了一下本來的 ptt-imgur-cleaner-gm,發現要整個打掉改寫,索性就開一個新的專案變成 imgur-links-rewriting-on-ptt

這個版本的特色:

  • 加上對 https://imgur.com/a/ (album) 的支援,可以顯示第一張圖。
  • WebP 的版本,下載速度應該會快一些。
  • 偏好都是用大圖 (原始大小的圖片)。
  • 把本來走 https://cache.ptt.cc/ 的版本換回直接走 https://i.gslin.com/imgur/,就不用透過 TANet 或是台大的出國頻寬了。

程式碼不長 (參考「imgur-links-rewriting-on-ptt.user.js」這邊),主要是練手... 沒事就寫一下 userscript 可以維持對於 JavaScript 的基本熟悉度。

3 thoughts on “重寫 Ptt 上的 Imgur Userscript 解決圖片出不來的問題”

  1. 您好,感謝您提供的 userscript,但是在推文底下如果已經有 .richcontent 因為 DOM 結構的關係,不會被移除,就會出現兩次圖片,我在 forEach 內加上下面這段來處理:
    ```
    // Remove .richcontent after .push (推文)
    const pushEntry = el.closest('.push');
    if (pushEntry && pushEntry.nextElementSibling.classList.contains('richcontent')) {
    pushEntry.nextElementSibling.remove();
    }
    ```

    測試文: https://www.ptt.cc/bbs/Stock/M.1632940205.A.9B4.html

Leave a Reply

Your email address will not be published. Required fields are marked *