Twitch Chat Cleaner

上周六下午看著看著 Overwatch League 突然發現最近很熱門的話題 (XQC 被 ban) 造成被瘋狂的洗版,像是這樣:

… 真的是不太能用。

有沒有 Tool 可以 filter 掉這些 SPAM 呢?

google 了 “twitch filter” “twitch spam” “twitch chat filter” 之類的關鍵字都沒有找到任何的相關 tool 可以做這件事情,那只好自己開發一個了

(結果整個寫完了才發現有一個叫做 BetterTTV 的東西可以做到這件事情,有感 googl e 實力退步了)


Step 1.先想好 User Stories

  • 可以在聊天室開始洗的時候就可以直接 filter,不需要進入設定才做,那樣很慢
  • 可以快速 filter,不要有繁瑣的步驟
  • 可以 filter keyword,只要 substring 符合就直接 filter,才不用一個一個鎖
  • Twitch 已經很慢了,不希望影響太多速度

Step 2. 想好 spec

  • 於聊天室雙擊訊息,會彈出一個 dialog 問你 keyword,按下確定直接開始 filter
  • filter 顯示方式是 opacity: 0.1,有空洞在那邊 user 才會有感這個 extension 有在做事情(誤)

… spec 好像就這樣


Step 3. 設計架構

  • Observer: 聽取 DOM 的 event,有新訊息的時候會發送 event
  • Filter Button Appender: 自動於每筆聊天訊息插入 filter 的 button(後改為對整個 container 上 click event 之後再看 target)
  • Filter Engine: 根據 config 決定 Message 是否 filter
  • Dom Changer: 根據 Filter Engine 的結果對 DOM 上 filter

原本的設計在 Dom Changer 裡還有 debounce 的設計,不過後來直接全發改用 requestAnimationFrame 就可以了,不用那麼麻煩。


Step 4. 實作

有了架構之後,實作相對容易,加上 debug 時間也用去不多時間: https://github.com/ensky/twitch-chat-filter-extension/blob/master/src/src/inject/twitch.js

大概花了我 3–4 小時的時間(有做多國 LUL)


Step 5. 上架

可是瑞凡,上架前要先有 LOGO 阿阿阿!!!!!

身為美術白癡的我,要畫 LOGO 簡直要了我的命,但這種 side-project 如果拜託我的設計師朋友們,豈不是變成失控的設計師裡面的橋段,想了想決定還是自己畫一下。

概念圖:

花了我比實作更長的時間後,總算用免費的線上圖片編輯軟體 pixlr 畫出這張很糟的 LOGO (128, 96, 48 三尺寸直接縮放,保證氣死設計師 XD)

欸以工程師畫的來講已經算好了(…吧?,看那精美的 SOC app)

嗯,我真的覺得我畫的還可以 XD


Like what you read? Give Ensky Lin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.