Twitch.tv emotes in Messenger.com! (v3)

// ==UserScript==
// @name        Messenger.tv
// @namespace   com.kappa.emotes
// @description Twitch.tv emotes in Messenger.com! (v3)
// @include     https://www.messenger.com
// @include     https://www.messenger.com/*
// @version     1
// @grant       GM_xmlhttpRequest
// ==/UserScript==

window.addEventListener("load", LocalMain, false);

var emotes = {};
var chatSwitchObs, messageGroupObs, newMessageObs;

// Download emote list
GM_xmlhttpRequest({
  method: "GET",
  url: "http://twitchemotes.com",
  onload: function(response) {
    var emoteHTML = response.responseText;

    // Manipulate twitchemotes.com page to pull emotes and images
    MakeEmoteList(emoteHTML);
  }
});

Object.isEmpty = function(obj) {
  var empty = true, key;
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      empty = false;
      break;
    }
  }
  return empty;
};

function GetEmoteAsTag(emoteName, valign) {
  var id = emotes[emoteName];
  var imgSrc = "https://static-cdn.jtvnw.net/emoticons/v1/" + id + "/1.0";

  // If valign specified, add it in
  var valignStyle = "vertical-align:" + (valign !== undefined ? valign.toString() : "middle") + "px;";

  var tag = '<img src="' + imgSrc + '" style="' + valignStyle + '" />';
  //console.log(tag);
  return tag;
}

function MakeEmoteList(html) {
  var emoteRe = /emote-name.*/g;
  var emoteHTMLArr = html.match(emoteRe);

  // Create key-value dict for every emote
  var emoteID, emoteName;
  var reID = /data-image-id="([\d]+)"/;
  var reName = /data-regex="([\w]+)"/;

  for (var i = 0; i < emoteHTMLArr.length; i++) {
    // Get emote ID and name
    emoteID = reID.exec(emoteHTMLArr[i])[1];
    emoteName = reName.exec(emoteHTMLArr[i])[1];

    // Add emote info to emote dict
    emotes[emoteName] = emoteID;
  }
}

function LocalMain() {
  // Identify chat window
  var threadWindow = document.querySelector("div._4_j4");

  // Init observer to run event on chat thread switch
  chatSwitchObs = new MutationObserver( ObserveChat );
  chatSwitchObs.observe(threadWindow, { childList: true });

  messageGroupObs = new MutationObserver( obsLatestMessageGroup );
  newMessageObs = new MutationObserver( AddEmotesToLatest );

  ObserveChat();

  // Add Twitch emote browser to message bar
  CreateEmoteBrowser();
}

function ToggleEmoteBrowser() {
  var emoteBrowser = document.querySelector("#emote_browser");

  if (emoteBrowser.style.opacity == "0") {
    // Show emote browser
    emoteBrowser.style.display = "block";
    emoteBrowser.style.opacity = "1";
    emoteBrowser.style.transform = "translate3D(-50%, -50%, 0)";
    emoteBrowser.style.pointerEvents = "auto";
  } else {
    // Hide emote browser
    emoteBrowser.style.opacity = "0";
    emoteBrowser.style.transform = "translate3D(-50%, -43%, 0)";
    emoteBrowser.style.pointerEvents = "none";
  }
}

