上周六下午看著看著 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
