Adds a clipboard emoji beside the username in the viewer card that pops up when you click a username in Twitch chat

Twitch Copy viewer card username to clipboard.user.js

// ==UserScript==
// @name        Twitch: Copy to clipboard for username
// @match       https://www.twitch.tv/*
// @version     1.0
// @author      techygrrrl
// @description Adds a clipboard emoji beside the username in the viewer card that pops up when you click a username in Twitch chat
// ==/UserScript==

const init = async () => {
  console.log("📋 Copy to clipboard: Initializing...");

  const elm = document.querySelector("#root");

  if (elm === null) {
    setTimeout(init, 1000);
    return;
  }

  const observer = new MutationObserver(mutationCallback);
  const config = { childList: true, subtree: true };

  observer.observe(elm, config);
};

init();



async function nodeParser(node) {
  if (node instanceof HTMLElement) {
    if (node.getAttribute("id") === "VIEWER_CARD_ID") {
      const usernameHeading = node.querySelector("h4")

      if (!usernameHeading) return;

      const username = usernameHeading.innerText;

      if (!username) return;

      console.log(`📋 Copy to clipboard: Appending clipboard to username ${username}`);


      const clipboardNode = document.createElement("span")
      clipboardNode.style.cursor = "pointer"
      clipboardNode.style.marginLeft = "10px"
      clipboardNode.innerText = "📋"
      clipboardNode.addEventListener("click", async function() {
        try {
          await navigator.clipboard.writeText(username)
//           alert(`📋 Username "${username}" copied to clipboard`)
        } catch (e) {
          console.error('Cannot copy username to clipboard')
        }
      });

      usernameHeading.appendChild(clipboardNode)
    }
  }
};

async function mutationCallback(mutations) {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes && mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach(nodeParser);
    }
  });
};