シームレスな HTML 挿入のために YouTube ページ ナビゲーションを検出するにはどうすればよいですか?

シームレスな HTML 挿入のための YouTube ページ ナビゲーションの検出

YouTube ページの外観をシームレスに変更することは、特にページ ナビゲーションが関係する場合に困難になることがあります。 。これは、スクリプトがページの更新後にのみ機能し、サイトのナビゲーション時には機能しない場合に顕著になります。

この問題に対処するには、YouTube でのページ ナビゲーションを検出することが重要です。ナビゲーション時に再読み込みされる従来の Web ページとは異なり、YouTube では履歴状態が置き換えられ、コンテンツ スクリプトの再挿入が無効になります。

幸いなことに、YouTube ではページ遷移を検出する方法がいくつか存在します。

1.バックグラウンド ページまたは Service Worker スクリプト

バックグラウンド ページまたは MV3 Service Worker スクリプトで webNavigation またはタブ API を使用します。

2.コンテンツ スクリプトと navigatesuccess イベント

navigatesuccess イベントをリッスンする最新の Chrome のコンテンツ スクリプトを利用します。

3.コンテンツ スクリプトと YouTube のナビゲーション イベント

YouTube には、ビデオ ナビゲーション専用のイベント yt-navigate-start があります。このイベントはページ遷移の検出に最適です。

を使用して実装します。 yt-navigate-start

manifest.json

{
  "name": "YouTube Playlist Length",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": ".............",
  "content_scripts": [{
      "matches": [ "http://*.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() {
  // Code to alter the page
}

yt-navigate-start イベントを使用すると、コンテンツ スクリプトはページ ナビゲーションを検出し、変更することができます。 HTML をシームレスに作成し、遅延やページの更新の必要性を排除します。

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