📺

YouTube の連続視聴を防止するための User Script

2021/07/18に公開

JavaScript

YouTube

userscript

tech

最近、無限に YouTube を見てしまい時間を溶かしまくっています😇 このままではアカンと連続視聴防止のための UserScript を書いてみました。

何を作った？

以下の機能をもつ UserScript です。

YouTube の視聴ページの広告やコメントを非表示
YouTube の視聴完了時の自動再生をキャンセル
YouTube の視聴完了時の広告を非表示にする

Before
適応前の YouTube 視聴ページがこちらです。
サイドバーのリコメンドから、視聴完了のリコメンドまで気になる情報がありまくりですね。見終わったら（むしろ見てる途中から）次の動画に行きたい欲が湧いてきます。

視聴中	視聴完了

After
適応後の YouTube 視聴ページがこちらです。
サイドバーとコメントが消えてスッキリしています。今の動画に全集中できます。
さらに視聴完了時にも次の動画は自動で始まらず、広告も表示されません。

視聴中	視聴完了

Install方法

UserScript を管理できる拡張機能をブラウザに追加してください。

Chrome の場合

Firefox の場合

その後、以下リンクをクリックして UserScript を Install すれば可能です。

実装

実装はこちらです。

// ==UserScript==
// @name         Hide youtube recommendations
// @namespace    https://github.com/kawamataryo/userscripts
// @version      1.0.1
// @description  try to take over the world!
// @author       kawamataryo
// @match        https://www.youtube.com/watch?v=*
// @grant        none
// @icon         https://www.youtube.com/s/desktop/a910c60b/img/favicon_96x96.png
// @updateURL    https://github.com/kawamataryo/userscripts/raw/main/src/hide-youtube-recommendations.user.js
// @downloadURL  https://github.com/kawamataryo/userscripts/raw/main/src/hide-youtube-recommendations.user.js
// ==/UserScript==

const toDisplayNone = (el) => {
  if (!el) {
    return;
  }
  el.style.display = "none";
};

(function () {
  console.log("Enabled hide youtube recommendations.");

  // Stop next video when video ended
  const video = document.querySelector(
    "#movie_player > div.html5-video-container > video"
  );
  if (video) {
    video.addEventListener("ended", () => {
      const cancelBtn = document.querySelector(
        ".ytp-autonav-endscreen-button-container > button"
      );
      if (cancelBtn) {
        cancelBtn.click();
      }

      const endedContent = document.querySelector(".ytp-endscreen-content");
      toDisplayNone(endedContent);
    });
  }

  // Hide sidebar
  const primary = document.querySelector("#primary");
  const sidebar = document.querySelector("#secondary");
  if (primary && sidebar) {
    primary.style.maxWidth = `${primary.clientWidth}px`;
    toDisplayNone(sidebar);
  }

  // Hide meta
  const meta = document.querySelector("#meta");
  toDisplayNone(meta);

  // Hide comments
  const comments = document.querySelector("#comments");
  toDisplayNone(comments);
})();

サイドバーのリコメンドやプレイヤー下部のコメントは display: none で単純に隠しているだけです。
視聴完了時の自動キャンセルと、動画の非表示は video タグにendedイベントのリスナーを登録して操作しています。

  const video = document.querySelector(
    "#movie_player > div.html5-video-container > video"
  );
  if (video) {
    video.addEventListener("ended", () => {
      const cancelBtn = document.querySelector(
        ".ytp-autonav-endscreen-button-container > button"
      );
      if (cancelBtn) {
        cancelBtn.click();
      }

      const endedContent = document.querySelector(".ytp-endscreen-content");
      toDisplayNone(endedContent);
    });
  }

終わりに

これで YouTube を無駄に見る時間が減る（はず）！

何を作った？

Install方法

実装

終わりに

Discussion