Bagaimanakah Saya Boleh Mengesan Navigasi Halaman YouTube untuk Mengemas kini Kandungan Sambungan Chrome Secara Dinamik?

Mengesan Navigasi Halaman di YouTube dan Mengubah Kandungan Dengan Lancar

Anda sedang membangunkan sambungan Chrome untuk mengira dan memaparkan jumlah panjang video dalam senarai main YouTube, tetapi skrip hanya beroperasi selepas halaman dimuat semula. Untuk mengatasi had ini, adalah penting untuk mengesan navigasi halaman dengan lancar dan mengubah suai DOM dengan sewajarnya.

Pendengar Acara untuk Peralihan Halaman

YouTube tidak memuatkan semula halaman semasa navigasi, sebaliknya menggantikan keadaan sejarah. Untuk mengesan ini, beberapa kaedah tersedia:

• Halaman Latar Belakang: Gunakan webNavigation atau API tab dalam halaman latar belakang atau pekerja perkhidmatan MV3.
• Skrip Kandungan dengan Acara Navigatesuccess: Acara ini tersedia dalam moden Chrome.
• Skrip Kandungan dengan Acara Tersuai YouTube: YouTube mencetuskan acara 'yt-navigate-start' semasa navigasi.

Menggunakan 'yt-navigate acara -mula' menyediakan pendekatan yang lebih responsif untuk mengubah kandungan secara dinamik.

Pelaksanaan

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);

proses Fungsi:

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

Dengan memanfaatkan acara 'yt-navigate-start' dan melaksanakan logik skrip yang diperlukan, anda boleh mengesan dan bertindak balas dengan berkesan pada navigasi halaman di YouTube, mengemas kini kandungan halaman dengan lancar tanpa sebarang kelewatan atau penyegaran halaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Navigasi Halaman YouTube untuk Mengemas kini Kandungan Sambungan Chrome Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!