工程師寫出 FB 韓國瑜過濾器,擋掉所有你不想看到的韓總新聞!

韓國瑜、韓總、洗版

【為什麼我們要挑選這篇文章】韓國瑜是近期網路聲量高的政治人物,然而媒體的大幅報導,親友的訊息瘋傳已經讓一些網友「不勝其擾」,於是有工程師發揮他的專業,寫了一個「韓國瑜 Filter」,過濾掉 FB 上所有關於韓國瑜的訊息。如果你也被韓國瑜洗版到煩的話,這位工程師將手把手教你怎麼在一小時內寫出一個 Filter;不太會 coding 也沒關係,這位工程師很佛心的附上 程式 給各位啦!(責任編輯:郭家宏)

作者:Max Yi-Hsun Chou

先來說說為什麼會想做這個 Filter。

我相信大家應該從去年年底就一直被韓國瑜洗版。瀏覽 Facebook 的時候也會時常的被韓國瑜訪問。

最近很忙,有 refactor 不完的前人留下的技術債,還有一堆 Bug 需要修復。然而在這麼多事情的情況下又一直看到韓國瑜,真的是賭爛上加賭爛。因此就突然想到可以做一個 Chrome Extension 去 Filter 所有有韓國瑜的貼文,包括新聞。

工程師教你寫韓國瑜 Filter,只要一小時就可完工

要花多少時間呢?

如果你很熟 Chrome Extension 他的工作原理,還有 DOM Event ,jQuery ,還有最煩的 Facebook HTML Architecture。那應該就是一個小時內可以完成的工作。

具體思路

找到貼文的 Element,並刪掉它。

實作

最厭煩的應該就是 Facebook HTML Architecture 了,我猜 Facebook 是為了不讓 HTML 被隨意變動,所以使用了一個叫做 hidden_elem 的 div 然後把很多資訊(沒有列出來是因為我也懶得找 XD)放在裡面,在用 React 去 Render 出來。

去除 Element 的 Function 寫起來很簡單,有寫過 jQuery 的人應該都知道。就是用簡單的 Selector 抓到相對的 Element ,然後把他砍掉就好。而比較難的部分是需要找到相對的字眼,我們可以調用 jQuery 裡面的 contains()

像是這樣:

但這樣會有一個問題,整個 Element 都會被砍掉。所以我們必須要指砍掉該則貼文就好。我又回去翻了一下 Source Code 發現每一則貼文都會有一個叫做 .userContentWrapper 的 div 。因此我們只要砍掉該 div 就好了。

也就是這樣:

但我覺得這樣還是不太夠力,所以我想說可以加上一些嘲諷字眼,像是「發大財」,「草包已被隱藏」,「沒有草包天下太平」或之類的。

我們可以調用 jQuery 裡面的 Function 叫做 html() ,他可以幫你插入 HTML Code。

所以會長得像這樣:

問題又來了,跟韓國瑜有關係的字很多,像是「韓總」,「韓流」。

(沒有加上草包是因為韓粉們不會叫韓國瑜草包,只有要罷免他的人才會這樣做,但我們絕不能忘記要罷免韓國瑜這件事情,所以就不加入了。)

好,因此我們必須建立一個 blocklist ,並用一個 forEach 去處理這些關鍵字。

Facebook 有一個 Event 是當你滑到文章最下方的時候會仔入更多文章,所以就是要加入 Refresh / Reach Bottom To Load More 的 Event。

但我當時沒有花很多時間去想要怎麼監聽這個後者,所以用了 Event Listener 去監聽 Root Element 的 DOMSubTreeModified 事件。

除了 FB Filter,還附贈了一個 Google Extension

而我測試的時候是去了韓國瑜的粉絲團,因此看到下面這一個景象,有夠好笑。

大略實作起來就是這樣,目前有發現一些潛在的問題,像是 Hyperlink 進來的時候 Filter 沒有被啟用的問題,只能等之後有時間再修復了。

最後

其實寫這個 Extension 的初衷真的就是想要蓋掉韓國瑜的新聞,因為每天一直看到真的很煩,跟抖音一樣煩。

如果你覺得這個 Extension 很棒的話,請幫我拍個手,或是到 Github 上面幫我按星星,也歡迎開 Issue 跟發 Pull Request!

韓國瑜 Filter 傳送門

你也可以安裝這個 Extension:Facebook 韓國瑜過濾器

(本文經 Max Yi-Hsun Chou 授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為 〈 寫一個韓國瑜 Filter 需要多久?怎麼寫?〉。)

更多韓國瑜與厲害的工程師消息

北漂工程師設計「韓總計數器」,用程式碼追隨韓國瑜的發財腳步!
【不只議員翻白眼】一文秒懂自經區爭議:洗錢疑慮、恐被中美貿易戰波及
韓國瑜宣布與台灣微軟合作,導入 AI 雙語教學讓「人才進得來」!


全球醫學矚目焦點

人類逼近打破年齡、健康限制的臨界點! 搶先報名 12/6《2019 未來科技展》再生醫療場次

點關鍵字看更多相關文章: