YouTube ページ ナビゲーションをシームレスに検出して変更するにはどうすればよいですか?

シームレスなページ変更を YouTube ナビゲーションに統合する

YouTube でのページ ナビゲーションの検出

従来とは異なりナビゲーション時にページをリロードする Web サイトに対して、YouTube は履歴の状態を置き換えてコンテンツを回避する技術を採用しています。

ページ遷移検出の方法

YouTube でページ遷移を検出するには、次の方法を検討してください:

• 背景スクリプト (MV3 Service Worker): webNavigation API またはタブを利用しますAPI。
• コンテンツ スクリプトと navigatesuccess イベント: 最新の Chrome で利用可能。
• コンテンツ スクリプトと YouTube のカスタム イベント: 'yt-navigate を利用する-start' または 'yt-navigate-finish'イベント。

の実装解決策

manifest.json:

{
  "matches": ["*://*.youtube.com/*"],
  "js": ["content.js"],
  "run_at": "document_start"
}

content.js:

document.addEventListener('yt-navigate-start', process);
if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);

ページの処理関数変更:

function process() {
  if (!location.pathname.startsWith('/playlist')) return;
  var seconds = [...document.getElementsByClassName('timestamp')]
    .reduce((sum, ts) => {
      const minsec = ts.textContent.split(':');
      return sum + minsec[0] * 60 + minsec[1] * 1;
    }, 0);

  if (!seconds) {
    console.warn('Empty playlist');
    return;
  }

  const timeHMS = new Date(seconds * 1000)
    .toUTCString()
    .split(' ')[4]
    .replace(/^[0:]+/, '');

  document
    .querySelector('.pl-header-details')
    .insertAdjacentHTML('beforeend', `<li>Length: ${timeHMS}</li>`);
}

以上がYouTube ページ ナビゲーションをシームレスに検出して変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。