Add background video to certain user profiles?

Development
2

Our current approach is to see if we can simply detect we’re on a certain user’s page via the canonical link, and if we are, to apply the video. As such, we have the following:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() =>{
        determineUser();
    });
    
    function determineUser() {
        var pageURL = document.querySelector("link[rel='canonical']").getAttribute("href");
        var isUserPage = pageURL.includes("https://www.fortressoflies.com/u/");
        document.documentElement.style.setProperty('--currUsername', pageURL);
        if(isUserPage)
        {
            document.documentElement.style.setProperty('--lastUsername', pageURL);
            $('body').css('background-color', '#'+(Math.random()*0xFFFFFF<<0).toString(16));
        }
    }
</script>

However, this only seems to work on a full refresh - for whatever reason, clicking around from page to page doesn’t update the --currUsername property, and instead of applying a random color background to user pages, it applies a random color background to all pages if F5 was last hit on a user page, while applying nothing to any page if F5 was last hit on a non-user page.

I’m frankly not experienced enough with JavaScript to know why that would be the case - it seems to me that, on a page change, the function should fire (which it does), causing the pageURL variable to be updated, and this should cause the --currUsername property to be updated when loading a page. However, this only occurs on a full refresh, otherwise the variables don’t seem to change.

Any idea what I’m messing up here?