如何偵測 YouTube 頁面導航以動態更新 Chrome 擴充功能的內容？

偵測YouTube 上的頁面導航並無縫更改內容

您正在開發一個Chrome 擴充程式來計算和顯示影片的總長度YouTube 播放列表，但該腳本僅在頁面刷新後運行。為了克服這一限制，無縫檢測頁面導航並相應地修改 DOM 至關重要。

頁面轉換的事件偵聽器

YouTube 在導覽期間不會重新載入頁面，而是取代歷史狀態。若要偵測此問題，可以使用多種方法：

• 後台頁面：在後台頁面或 MV3 Service Worker 中使用 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 process() {
  if (!location.pathname.startsWith('/playlist')) {
    return;
  }
  // Process logic to gather and display total playlist length here
}

利用'yt-navigate-start' 事件並實現必要的腳本邏輯，您可以有效地偵測和回應 YouTube 上的頁面導航，無縫更新頁面內容，而無需任何延遲或頁面刷新。

以上是如何偵測 YouTube 頁面導航以動態更新 Chrome 擴充功能的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！