Detect changes on the url

Question

I need something to detect changes on the url but the page doesn't do post back, it changes dynamically adding just the div inside the html, so the URL page is something like this

http://www.examplepage/conversations/44455

and when I click on another section of the page it it is

http://www.examplepage/conversations/44874

it changes not only at the end but like this

http://www.examplepage/settings

without doing post back and reloading the javascript so my question is, is there a way to detect those changes? and event listener but how?

I search and everyone says hash event but I don't have any value after any hash so it doesn't work

EDIT

Just for the record I have no code of the page nor I have access, I'll explain better, I am doing a background google extension and I just added a slide out to an existing page, this page changes its url the way I explained above. the url changes like every page does, but they change the div inside the html so that the page doesn't have to charge everything again

Answer 1

For supported browsers, you can use the navigation.addEventListener("navigate", callback) to detect changes in the URL.

navigation.addEventListener("navigate", e => {
    console.log(e.destination.url);
});

Otherwise you will need to store the URL when the page loads as a starting point and setInterval to check for changes and modify based on that.

The following code does this check every 500ms:

// store url on load
let currentPage = location.href;

// listen for changes
setInterval(function()
{
    if (currentPage != location.href)
    {
        // page has changed, set new page as 'current'
        currentPage = location.href;
        
        // do your thing..
    }
}, 500);