Hello, Roblox! Userscript edition

helloroblox.js

// ==UserScript==
// @name         Hello, Roblox! Userscript edition
// @version      0.2
// @description  Adds back the greeting text on the home page that was present up until around 2021.
// @connect      roblox.com
// @author       infinite health
// @run-at       document-start
// @match        https://www.roblox.com/home
// @icon         https://www.google.com/s2/favicons?sz=64&domain=roblox.com
// @downloadURL  https://gist.githubusercontent.com/nodomw/339efcd67005f6bb7a1d0147e50adbd8/raw/helloroblox.js
// @updateURL    https://gist.githubusercontent.com/nodomw/339efcd67005f6bb7a1d0147e50adbd8/raw/helloroblox.js
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(async function() {
    'use strict';

    const GREETER_PREFIX = "Hello, "; // part that comes before the name. it is advised to put a space at the end
    const GREETER_SUFFIX = "!"; // part that comes after. leave empty if you don't want anything in it
    const CUSTOM_NAME = "" // set this to anything other than "" to have it display a certain name
    const DISPLAY_AVATAR = true; // wether to display the user avatar or not
    const USE_DISPLAYNAME = true; // show display name instead of user name, overwritten by CUSTOM_NAME
    const FORCE_PREMIUM = false; // show the premium icon regardless of current subscription status

    async function GetEndpoint(url)
    {
        const r = await GM.xmlHttpRequest({ url: url }).catch(e => console.error(e))
        return JSON.parse(r.responseText)
    }

    // don't do unnessecary requests if possible
    let UserData;
    let UserAvatar;
    let IsPremium;

    if (DISPLAY_AVATAR || !FORCE_PREMIUM || !CUSTOM_NAME) {
        UserData = await GetEndpoint("https://users.roblox.com/v1/users/authenticated")
    }

    if (DISPLAY_AVATAR) {
        UserAvatar = (await GetEndpoint(`https://thumbnails.roblox.com/v1/users/avatar-headshot?userIds=${UserData.id}&size=420x420&format=Png&isCircular=false`)).data[0].imageUrl
    }

    if (!FORCE_PREMIUM) {
        IsPremium = await GetEndpoint(`https://premiumfeatures.roblox.com/v1/users/${UserData.id}/validate-membership`)
    }

    let Container = document.querySelector('#HomeContainer > div.section > div')
    let Title = document.querySelector('#HomeContainer > div.section > div > h1')
    let PremiumIcon = '<span style="margin-left: 6px; display: flex;" title="premium icon" class="premium-badge-right-aligned"><span class="icon-premium-medium"></span></span>'

    // thank god for domparser i dont know where i would be without it
    let Avatar = new DOMParser().parseFromString(`
                  <a id="HomeAvatar" href="/users/profile"> <span class="text-nav avatar avatar-headshot-lg" style="float: left;margin-top: -60px;">
                    <span class="thumbnail-2d-container avatar-card-image">
                      <img class="" src="${UserAvatar}" alt="${CUSTOM_NAME ? CUSTOM_NAME : (USE_DISPLAYNAME ? UserData.displayName : UserData.name)}" title="${CUSTOM_NAME ? CUSTOM_NAME : (USE_DISPLAYNAME ? UserData.displayName : UserData.name)}">
                    </span>
                  </span></a>`,
    'text/html').getElementById("HomeAvatar"); // snatch the element out because domparser makes a whole separate dom

    // style the text
    Title.classList.add("header-title")
    Title.style.display = "flex"
    Title.style["align-items"] = "center"

    if (DISPLAY_AVATAR) {
        Title.style.position = "relative"
        Title.style.height = "fit-content"
        Title.style.left = "160px"
        Title.style.top = "1.2em"

        Container.insertBefore(Avatar, Title.nextSibling)
    }

    Title.innerHTML = `${GREETER_PREFIX}${CUSTOM_NAME ? CUSTOM_NAME : (USE_DISPLAYNAME ? UserData.displayName : UserData.name)}${GREETER_SUFFIX}${IsPremium ? PremiumIcon : (FORCE_PREMIUM ? PremiumIcon : "")}`
})();