How to load a JS script when the page is not cached?

Question

I’m developing an extension (just for me for now) for Microsoft Edge Chromium that changes the Github source, but it doesn’t change when I reset the page cache, here’s the script I made (it’s just it and nothing else), it works perfectly, the only thing is that it does not perform sometimes:

window.onload = function()
{
    let blob_num = document.getElementsByClassName('blob-num');
    for (let i = 0; i < blob_num.length; ++i)
        blob_num.item(i).style.fontFamily = "Cascadia Mono";
        
    let blob_code_inner = document.getElementsByClassName("blob-code-inner");
    for (let i = 0; i < blob_code_inner.length; ++i)
    {
        let blob_code_inner_style = blob_code_inner.item(i).style;
        
        blob_code_inner_style.fontFamily = "Cascadia Mono";
        blob_code_inner_style.fontSize = "11px";
    }
}

For those who didn’t understand, here’s the thing, I log into some file on Github, and the script runs normally, but if I press Ctrl + R to reset the cache and reload the page, or log into some page I’ve never logged into before on Github, the script doesn’t run, I’ve tried a few things besides the property window.onload, such as the document.addEventListener("DOMContentLoad", ...); and some others that I don’t remember at the moment, but which also didn’t work :/

How do I make it work? I’m not good at JS, but I hope I’ve been clear enough

Answer 1

How are you trying to run this script?

You are opening the developer tools and running it?

If so, the script will not persist at all, it has nothing to be done.

---

Now at the risk of trying to solve a problem that is not your case if you want to have a persistent user script running on a particular site, what you need is a script manager like Greasemonkey or Tampermonkey.

On it you can declare a Javascript code to run on a given page every time it is loaded through meta script information, for example:

// ==UserScript==
// @name         GitHub Font
// @version      1.0
// @description  Troca a fonte do Github para Cascadia Mono
// @author       Luiz Fernando
// @match        https://github.com/*
// @run-at       document-start
// ==/UserScript==

With this meta information you would have a script running every time you access a page with the URL https://github.com/*. In this case the asterisk is a wildcard, which means that any page that starts with https://github.com/ will be valid for this script.

You can be more specific using https://github.com/github/* for example.

---

Now as to the script to change the font, perhaps it would also be better to take another approach, because if you are going to select elements on the page to change their style via Javascript, you will only be able to change the elements that are already loaded at the time you ran the code.

To change the style of all elements, which are already loaded, and which will still load, it would be more practical to attach a style on the page declaring the style of these elements. Something like

// ==UserScript==
// @name         GitHub Font
// @version      1.0
// @description  Troca a fonte do Github para Cascadia Mono
// @author       Luiz Fernando
// @match        https://github.com/*
// @run-at       document-start
// ==/UserScript==

(function() {
    const style = document.createElement('style');
    style.innerText += '.blob-num { font-family: "Cascadia Mono" !important; }';
    style.innerText += '.blob-code-inner { font-family: "Cascadia Mono" !important; font-size: 11px !important; }';
    document.head.append(style);
})();

And this would be an example of a user script to change the page font.