Chrome extension is not loading on browser navigation at YouTube

by

YouTube has started a trial with pushState-based navigation. In general, such navigations can only be detected within content scripts by injecting code that intercept calls to history.replaceState / history.pushState (or by using the chrome.webNavigation.onHistoryStateUpdated event in the background page).

The remainder of this answer is specific to YouTube.
YouTube shows a (red) progress bar on top of the page during load. This progress bar is animated using a CSS transition. Since transition events bubble, you can bind a transition event listener to <body>, and check navigation in these cases.

You have to insert your content script at *://www.youtube.com/* instead of *://www.youtube.com/watch*, because pushState can be used to navigate from / to /watch...

function afterNavigate() {
    if ('/watch' === location.pathname) {
        alert('Watch page!');
    }
}
(document.body || document.documentElement).addEventListener('transitionend',
  function(/*TransitionEvent*/ event) {
    if (event.propertyName === 'width' && event.target.id === 'progress') {
        afterNavigate();
    }
}, true);
// After page load
afterNavigate();

Note: This method depends on the fact that the progress bar is inserted. Whenever Google decides to rename the ID of the progress bar, or remove the progress bar altogether, your code will cease to work.

Note 2: This only works for active tabs. If you need to detect navigation changes while the tab is not focused, then you need to bind a window.onfocus and window.onblur event, and check whether document.title has changed between these events.

More Related Contents:

  1. Chrome extension content script re-injection after upgrade or install
  2. Chrome extension: accessing localStorage in content script
  3. Optionally inject Content Script
  4. Access window variable from Content Script [duplicate]
  5. Use a content script to access the page context variables and functions
  6. Can you access chrome:// pages from an extension?
  7. Obtaining Chrome Extension ID for development
  8. Port error while changing chrome extension from manifest v1 to v2
  9. Is it possible to require npm modules in a chrome extension ?
  10. My CSS is not getting injected through my content script
  11. Modify HTTP responses from a Chrome extension
  12. sending message to chrome extension from a web page
  13. Permission ” is unknown or URL pattern is malformed
  14. How is the Chrome Extension ID of an unpacked extension generated?
  15. sendMessage from extension background or popup to content script doesn’t work
  16. How do you integrate Universal Analytics in to Chrome Extensions?
  17. Chrome extension login best practices
  18. chrome extension: how to send ‘keydown’ event to page’s input?
  19. Access variables and functions defined in page context using a content script
  20. How to migrate manifest version 2 to v3 for chrome extension?
  21. Does content_scripts matches “chrome-extension://*/*” work?
  22. How to trigger click on a button
  23. Persistent background page on demand or an event page that doesn’t unload?
  24. On page load event in Chrome extensions
  25. Upload a File in a Google Chrome Extension
  26. How to avoid “Extension context invalidated” errors when messaging AFTER an Extension update?
  27. jQuery in Google Chrome Content Script?
  28. Chrome content scripts aren’t working: DOMContentLoaded listener does not execute
  29. Chrome extension: Communication between content script and background.html
  30. How to to initialize keyboard event with given char/keycode in a Chrome extension?

Leave a Comment