为特定用户个人资料添加背景视频?

我们目前的方法是查看我们是否可以通过规范链接检测到我们是否在某个用户的页面上,如果是,则应用视频。因此,我们有以下内容:

<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>

但是,这似乎只在完全刷新时才有效 - 不知何故,从一页点击到另一页不会更新 --currUsername 属性,并且用户页面的背景色不是随机应用,而是如果最后一次按 F5 键是在用户页面上,则所有页面的背景色都是随机应用的,而如果最后一次按 F5 键是在非用户页面上,则任何页面都没有应用。

坦白说,我对 JavaScript 没有足够的经验,不知道为什么会这样——在我看来,在页面更改时,函数应该触发(它确实触发了),导致 pageURL 变量被更新,这应该会在加载页面时导致 --currUsername 属性被更新。但是,这只在完全刷新时发生,否则变量似乎不会改变。

有什么想法知道我在这里搞砸了什么吗?