Chrome 확장 프로그램의 콘텐츠를 동적으로 업데이트하기 위해 YouTube 페이지 탐색을 어떻게 감지할 수 있나요?

YouTube에서 페이지 탐색을 감지하고 콘텐츠를 원활하게 변경

YouTube에서 동영상의 전체 길이를 계산하고 표시하는 Chrome 확장 프로그램을 개발 중입니다. YouTube 재생목록이지만 스크립트는 페이지를 새로 고친 후에만 작동합니다. 이러한 제한을 극복하려면 페이지 탐색을 원활하게 감지하고 이에 따라 DOM을 수정하는 것이 중요합니다.

페이지 전환을 위한 이벤트 리스너

YouTube는 탐색 중에 페이지를 다시 로드하지 않습니다. 오히려 기록 상태를 대체합니다. 이를 탐지하기 위해 여러 가지 방법을 사용할 수 있습니다.

• 백그라운드 페이지: 백그라운드 페이지 또는 MV3 서비스 워커에서 webNavigation 또는 tabs 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 process() {
  if (!location.pathname.startsWith('/playlist')) {
    return;
  }
  // Process logic to gather and display total playlist length here
}

'yt-navigate-start' 이벤트를 활용하고 필요한 스크립트 로직을 구현하면 YouTube의 페이지 탐색을 효과적으로 감지하고 이에 응답할 수 있으며, 없이 페이지 콘텐츠를 원활하게 업데이트할 수 있습니다. 지연이나 페이지 새로 고침.

위 내용은 Chrome 확장 프로그램의 콘텐츠를 동적으로 업데이트하기 위해 YouTube 페이지 탐색을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!