Automatically adds color-coded level information (Apprentice, Practitioner, Expert) to PortSwigger's Web Security Academy "All labs" page

ColorMyWSA.js

/*
Inspired by this post https://www.deepfryd.com/burp-academy-apprentice/

How to use:
1) Browse to https://portswigger.net/web-security/all-labs.
2) Open your web browser's Developer tools by pressing 'F12' on your keyboard.
3) Click on the console tab.
4) Paste the following Javascript code into the console's prompt and hit 'Enter' on the keyboard.
5) Wait for all the labs to be updated with their respective levels (Tested ~12s)

If you have browser extensions that allow for execution of scripts, you can also use it to automatically load the following Javascript code.

Edit: Added a "sleep" so that we don't end up DDoSing the website. (Wait time ended up dropping from 50s to 12s!)
*/

const labs = [...document.getElementsByClassName("widgetcontainer-lab-link")]
    .map(lab_container => [lab_container, lab_container.getElementsByTagName("a")[0].getAttribute("href")]);

const mapping = {
    'APPRENTICE': '#70d16d',
    'PRACTITIONER': '#4cc1ff',
    'EXPERT': '#ae75c3'
}

// Reference from https://stackoverflow.com/a/55307863
const sleep = ms => new Promise(res => setTimeout(res, ms));

(async function() {
    for (const idx in labs) {
        const [lab_container, url] = labs[idx];
        fetch(url)
            .then(response => response.text())
            .then(data => {
                // Get level from the retrieved HTML content
                let level = data.match(/<span>(APPRENTICE|PRACTITIONER|EXPERT)<\/span>/)[1];
                // Get the "LAB" span element
                let lab_element = lab_container.getElementsByTagName("span")[0];
                // Update style
                lab_element.style.backgroundColor = mapping[level];
                lab_element.innerText = level + " LAB";
                lab_element.style.width = "13em";
            });
        await sleep(50);
    }
})();

Thanks for the contribution good work 👍