はじめに
はじめまして！
ジョージと申します。
最近teratailを使い始めたのですが、意味のない質問を連投しているすごく鬱陶しいユーザがいて不快な気持ちになりました。しかし、teratailには標準のブロック機能がないため、不快なユーザの質問を非表示にする事が出来ませんでした。
そこでchrome拡張機能で以下のような物を開発しました。
- teratailのユーザをブロック出来る
- ブロックしたユーザの質問は非表示にされる
実際の使用画面デモ
使用するための手順
chrome拡張機能のURL
本拡張機能の使い方
- teratailに移動し拡張機能をクリックする
- ブロックしたい
ユーザの名前を入力し、追加ボタンを押す
2022/4/12追記
ブロックしたいユーザの名前ではなく、以下画像のようなブロックしたいユーザのプロフィールのurlの最後を入力してください。
3.ブラウザをリロードするとブロックしたユーザの質問が非表示になる
↓ブロック前
↓ブロック後
非表示になっているか確認方法
検証ツールのコンソールに質問が非表示にされたログが出るようになっている。
はじめて使った機能
- ChromeのStorageApi
- MutationObserver
ChromeのStorageApi
ブロックしたユーザの管理に使いました
こちらの記事を参考にしました
MutationObserver
ブロックしたユーザの質問のDOMの取得、非表示を行うタイミングをMutationObserverで指定しています。
当初はwindow.onloadごとにDOMの取得、非表示を行おうとしましたが、teratailがspaのため、画面遷移時にロードしないのでMutationObserverを使いました。
こちらの記事を参考にしました
使用技術
- JavaScript
各主要機能の説明
今後していきたいこと
- ブロックリストから個別のユーザを削除できるようにしたい
- UIをもうちょっとまともにしたい
- 現在のコードは汚いのでリファクタリングしたい
おわりに
最後までご覧いただきありがとうございました！！
追記
- 2022/3/29
- ユーザを追加できないバグを修正いたしました。
- 2022/4/3
- ブロックリストから個別のユーザを削除できるようになりました。
- ユーザ名を変更したユーザの質問が非表示にされないバグを修正
- 2022/4/28
- chromeウェブストアに公開されました。