VRChat Credits in Dollars (User Script) v0.1.3

VRChatCreditsInDollars.user.js

// ==UserScript==
// @name        VRChat Credits in Dollars
// @namespace   rest.armagan
// @icon        https://assets.vrchat.com/www/favicons/favicon-32x32.png
// @version     0.1.3
//
// @match       https://vrchat.com/home/*
// @grant       none
//
// @author      TheArmagan (kiracarmaganonal@gmail.com)
// ==/UserScript==

const VRCHAT_CREDIT_ICON_SELECTOR = 'span[title="VRChat Credits"]';

const vcredExtact1 = (span) => {
  const parent = span.parentElement;
  const neighbours = [...parent.childNodes];
  const spanIndex = neighbours.findIndex(i => i === span);
  const nextToIt = neighbours.find((e, i) => i >= spanIndex && e.nodeName === "#text");

  if (!nextToIt) {
      console.log("Unable to find text node next to 'VRChat Credits' logo.", span, parent);
      return;
  }

  return parseInt(nextToIt.textContent.replace(/[^0-9]+/,"").trim());
}

const vcredExtact2 = (span) => {
  const splited = span.parentElement.textContent.split(" ");
  const cleanNumber = splited?.[1]?.match(/^[0-9.,]+/)?.[0]?.replace(/[.,]/g, "");
  return parseInt(cleanNumber);
}

const postfixDollar = (span) => {
    const parent = span.parentElement;

    const credits = [vcredExtact1(span) || 0, vcredExtact2(span) || 0].sort((a, b) => b - a)[0];

    if (!credits) return;

    let amountContainer = parent.querySelector('[data-avrc-credits]');
    if (!amountContainer) {
        amountContainer = document.createElement("span");
        amountContainer.setAttribute("data-avrc-credits", "-1");
        amountContainer.setAttribute("style", `font-size: 0.75em; opacity: 0.75; margin-left: 0.25em;`);
        parent.appendChild(amountContainer);
    }
    amountContainer.setAttribute("data-avrc-credits", `${credits}`);

    const dollars = credits * 0.004925;
    const dollarsFormatted = dollars.toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
    amountContainer.textContent = `($${dollarsFormatted})`;
}

const loadMutationOberserver = () => {
  const callback = (mutationList, observer) => {
    for (const mutation of mutationList) {
      if (mutation.addedNodes) {
        mutation.addedNodes.forEach((node) => {
          const spans = node.querySelectorAll?.(VRCHAT_CREDIT_ICON_SELECTOR);
          if (!spans?.length) return;
          spans.forEach(postfixDollar);
        })
      }
    }
  };

  const observer = new MutationObserver(callback);

  observer.observe(document.body, { attributes: true, childList: true, subtree: true });
};

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(VRCHAT_CREDIT_ICON_SELECTOR).forEach(postfixDollar);
});

loadMutationOberserver();