إضافة فيديو خلفية لملفات تعريف مستخدمين معينة؟

نهجنا الحالي هو معرفة ما إذا كان بإمكاننا ببساطة اكتشاف أننا على صفحة مستخدم معين عبر الرابط الأساسي، وإذا كنا كذلك، فسنقوم بتطبيق الفيديو. على هذا النحو، لدينا ما يلي:

<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 عند تحميل صفحة. ومع ذلك، يحدث هذا فقط عند التحديث الكامل، وإلا فإن المتغيرات لا تتغير على ما يبدو.

هل لديك أي فكرة عما أفسده هنا؟