>웹 프론트엔드 >JS 튜토리얼 >YouTube 페이지 탐색을 원활하게 감지하고 수정하려면 어떻게 해야 합니까?

YouTube 페이지 탐색을 원활하게 감지하고 수정하려면 어떻게 해야 합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-04 05:24:11218검색

How Can I Detect and Modify YouTube Page Navigation Seamlessly?

YouTube 탐색에 원활한 페이지 수정 통합

YouTube에서 페이지 탐색 감지

기존과 달리 탐색 시 페이지를 다시 로드하는 웹사이트에서 YouTube는 콘텐츠 스크립트를 피하고 기록 상태를 대체하는 기술을 사용합니다. 재삽입.

페이지 전환 감지 방법

YouTube에서 페이지 전환을 감지하려면 다음 방법을 고려하세요.

  • 백그라운드 스크립트 (MV3 Service Worker): webNavigation API나 탭을 활용하세요 API.
  • 콘텐츠 스크립트 및 탐색성공 이벤트: 최신 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.