💻

Chrome拡張機能を使って、Youtubeの再生数とコメント欄などをすべて非表示にする

2023/06/16に公開

Chrome拡張

YouTube

stylebot

tech

はじめに

Youtubeの再生数やコメント欄が目に入ることにうんざりしていたので、Chromeの拡張機能を使って、不必要な情報をカットしました。これで自分が見たい動画を選び、気持ちよく視聴することができます。
少しHTML,CSSの知識がいる部分がありますが、既存の拡張機能を使うだけでも快適にすることができると思います。

目次(今回やったこと)

Hide Youtube Viewers and Ratingsを使って、チャンネル登録数、再生数、コメント欄を非表示にする
Stylebotを使って、その他の見たくない情報(評価数、ショート動画)を非表示にする
Twitch、Twitterなども同じ流れで、ノイズ除去する

- Hide Youtube Viewers and Ratingsを使って、チャンネル登録数、再生数、コメント欄を非表示にする

こちらの拡張機能を使えば、チャンネル登録数、再生数、コメント欄を非表示にすることができます。

インストールしてYoutubeブラウザで適用するだけです。ただ、2023年6月時点で評価数などは非表示にされなかったので、Stylebotという拡張機能を使って、細かい部分を調整します。

Stylebotを使って、その他の見たくない情報(評価数、ショート動画)を非表示にする

StylebotはYoutubeに限らず、WebサイトのCSSを独自でデザインできる拡張機能です。

これを使って、検証ツールで該当するCSSを確認しながら、ひとつひとつ非表示にしていきます。今回は、評価数、ショート動画、ホーム上部のジャンルバーなどを非表示にします。

ショート動画は見ないので、divタグなどを確認して、display: none;を当てていきます

ただ、YoutubeのCSSは階層構造が複雑で、うまく該当箇所だけ非表示にするのが少しむずかしかったです。以下に私のStylebotで適用しているコードを貼っておくので、参考にしてください。

/* サイドバーの非表示 */
ytd-guide-entry-renderer:has(a#endpoint[title="ショート"]) {
  display: none;
}
ytd-guide-entry-renderer:has(a#endpoint[title="Originals"]) {
  display: none;
}

/* 上部のジャンルバーを非表示 */
div#header:has([component-style$="BAR_STYLE_TYPE_DEFAULT"]:not([component-style$="CHANNEL_PAGE_GRID"]) #chips-wrapper) {
  display: none !important;
}
/* ホームのショート動画を非表示 */
ytd-rich-shelf-renderer{
  display: none;
}
tp-yt-paper-item.style-scope.ytd-guide-entry-renderer {
  font-weight: 500;
  font-style: normal;
}

/* 高評価の非表示 */
ytd-toggle-button-renderer{
  display: none;
}

/* 投稿日付前の・を非表示 */
span.inline-metadata-item.style-scope.ytd-video-meta-block::before {
  display: none;
}

/* 概要欄の下のチャンネル説明を非表示 */
ytd-video-description-infocards-section-renderer.style-scope.ytd-structured-description-content-renderer {
  display: none;
}

/* 高評価した動画の再生数を非表示 */
span.style-scope.yt-formatted-string {
  display: none;
}
div#separator.style-scope.ytd-video-meta-block {
  display: none;
}

/* チャンネルヘッダーの登録数を非表示 */
div#metadata.style-scope.ytd-channel-renderer {
  display: none;
}