みなさん、こんにちは！

第2回となる168（いろは）プロジェクトですが、本格的に何かを作るのはこれが初めてになります。

まずは手始めに、前々から作りたかったChrome拡張を一週間で作ってみることにしました！

何を作った？

私自身、普段からよくYouTubeで動画を見たり、時々ですが動画投稿したりしています。

動画はもちろん、コメント欄も鋭いボケやツッコミがあり、本編とセットで見て楽しんだり応援コメントを見て励みにしていたりしています。

しかし中には誰かを貶めたり、スパムURLが貼られてあるようなろくでもない Dis コメントがあって、なんとかして見られないようにできないかと考えていました。

もちろん公式の機能としてブロックなどはあるのですが、いたちごっこになってしまって結局完全に対応しきるのは難しいです。

あとはちょっと心無いコメントでも、せっかく投稿してくれた方のコメントの内容を勝手に変えたり消してしまうのはいかがなものか？とも思いました。

…だったら逆に、コメントを消さないなら、心のダメージを消そう！という発想に至りました！

そう、同じコメントでも「誰がコメントしたか」で受ける印象はだいぶ違うものです。

「バカ」と言われても、おじさんに言われるか美少女に言われるかで受け取り方は全然違います。（むしろ嬉s）

というわけで、今回は「指定した文がコメントに含まれていたらアイコンとユーザ名を変える」Chrome拡張「DisBlock」を作りました！

どうやって使う？

ソースコードはこちらにあります
https://github.com/engclass-z/disblock

こちらの README をご覧ください。

試してみる際は、自己責任の範囲で利用してください。

技術的な話

今回は TypeScript と React + styled-components で Chrome 拡張を作成してみました。

YouTube ではコメント欄は inview で遅延読み込みされるされるため、定期的に DOM 監視し、コメント欄が見つかったら処理を開始するようにしています。

DOM 要素の特定には ID と class を利用しているため、YouTube 側でこのあたりの命名に変更があったらロジック変更する必要があります。

最後に

今回はYouTube動画コメントの投稿者アイコンと名前を差し替えられるChrome拡張を作っていきました。

このプロジェクトでは一週間という期限を設けてサービスを作るということを大事にしているのでここまで作りましたが、時間があれば
・もっとインテリジェンスに置換対象コメントを検出できるようにテキスト解析を行う
・複数の置換パターンを登録できるようにする
などもやりたかったです。

また、別動画に移ったときに表示がおかしくなるバグや、クロスドメイン制限に引っかかったときに画像読み込みの挙動がおかしくなるバグなどもあるので、このあたりも直したいたいと思っていました。

しかしこだわり始めるとどこまでもやってしまいそうなので、やはり期限を区切ってサービスを作るという試みはやってよかったと思いました。

Chrome拡張を作る土台はできたので、次にまた別の拡張機能を作るときははこれを元にもっよりと便利なものを作ろうかと思います！