function CreateEmoteBrowser() {
  // Emote browser header
  var emoteHeader = document.createElement("DIV");
  emoteHeader.style.backgroundColor = "#6441A5";
  emoteHeader.style.color = "#FFF";
  emoteHeader.style.padding = "4px 0px";
  emoteHeader.style.fontSize = "22px";
  emoteHeader.style.textAlign = "center";
  emoteHeader.innerHTML = "Click an emote to copy it to your clipboard!";

  // Emote browser emote area
  var emoteArea = document.createElement("DIV");
  emoteArea.style.padding = "4px";
  // Populate emote area
  for (var key in emotes) {
    if (emotes.hasOwnProperty(key)) {
      // Create clickable emote div
      var emoteImg = document.createElement("DIV");
      emoteImg.setAttribute("title", key);
      // Add onclick event
      emoteImg.setAttribute("data-name", key);
      emoteImg.onclick = function(){
        CopyTextToClipboard(this.getAttribute("data-name") + " ");
        ToggleEmoteBrowser();
      };
      // Style it
      emoteImg.style.cursor = "pointer";
      emoteImg.style.padding = "4px";
      emoteImg.style.display = "inline-block";
      // Add the image
      emoteImg.innerHTML += GetEmoteAsTag(key, -1);

      // Append it to the emote area
      emoteArea.appendChild(emoteImg);
    }
  }

  // Create the emote browser div
  var emoteBrowser = document.createElement("DIV");
  emoteBrowser.id = "emote_browser";
  emoteBrowser.style.width = "40%";
  //emoteBrowser.style.height = "50%";
  emoteBrowser.style.top = "50%";
  emoteBrowser.style.left = "50%";
  emoteBrowser.style.backgroundColor = "#fff";
  emoteBrowser.style.position = "fixed";
  emoteBrowser.style.borderRadius = "10px";
  emoteBrowser.style.boxShadow = "0px 0px 10px #888888";
  emoteBrowser.style.transform = "translate3D(-50%, -43%, 0)";
  emoteBrowser.style.overflow = "hidden";
  emoteBrowser.style.display = "block";
  emoteBrowser.style.opacity = "0";
  emoteBrowser.style.pointerEvents = "none";
  emoteBrowser.style.transition = "opacity 0.25s, transform 0.25s";

  emoteBrowser.appendChild(emoteHeader);
  emoteBrowser.appendChild(emoteArea);
  document.body.appendChild(emoteBrowser);

  // Create a button to open the emote browser
  var iconArea = document.querySelector("ul._4rv4");

  // Create button to open browser
  var openBrowser = document.createElement("LI");
  openBrowser.setAttribute("title", "Twitch emote browser");
  // Add image
  openBrowser.innerHTML = GetEmoteAsTag("Kappa", 2);
  // Add onclick event
  openBrowser.addEventListener("click", ToggleEmoteBrowser);
  // Style it
  openBrowser.style.cursor = "pointer";
  openBrowser.style.paddingRight = "9px";

  // Add to button area
  iconArea.appendChild(openBrowser);
}

function ObserveChat() {
  // Observe current chat window
  var chatWindow = document.querySelector("#js_1");
  if (chatWindow !== null) {
    // Initial message group tracking
    obsLatestMessageGroup();

    // Track future changes
    messageGroupObs.observe(chatWindow, { childList: true });
  }
}

function obsLatestMessageGroup() {
  var msgGroups = document.querySelectorAll("#js_1 > div._1t_p > div._1t_s");
  var latestGroup = msgGroups[msgGroups.length - 1];

  // Initial message update
  AddEmotesToAll();

  // Track future changes
  newMessageObs.observe(latestGroup, { childList: true });
}

function AddEmotes(message) {
  // Split message into words
  var words = message.replace(/\n/g, " ").split(" ");
  var arrLen = words.length;

  if (arrLen > 0 && !Object.isEmpty(emotes)) {
    var key, emoteImg;
    // Check each word in message for emote phrase
    for (var i = 0; i < arrLen; i++) {
      key = words[i];
      if (emotes[key] !== undefined) {
        // Replace text with emote
        emoteImg = GetEmoteAsTag(key, -7);
        message = message.replace(key, emoteImg);
      }
    }
  }
  // Return message with emote images added
  return message;
}

function AddEmotesToLatest() {
  var messages = document.querySelectorAll("div > span._3oh-");
  var latest = messages[messages.length - 1];
  latest.innerHTML = AddEmotes(latest.innerHTML);
}

function AddEmotesToAll() {
  var messages = document.querySelectorAll("div > span._3oh-");

  for (var i = 0; i < messages.length; i++) {
    messages[i].innerHTML = AddEmotes(messages[i].innerHTML);
  }
}

// EMOTE TEXT COPYING
function CopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  // Place off-screen
  textArea.style.position = 'fixed';
  textArea.style.top = -100;
  textArea.style.left = -100;

  // Add textarea to document and fill with text to copy
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();

  try {
    document.execCommand('copy');
  } catch (err) {
    alert("The emote couldn't be copied.");
  }

  // Delete textarea
  document.body.removeChild(textArea);
}