在桌機上擋 Facebook 各種廣告與演算法推薦文章的 userscript

發現好像沒提過這個 userscript,由於 uBlock Origin 的條件式不足以擋 Facebook 的各種廣告機制,目前需要靠 userscript 擋:「FB - Clean my feeds」。

預設會擋掉 sponsored,像是這樣:

不過在點開左下角的 icon 後,可以看到更多選項可以擋,我是把所有列出來的都勾起來了,另外多增加一個 「Interested」(我這邊用的是英文版介面的 Facebook,看到的是 Interested 這個詞):

然後經過幾次 Facebook 反制的「改版」,作者也都蠻快就更新...

把 YouTube 的 Dislike 數字弄回來

最近 YouTube 也在搞事,把 Dislike 的數字拔掉了,後來在 Greasy Fork 上面找了一下,看到有兩套方法可以把數字補回來。

第一套是「Return YouTube Dislike」這個方法,從程式碼裡面可以看到是透過 API 拉出來的:

function setState() {
  cLog('Fetching votes...');
 
  doXHR({
    method: "GET",
    responseType: "json",
    url:
      "https://return-youtube-dislike-api.azurewebsites.net/votes?videoId=" +
      getVideoId(),
    onload: function (xhr) {
      if (xhr != undefined) {
        const { dislikes, likes } = xhr.response;
        cLog(`Received count: ${dislikes}`);
        setDislikes(numberFormat(dislikes));
        createRateBar(likes, dislikes);
      }
    },
  });
}

這個 API 後面應該是接 Videos: getRating 拉資料出來,但畢竟不是直接打 YouTube API (比較麻煩,需要每個使用者自己申請 API token),這樣就有隱私的疑慮了...

另外一套是「Show Youtube Dislike Count」,看了裡面程式碼發現他是用 averageRating 反推回來:

if (likeCount >= 0) {
    const r = data.playerResponse.videoDetails.averageRating;
    const dislikeCount = Math.round(likeCount * (5 - r) / (r - 1));

    ShowDislikes(likeCount, dislikeCount);
}

不過作者有點偷懶,這邊在等待頁面生成單純用 100ms 等頁面出現,有時候還是會有 race condition (就是後面還是讀不到 XDDD),如果懶的大修的話可以改成 1000ms 混過去,降低一些機率:

while (!isLoaded) {
    await Sleep(100);
}

另外數字很大的時候會稍微不準,但也算夠用了,先暫時用這套來頂著了...

改寫「Press "g" to Google (DuckDuckGo)」讓他支援 Whoogle

前幾天提到了 Whoogle 這個專案 (參考「自架的 Google Search Proxy 伺服器專案:Whoogle Search」),用 Docker 跑起來後就改寫「Press "g" to Google (DuckDuckGo)」這個專案,讓他可以支援設定 Whoogle,大概像是這樣:

使用者可以自己設定對應的 Whoogle 伺服器,這樣應該會方便一些...

重寫 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 的基本熟悉度。

Userscript 內對於 SPA 類的頁面的修改

目前的 userscript 支援這四種啟動時機 (用 @run-at 參數指定):

  • document-start (一開始就跑)
  • document-body (出現 body 後跑)
  • document-end (DOMContentLoaded 時,或是之後跑)
  • document-idle (DOMContentLoaded 後跑)

但對於 SPA 類的頁面來說,即使用到 document-idle,也不保證執行時頁面已經渲染完成,這時候可能是 framework 才正要開始處理頁面的時候。

如果我們的 userscript 想要「等」這些 framework 處理完後再開始跑,其中一種 workaround 是用 setTimeout() 等,但這樣很容易被 side effect 影響,像是電腦慢一點的時候還是會失敗,而如果 setTimeout() 時間拉太長體驗又不好:

setTimeout(() => {
    // ...
}, 1000);

