寫一個韓國瑜 Filter 需要多久?怎麼寫?

Max Yi-Hsun Chou
May 21 · 4 min read

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

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

最近很忙,有 refactor 不完的前人留下的技術債,還有一堆 Bug 需要修復。然而在這麼多事情的情況下又一直看到韓國瑜,真的是賭爛上加賭爛。因此就突然想到可以做一個 Chrome Extension 去 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 事件。

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

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

最後

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

如果你覺得這個 Extension 很棒的話,請幫我拍個手,或是到 Github 上面幫我按星星 ⭐️ !
也歡迎開 Issue 跟發 Pull Request,我有空的時候就會回你。XD

你也可以在這邊安裝這個 Extension

Max Yi-Hsun Chou

Written by

Full-Stack Engineer; 3 years experience in Software developing, Multiple startup experiences. Enrolled in Y Combinator Startup School.