YouTube ページ ナビゲーションを検出して Chrome 拡張機能のコンテンツを動的に更新するにはどうすればよいですか?

YouTube でのページ ナビゲーションの検出とコンテンツのシームレスな変更

あなたは、動画の合計の長さを計算して表示する Chrome 拡張機能を開発しています。 YouTube プレイリストですが、スクリプトはページが更新された後にのみ動作します。この制限を克服するには、ページ ナビゲーションをシームレスに検出し、それに応じて DOM を変更することが重要です。

ページ遷移のイベント リスナー

YouTube はナビゲーション中にページをリロードしません。むしろ、履歴状態を置き換えます。これを検出するには、いくつかの方法が利用可能です:

• バックグラウンド ページ: バックグラウンド ページまたは MV3 サービス ワーカーで webNavigation またはタブ API を使用します。
• Navigatesuccess イベントを含むコンテンツ スクリプト: このイベントはモダンで利用可能ですChrome。
• YouTube のカスタム イベントを使用したコンテンツ スクリプト: YouTube は、ナビゲーション中に「yt-navigate-start」イベントをトリガーします。

「yt-navigate」の使用-start' イベントは、コンテンツを変更するためのより応答性の高いアプローチを提供します

実装

マニフェストt.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:

function process() {
  if (!location.pathname.startsWith('/playlist')) {
    return;
  }
  // Process logic to gather and display total playlist length here
}

「yt-navigate-start」イベントを活用し、必要なスクリプト ロジックを実装することで、YouTube でのページ ナビゲーションを効果的に検出して応答し、ページ コンテンツをシームレスに更新できます。遅延やページの更新。

以上がYouTube ページ ナビゲーションを検出して Chrome 拡張機能のコンテンツを動的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。