osuAvatarOpen.js

// ==UserScript==
// @name         osuAvatarOpen
// @namespace    https://aesth.dev/
// @version      0.3
// @updateURL    https://gist.githubusercontent.com/NiceAesth/1ff313dc60bec626bceffecc9c509382/raw
// @downloadURL  https://gist.githubusercontent.com/NiceAesth/1ff313dc60bec626bceffecc9c509382/raw
// @description  Opens a user's osu! avatar on click
// @author       NiceAesth
// @match        https://osu.ppy.sh/users/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @require      https://gist.githubusercontent.com/NiceAesth/eec6a9fd695ea6c3574b21fe05b8aef8/raw
// @resource     IMPORTED_CSS https://gist.githubusercontent.com/NiceAesth/e0c2378e2ef2b88e5d9c6d3547dcff0b/raw
// @grant        GM_getResourceText
// @grant        GM_addStyle
// ==/UserScript==

function onModalClick () {
    var modal = document.querySelector(".avatar-modal");
    modal.style.display = "none";
}

function onAvatarClick (event) {
    var avatarImg = event.target || event.srcElement;
    var modal = document.querySelector(".avatar-modal");
    var modalImg = document.querySelector(".avatar-modal-content");
    var avatarImgStyle = avatarImg.currentStyle || window.getComputedStyle(avatarImg, false)
    var avatarImgUrl = avatarImgStyle.backgroundImage.slice(4, -1).replace(/"/g, "");
    modal.style.display = "block";
    modalImg.src = avatarImgUrl;
}

function loadListener () {
    var page = document.querySelector(".osu-layout");
    var avatar = document.querySelector(".profile-info__avatar");

    // Ignore if on own profile
    if(avatar.href) {
        return;
    }

    var modal = document.createElement("div");
    modal.setAttribute("class", "avatar-modal");

    var modalContent = document.createElement("img");
    modalContent.setAttribute("class", "avatar-modal-content");

    modal.appendChild(modalContent);
    page.appendChild(modal);

    avatar.addEventListener("click", onAvatarClick);
    modal.addEventListener("click", onModalClick);
}

waitForKeyElements (".profile-info__avatar", loadListener);
const customcss = GM_getResourceText("IMPORTED_CSS");
console.log(GM_addStyle(customcss));