Facebookの『リールとショート動画』を非表示にするChrome拡張を作った話
Chrome拡張作りました。
タイトルの通り、『リールとショート動画は見たくない』というchrome拡張を作ったというお話です。
こんなやつです
Facebookのあれを消すChrome拡張機能です。
なぜ作ったのか
なんじゃこりゃ！
ある日、FacebookにInstagramのようなショート動画を表示するエリアが表示された。金持ちそうなおじさんのゴルフ動画やかわいいお姉さんのダンスやどうでもいい豆知識なんて別に見たくない。
ないものは作ればいいじゃないか
こんなコンテンツ見たくないと文句を言うことは簡単だが、せっかく元エンジニアなんだしどうにかしてやろうと思ったわけです。
JavaScriptでどうにかできそうじゃない？
というわけで、デベロッパーツールでHTMLをのぞいてみた。
どうやら『リールとショート動画』のアイコンの部分にそれっぽいclassが設定されているようで、こいつの親要素を削除してやれば非表示にできるのでは？と考えた。
JavaScriptでDOM操作でごにょごにょすればどうにでもなりそう。
どう実現するか
Chrome拡張なら『リールとショート動画』のHTML要素を削除するコードを実行できることに気づいた。作り方をGoogle先生に聞いてみたら難しくなさそうだったので実際に作ってみた。
仕掛け
スクロールイベントを使って、スクロール操作が終了したタイミングで『リールとショート動画』のアイコンに適用されたclassのHTML要素を探して、その親要素を丸ごと削除するとい仕掛け。
審査があるのか！
リリースしようと思ったら、GooglePlayのアプリと同じように審査が必要なようです。GooglePlayと比べるとずいぶん簡単な設定内容と審査で、提出した翌日にリリース完了！
無事公開
というわけで、↑で無事に公開されました。
弱点
いわゆるスクレイピングのようなテクニック（単なるDOM操作）を使っているので、Facebookのアップデートによって使えなくなるケースがあります。気づいたらその時に直します。
DAZNでスポーツ観戦しながら数時間で作った10数行の雑なプログラムなので、うまく動かないこともあるかと思いますw
ただのネタで作ったものなので少々のバグはご容赦いただきたいです。
その他
同じ仕掛けで、「知り合いかも」や広告の部分ももしかしたら非表示にできるかも。気が向いたらそのうち作るかもです。
ver1.1にアップデートしました
初回にリリースしたバージョンだと、リールとショート動画以外の要素で同じクラス名を使っているエリアがあったようで、関係ない部分まで非表示になるバグがありました。
非表示にする前に「お前はほんとにリールとショート動画だな？」というチェック処理を追加しました。
GitHub
思った以上に反応があったのでGitHubでソースコードを公開しました。
改修要望などありましたら、プルリクエスト投げてください。
Discussion
バージョン1.1で、リールとショート動画以外のエリアが消えちゃうバグがあったので修正しました。
リールとショート動画の要素に固有で適用されているclassはなかったようなので、お前はほんとに「リールとショート動画」だな？っていうチェック処理を追加しました。