Enhancer for YouTubeでミニプレイヤーで動画を見ながらタイムスタンプをクリックしたときに勝手にスクロールされなくする

はじめに

拡張機能Enhancer for YouTubeを導入すると、Youtubeがめっちゃ便利になります。
この機能の一つにミニプレイヤーというものがあり、下にスクロールすると動画が固定位置で再生されるので、動画を見ながらコメントや関連動画を確認できます。

しかし、タイムスタンプをクリックすると勝手に一番上までスクロールされます。
コメント欄の続きを確認したいときに、下まで再度スクロールする必要があり、大変不便。
この挙動を回避すべく調べたところ、シンプルな解決方法を見つけたので備忘録として残します。

解決方法

1. Enhancer for YouTubeの設定画面を開き、カスタムスクリプトに以下のコードを貼り付けて保存
2. 「YouTubeがタブに読み込まれたときに自動的にスクリプトを実行する」のチェックボックスを有効化

Copied!

document.addEventListener('click', (event) => {
    // クリックされた要素がリンクであるか確認
    const target = event.target;
    if (target.tagName !== 'A') return;

    // YouTubeのリンクであるか確認
    const isYouTubeLink = target.href.includes('youtube.com/watch');
    if (!isYouTubeLink) return;

    // 同じ動画かどうかを確認
    const currentVideoId = new URL(window.location.href).searchParams.get('v');
    const targetVideoId = new URL(target.href).searchParams.get('v');
    if (currentVideoId !== targetVideoId) return;

    // タイムスタンプが含まれているか確認
    const hasTimestamp = new URL(target.href).searchParams.has('t');
    if (!hasTimestamp) return;

    event.preventDefault();  // デフォルトのリンク動作を無効化
    event.stopPropagation(); // イベントのバブリングを停止

    // 動画要素を取得
    const videoElement = document.querySelector('video');
    if (!videoElement) return;

    // タイムスタンプを取得
    const timestamp = new URL(target.href).searchParams.get('t');
    if (!timestamp) return;

    // 非数値文字を取り除いて数値に変換
    const timeInSeconds = parseFloat(timestamp.replace(/[^\d]/g, ''));
    if (isNaN(timeInSeconds)) return;

    // 動画の再生位置を設定して再生
    videoElement.currentTime = timeInSeconds;
    videoElement.play();
}, true);

これにより、タイムスタンプをクリックしても勝手にスクロールされなくなります。