YouTubeでサジェストされる関連動画を非表示にする拡張機能を開発してみた

はじめに

世の中には仕事や研究の合間に「ちょっとYouTubeでも見て休憩しよう」とブラウザを開き、気がついたら貴重な数時間を無駄にしていたなんていう愚行を犯す人がいます。そうです、私のことです。
YouTubeではユーザーの興味を持ちそうな関連動画をサジェストし、できる限りサイト内にとどまらせようとする悪魔の仕組みが備わっています。今回はこれを非表示する拡張機能を作ってみました。

作ったもの

成果物はchromeウェブストアに公開しております。

機能

主な機能としては

• サイドバーや動画のエンド画面にサジェストされる関連動画を非表示
• 自動再生機能のオフ

の2つになります。こんな感じ。

注意として、動画のエンドカードは非表示にできません。今後対応していきたいと思います。

サジェスト動画を非表示する処理

そこまで複雑な処理は必要としません。JavaScriptで要素を取得して、CSSをあてるだけです。

非表示したい要素を取得します。

const getRelatedElements = () => {
    const related = document.getElementById('related');
    const secondaryInner = document.getElementById('secondary-inner');
    const endScreen = document.querySelector('.ytp-endscreen-content');

    return [related, secondaryInner, endScreen].filter(Boolean);
};

取得した要素にdisplayプロパティにnoneを適応します。

function hideRelatedVideos() {
    const elements = getRelatedElements();
    elements.forEach(element => {
        if (element) {
            element.style.display = 'none';
        }
    });
}

感想

アウトプット学習の一環として、拡張機能を開発・公開するところまでをやってみました。
拡張機能開発なんて遠い存在だと思っていましたが、シンプルなものであれば案外あっさりできました。心理的ハードルがかなり下がりましたね。
アイディアがあれば、今後もやっていきたいと思います。

参考