Расширение Chrome не загружается в браузере на YouTube

Скажем, у меня есть расширение, которое загружается, когда вы приходите на страницу видео YouTube. Я заметил, что, когда вы перемещаетесь вперед и назад с помощью кнопок Chrome, расширение, скорее всего, не будет загружено.

В качестве примера у меня есть 2 файла, манифест:

{
    "name": "back forth",
    "version": "0.1",
    "manifest_version": 2,
    "description": "back forth",
    "permissions": ["storage", "*://www.youtube.com/watch*"],
    "content_scripts": [
        {
            "matches": ["*://www.youtube.com/watch*"],
            "js": ["contentscript.js"]
        }
    ]
}

и содержание

alert("loaded");

Предупреждение не всегда отображается при навигации взад и вперед. Как я могу это преодолеть, так что расширение увеличивается каждый раз?

Ответы

Ответ 1

YouTube начал пробную версию с помощью навигации на основе pushState. В общем, такие навигации можно обнаружить только в сценариях контента, введя код, который перехватывает вызовы на history.replaceState/history.pushState (или используя chrome.webNavigation.onHistoryStateUpdated на странице фона).

Остальная часть этого ответа специфична для YouTube.
На YouTube во время загрузки на YouTube отображается красная полоса выполнения. Этот индикатор выполнения анимируется с использованием перехода CSS. Поскольку пузырь событий перехода, вы можете связать прослушиватель событий перехода с <body> и проверить навигацию в этих случаях.

Вы должны вставить свой контент script в *://www.youtube.com/* вместо *://www.youtube.com/watch*, потому что pushState можно использовать для перехода от / в /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();

Примечание. Этот метод зависит от того, вставлен ли индикатор выполнения. Всякий раз, когда Google решает переименовать идентификатор строки выполнения или полностью удалить индикатор выполнения, ваш код перестанет работать.

Примечание 2: Это работает только для активных вкладок. Если вам необходимо обнаружить изменения навигации, пока вкладка не сфокусирована, вам необходимо привязать событие window.onfocus и window.onblur и проверить, изменилось ли document.title между этими событиями.