タイトル通りです。ブラウザの拡張機能であるChannel Blockerを自作してみました。
一応、誰でも使えるようにソースコードや簡単な使い方を公開していますが、あくまで趣味で作ったものをブログで自慢したいだけなので、実際の機能は至らない点が多々あることをご了承下さい。
追記：ストアにも公開しました。下の記事にストアURLを載せているのでダウンロードしてください。
physx.hatenablog.com
Channel Blockerを自作しようと決意するまで
我々にはChannel Blockerが必要である
Channel BlockerはYouTube上でのチャンネルを非表示にしてくれる拡張機能です。
なぜ、これが必要か。私のお気持ち含めた結論を先に言うと、「ヒカ〇ンさんの変な顔サムネのような不快なサムネを見たくない」。これに尽きます。
サムネは動画の顔みたいなものですし、興味を惹かれるサムネが良いというのは理解できます。しかし、興味ないものや不快なものをドアップで見せられるのは良い気分ではないんですよね。
加えて、YouTubeのオススメ動画は私の嗜好にあまり合わない動画ばかりです。例えば、私が一度でもVTuberを見たら、関連の切り抜きや他の有名VTuberの動画が次々としつこくオススメされます。
一応、「興味ない」ボタンや「チャンネルをオススメに表示しない」ボタンはありますが、時間が経ったり、キャッシュが残ったり（？）していると、再表示されてしまうので意味がありません。
オススメに出てきた動画を間違って一回見ただけで、
- AIでいい加減に作らせたようなしょうもないコンテンツ
- 対立煽り系ずんだもん
- 自称世界の真実ゆっくり解説
- 投稿者を知らないと楽しめない切り抜き
が関連動画にしつこくでてくるのが本当に邪魔。
特に、社会系ゆっくり解説だの政治系ゆっくり解説だの、「真実」とやらを知って良い気になってるのは投稿者とそれ見て気持ちよくなれる一部の人だけでいいよ...
私も中二病全盛期の時、政治系やら隠された真実みたいなのをドヤ顔で友達に話してた過去があって、共感性羞恥が発動して恥ずかしくなっちゃう...
トップページの動画サムネを大表示にする変更といい、YouTube君、いい加減そこらへん拒否する機能を実装してくれ...
せめて、興味ないボタンだのはきちんと反映してくれよ
一応言っておくと、投稿者批判をしたいのではありません。YouTubeには数多の動画があり、人によって合う動画合わない動画はあるのは当然です。
ただ単純に、YouTubeの機能がゴミ悪いというのと、私が変なサムネや動画を見たくないというだけです。
エロ広告や著作権ガン無視違法動画は見て見ぬふりするくせに、エッチな動画やASMRにはとことん厳しく、平気な顔して誤BANを繰り返すダブスタYouTube君さぁ...
ここがすごいよChannel Blocker
本家であるChannel Blockerはブラウザに導入できる拡張機能です。
chromewebstore.google.com
Channel Blockerの有用な点は非表示のやりやすさです。
チャンネル名の横に×ボタンが表示されるので、そこを押すだけで簡単に非表示にできます。
検索からも消えるので、サムネを見たくないチャンネルが恒久的に非表示となり、とても快適です。
一応、Channel Blockerの他にもチャンネルを非表示にできる拡張機能はありますが、使いやすさという一点で私はChannel Blockerを愛用していました。
2025年7月、Channel Blockerが関連動画で機能しなくなる
前から度々、「不具合が発生する」→「いつの間にか直る」を繰り返していたと思いますが、2025年7月に関連動画で機能しなくなりました。
これまでと同じ様にいつの間にか直るのかもしれませんが、拡張機能の更新は約1年前を最後に途絶えています。
GitHub上でのバグ対応等も約1年前を最後に更新等がないので、今後対応するかどうかはわかりません。
Channel Blockerが機能しない原因について
閑話休題的なやつ。Channel Blockerが機能しない原因を推測してみました。
まずは、どんな状況で機能するかを調査。
- トップページのおすすめでは、Channel Blockerが機能している
- 動画再生時の横にある関連動画では機能していない
よって、YouTube側で関連動画の何かを変更したことが推測できます。
これは、自分でコードを実装してみながら色々と調査してみた私の推測ですが、「YouTubeがサイト上での関連動画のタグ名（？）を変更したことが原因」だと考えています。
Channel Blockerのコード上は変更前のタグ名で処理しているため、今まで何回か起きていた不具合もそれが原因じゃないかと。
まあ、私の勝手な推測なんで、本当にそうなのかは知りませんが...
Channel Blockerを自作してみよう（決意）
私の推測通り、関連動画のタグ名変更が原因なら、Channel Blocker側のコードを変更すればいいだけです。幸いにもコードは公開されていますし。
github.com
でも、この拡張機能のコードが複雑でとても大変。構造が複雑すぎるし、コードのタグ名にあたるのがどれなのか、どの部分を変更すればいいか、がわからない。
そんなことを考えているうちに、「核の部分だけなら自分で実装できるんじゃね？機能自体は簡単そうだし、ChatGPTと会話しながらいけるのでは？」と思い立ち、自分で実装してみました。
youtube-channel-blocker（自作）
実装したのは以下の通り
- チャンネル名への×ボタンの追加
- リストとチャンネル名が一致したらその親＝動画ごと非表示にする
- ポップアップによるリストの表示等
（他にも実装した気がしますが、忘れました。）
最初から全部の実装を想定していたわけではありません。まずは、×ボタンを追加する→非表示にする機能を実装しました。その後、「リストを見て、編集できないと意味ないよなあ」と思って、ポップアップにリストを実装する、といった感じでした。
つまり、最低限を実装してから、だんだんと追加していく形です。エンジニア用語だとウォーターフォール開発ではなく、アジャイル開発でやってました。
ダウンロード先
GitHub上のURLはこちら。
github.com
※追記：以下に書いてあるのは実装当時の手順です。大きくは変わらないもののGitHubのページに手順が書いてあるのでそちらから。
コードはGitHub上にアップロードしました。gitコマンドが使えれば、更新があった場合もすぐ簡単に最新版を使えるようになります（プルして、拡張機能のページから更新すればいいだけ）。
ただし、ファイルが何個もあるわけではないので、自分のPC上でファイルを作って、コードをコピペする方法でもそう手間はかからないはずです。
注意点は、
- .jsや.htmlといった拡張子を含めてファイル名は同じにすること
- 「youtube-channel-blocker」というフォルダを作ってコードはまとめてその中に入れること（階層を変えないこと）
です。
また、コード上、png形式の画像が2枚必要です。何でもいいので2枚のpng画像を用意して、ファイル名を「icon48.png」と「icon128.png」にしましょう。ファイル名を変更した後は、2枚の画像を「youtube-channel-blocker」フォルダにいれておきましょう。
なお、フォルダ名は変えても問題ないと思いますが、日本語だとエラーがでるかもしれないので、英語にしておくのが無難です。
最終的に、「content.js」「manifest.json」「popup.html」「popup.js」「icon48.png」「icon128.png」の計6つのファイルがあって、png画像以外はちゃんとコードが書かれているなら大丈夫のはずです。
※追記 詳細設定ページと動画タイトルフィルターの機能も追加したので、「setting.css」と「setting.html」、「setting.js」も必要になりました。といっても、ダウンロードするかきちんとコピペすれば問題ないと思います。
「youtube-channel-blocker」の使い方
「youtube-channel-blocker」フォルダを作って、コードや画像をその中に入れたら、いよいよ使ってみます。手順は以下の通り。この手順はGitHubのページにも書いてあります。
これで拡張機能がONになっていれば、機能するはずです。
画像はChromeの拡張機能ページ。右上には2つ目の手順で使用した「デベロッパーモード」を切り替えるトグル（ONは色がつく）があり、左上には3つ目の手順で使用した「パッケージ化されていない拡張機能を読み込む」というボタンがある。
適用した後は、右上に拡張機能のアイコンがでているはずなので、そこをクリックしてみましょう。でていなければ、パズルのピースみたいなアイコンをクリックするとでてくるはずです。
画像は右上に出てきた拡張機能のスクショ。左から、今回のチャンネルブロッカーとリモートデスクトップ、拡張機能全体を管理するアイコンが表示されている。私の場合ははチャンネルブロッカーのアイコンに以前撮ったマイコンの写真を使用しているので、緑っぽいアイコンになっている。
出てきたポップアウト内の「ブロックするチャンネル名」の下に、チャンネル名を書く欄があります。ここに直接チャンネル名を書いて保存すれば、そのチャンネル名が非表示になります（完全一致していること）。
また、YouTubeのトップページにある動画のチャンネル名や動画再生中の関連動画のチャンネル名の横にある赤い×印をクリックすることでも、自動的にリストに追加されます。
画像はチャンネル名横に表示された×ボタン。（打ち切りになったあとにジャンププラスで無料公開分を読んでみたら面白かった「超巡！超条先輩」の動画を例に。もっと早くこのマンガを知っていたら、コミックスとか買ってたのに...）。
拡張機能が動作していれば、チャンネルがトップページや関連動画、検索からも非表示になるはずです。なお、履歴には表示されてしまうので注意。
※追記：いつの間にか履歴も非表示にできるようになってました。検索画面で適用できるようにしたせいかな？なんかわからないけど、動いているからヨシ！
作った感想
今回は、「ページの検証」で必要なタグ名を調べて、ChatGPTと格闘しながら作ってみました。調査や自身の勉強含めて、所要時間は3時間くらいでした。
私はあまりJavaScriptだのHTMLだのCSSだのに詳しくはないのですが、ChatGPTやりたいこと書いたりしたら大体実現してくれました。比較的簡単なコードならChatGPT頼りでも十分ですね。反面、タグ名を調べるみたいな面倒な作業は自分でやるしかなかったので、ChatGPT様に人間がこき使われている感が半端なかったです。
苦労したとこ
- HTMLやCSS、拡張機能だのは素人なので全然知らないことだらけで、ChatGPTを先生にして学ぶところから始まった。
- タグ名を見つけるのに結構な時間が必要だった。
- 精度を高めようと、関連動画を読み込んだり、リストを更新するたびに処理を入れていたら、負荷が高すぎてYouTubeをとめてしまう自称エンジニア私。
※追記：不具合とかが見つかったり、検索画面上でのチャンネルブロック機能を追加したりしていたら、2日くらいかかりました。自分で調べて実装したらもっと早かったと思いますし、ChatGPTに頼ったままだと永遠に完成しなかったと思います。やはり、ChatGPTをアドバイス役に据える（関数の解説なんかで時々頼るイメージ）ならともかく、コード書く部分を完全にChatGPT頼りにするのは厳しいですね...
最後に
反省点
あくまでも自分用として、手抜きあまり力を入れずに作った物ですが、色々と足りてないところが...
自分で使っているだけでも以下の点が気になります。
- プレイリストは複数の×がついてしまう
- ×のUIがちょっと見にくい
- 現在再生している動画のチャンネル名には×が表示されない
- 動画タイトルの横にある3点が時々消える
- リストはチャンネル名のみで、IDに対応していない
また、重要ではないものの、以下の点についても改善等が必要かなあと。まあ、やるかどうかはわかりませんが。
- 履歴でも非表示にする機能の追加
- 処理をもう少し軽く
- リストの管理をもう少しやりやすく（エキスポートやインポート、リストからの削除等々が簡単にできるように）
- 本家Channel Blockerはたまにリストが消えてしまうことがあるので、その原因と対策を解明してこちらにも活用（いまだに、本家のリストはなぜ突然消えるのかわからない）
他にも改善が必要な点は多々あると思いますが、比較的単純なコードなので、自分で書き換えて納得するものにするのもいいかもしれません。
余談：宣伝
宣伝だけ。Steamで公開する用のゲームを作っています。私事でなんやかんや色々あって、だいぶ遅れていますが、できるだけ早く出せるように頑張って製作中です。
store.steampowered.com
次のお話↓
physx.hatenablog.com
次の次のお話↓
physx.hatenablog.com
ちなみに、（多分）YouTube Channel Blockerの記事のおかげでGoogleアドセンスにも通りました。
physx.hatenablog.com
