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


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.