Отследить обновление URL | JS

Question

Делаю расширение (Chrome) для сайта с расписанием. Я хочу в JS отследить выбор расписания другой группы. Проблема в том, что сайт написан на blazor SPA.

Я заметил, что при выборе группы, обновляется URL. Например, изначально я открыл расписание группы 623п, и URL был такой: https://education.khai.edu/union/schedule/group/623p, после этого я выбрал группу 512 и URL стал следующим: https://education.khai.edu/union/schedule/group/512.

Пытался отследить изменение URL так:

window.addEventListener('locationchanged', function () {
    console.log('url changed');
});

и так:

window.addEventListener('popstate', function () {
    console.log('url changed');
});

и даже так:

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history);
    console.log('url changed');
};

Однако, ничего из этого не помогло.

Answer 1

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history);
    console.log('url changed');
};

Ну кто ж так патчит? Надо

pushState.apply(this, arguments);

Answer 2

Основываясь на этом ответе, и изменив его под Manifest V3, у меня вышло следующее:

manifest.json:

{
    "manifest_version": 3,
    "background": {
        "service_worker": "scripts/background.js"
    },
    "content_scripts": [
        {
            "js": ["scripts/content.js"]
        }
    ],
    "permissions": [
        "tabs"
    ],
    ...
}

scripts/background.js:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    // отправляем сообщение, когда изменилась URL
    if (changeInfo.url) {
        chrome.tabs.sendMessage(tabId, {
            message: 'url-changed',
            url: changeInfo.url
        });
    }
});

scripts/content.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // реагируем сообщение об изменении URL
    if (request.message === 'url-changed') {
        console.log('new URL is ' + request.url);
    }
});

БЛОГ НА HUSL

Отследить обновление URL | JS

Ответы (2 шт):