Расширение 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 показывает (красный) индикатор выполнения в верхней части страницы во время загрузки. Этот индикатор выполнения анимируется с помощью CSS-перехода. Так как события перехода всплывают, вы можете привязать слушателя события перехода к <body> и проверьте навигацию в этих случаях.

Вы должны вставить свой контент-скрипт в *://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 изменился между этими событиями.

Источник
Другие вопросы по тегам