특정 사용자 프로필에 배경 영상을 추가할 수 있나요?

개발
2

현재 우리의 접근 방식은 canonical 링크를 통해 특정 사용자의 페이지에 있는지 단순히 감지하고, 그렇다면 해당 비디오를 적용하는 것입니다. 이를 위해 다음 코드를 사용하고 있습니다:

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

하지만 이 방법은 전체 새로고침(full refresh) 시에만 작동하는 것 같습니다. 어떤 이유에서인지 페이지를 이동하며 클릭할 때 --currUsername 속성이 업데이트되지 않습니다. 그 결과, 사용자 페이지에 무작위 색상의 배경을 적용하는 대신, 마지막에 F5 키를 누른 페이지가 사용자 페이지였다면 모든 페이지에 무작위 색상의 배경이 적용되고, 마지막에 F5 키를 누른 페이지가 사용자 페이지가 아니었다면 어떤 페이지에도 배경이 적용되지 않습니다.

솔직히 JavaScript에 대해 충분히 숙련되지 않아서 왜 그런지 알지 못합니다. 제 생각에는 페이지 변경 시 함수가 실행되어야(실제로도 실행됩니다) pageURL 변수가 업데이트되고, 이는 페이지 로드 시 --currUsername 속성이 업데이트되어야 합니다. 하지만 전체 새로고침 시에만 이러한 일이 발생하며, 그렇지 않으면 변수가 변경되지 않는 것으로 보입니다.

여기서 제가 무엇을 잘못하고 있는지 아는 분이 계신가요?