比較好的方式是用 MutationObserver() 聽事件,在每次有新元素插入時判斷是否達成條件,處理完成後再停止聽事件 (避免持續影響效能):

let observer = new MutationObserver(() => {
    // ...
    // observer.disconnect();
});

observer.observe(document.documentElement, {
    attributes: false,
    childList: true,
    subtree: true,
});

有些 library 有把這段包起來,但看了使用方式覺得很複雜 (因為要支援比較多的情境),反而是自己把 MutationObserver() 的概念搞清楚後,用這幾行包起來還比較簡單...

寫了一個可以用 '/' 在 AWS 上快速切換服務的小工具

AWS Management Console 上切換服務需要用到滑鼠,而這個 Userscript 工具提供了 / 快速鍵可以直接拉出服務選單,另外也可以用 Esc 鍵關閉服務選單:「AWS Web Console Service Shortkeys」。

這個套件應該是支援多個瀏覽器,但是需要先安裝 Tampermonkey 這類可以跑 Userscript 的套件。

主要是常常在切的時候發現需要拿滑鼠,寫了這個 script 後多了一個方式可以用,而不需要把手移開鍵盤,會順手一些...

不過還是希望這個功能直接變成內建的 :o

用 Userscript 在 Gmail 裡面展開連結

前一篇「在 Gmail 裡面展開 GitHub 信件連結的 Userscript」是展開 GitHub 的連結,但這個套件是用document.querySelectorAll() 抓出來,裡面寫死了不少東西...

用了幾天後我還是只想開 commit 相關的連結 (用 regex 表示的話就是 ^https://github\.com/[^/]+/[^/]+/commit/),所以就找看看 Tampermonkey 能不能有 Config Page 或是 Option Page 可以讓使用者設定,結果發現本身沒支援:「Create a “config” or “options” page for a Greasemonkey script」。

但回覆裡面有提供一些方案可以用,我後來選了 MonkeyConfig,至少可以讓使用者設定 regex...

新的 Userscript 放在「open-links-in-gmail」這邊。

在 Gmail 裡面展開 GitHub 信件連結的 Userscript

從以前用 Subversion 就有習慣用 e-mail 收 diff log (內建的 hook 就有這個功能)。後來有了 Gmail 就更方便了,畢竟搜尋是 Google 的強項,另外一方面 Gmail 也是目前少數可以完全用鍵盤操作的 e-mail client。

現在用 GitGitHub 平台讓這件事情麻煩不少,得透過 webhook + API 自己包出來,目前折衷的方法是收 GitHub 的通知信 (但是沒有 diff log),然後寫個 Userscript,在按下 i 之後會把 GitHub 通知信裡的連結全部點開:「open-github-links-in-gmail」。

寫的很簡單... 最花時間反而是因為 hotkey 都被吃掉了,要測出哪個鍵還沒被用掉。

擋 Facebook 廣告的 Userscript

Facebook 為了反制各種「擋廣告軟體」,用了各種奇怪的 DOM 在擋:

目前看起來 ublock origin 這類擋廣告軟體支援的格式已經擋不住了,得靠其他工具來擋... 用到現在一直有在更新的「Facebook unsponsored」算是還行... 看 source code 可以看到他是直接抓有顯示的字串來分析,所以不會受到 DOM 的干擾,不過最近看起來又開始被搞了... XD

把 YouTube 對 channel 與 user 的自動播放功能關掉...

YouTube 在 channel 與 user 頁面會自動播放會讓人覺得頗困擾 (頁面一打開就有聲音),所以想要找看看有沒設定可以關掉... 找了之後發現很久前就有被問過,但是當時得到沒有這個功能的回答:「How do I DISABLE autoplay from other channels on my YouTube channel?」。

既然如此就只能找套件來解了... 目前是透過 Userscript 擋下自動播放,程式碼不長也蠻好懂的:「Disable YouTube Channel/User Home Page Video AutoPlay」。

這樣總算是不會被聲音搞到...