Pony.town nickname chat filter

ponytown-chat-filter.user.js

// ==UserScript==
// @name        Pony.town chat filter
// @namespace   mmote
// @match       https://pony.town/*
// @grant       none
// @version     1.0
// @author      MultiMote
// @description Filter chat messages by nicknames
// @run-at      document-end
// @icon https://pony.town/favicon-194x194.png
// @updateURL https://gist.github.com/MultiMote/c4b5ec0f4b782e57ab60836e18c4de6e/raw/ponytown-chat-filter.user.js
// ==/UserScript==

const style = document.createElement('style');
style.appendChild(
  document.createTextNode(`
    .chat-line.highlight { background-color: rgba(239, 4, 239, 0.56); }
    .chat-line.hidden { display: none; }
    .filter-line {
      background: rgba(0,0,0,0.1);
      border-radius: 3px;
      border: 1px solid rgba(0,0,0,0.3);
      margin-left: 2px;
      margin-bottom: 2px;
      color: white;
    }
  `)
);
document.getElementsByTagName('head')[0].appendChild(style);

var namesFilter = [];
var chatListener = null;
var playingListener = null;
var filterInput = null;
var filterinjected = false;

const uninjectFilter = () => {
  if (!filterinjected) {
    return;
  }
  filterinjected = false;

  console.log('removing chat filter');
  if(chatListener != null) {
    chatListener.disconnect();
  }

  if(filterInput != null) {
    filterInput.remove();
  }
};

const injectFilter = () => {
  if (filterinjected) {
    return;
  }
  filterinjected = true;
  console.log('injecting chat filter');
  const chatContents = document.querySelector('.chat-log-scroll-inner');

  const refreshLineHighlight = (line) => {
    const name = line.querySelector('.chat-line-name-content').innerText;
    if (namesFilter.length == 0 || !namesFilter[0]) {
      // line.classList.remove('highlight');
      line.classList.remove('hidden');
      return;
    }
    for (let n of namesFilter) {
      if (name.toLowerCase().includes(n.toLowerCase())) {
        // line.classList.add('highlight');
        line.classList.remove('hidden');
        break;
      } else {
        // line.classList.remove('highlight');
        line.classList.add('hidden');
      }
    }
  };

  const refreshAllHighlight = () => {
    chatContents.querySelectorAll('.chat-line').forEach((line) => refreshLineHighlight(line));
  };

  filterInput = document.createElement('input');
  filterInput.type = 'text';
  filterInput.classList.add('filter-line');
  filterInput.style.minWidth = '300px';
  filterInput.placeholder = 'Name filter (comma-separated)';
  filterInput.onkeydown = (e) => {
    if (e.code == 'Escape' || e.code == 'Enter') {
      e.target.blur();
    }
  };
  filterInput.oninput = (e) => {
    namesFilter = e.target.value
      .split(',')
      .map((s) => s.trim())
      .filter((s) => s);
    refreshAllHighlight();
  };
  document.querySelector('.chat-log-tabs').appendChild(filterInput);

  chatListener = new MutationObserver((mutations, obs) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((line) => {
        refreshLineHighlight(line);
      });
    });
  });
  chatListener.observe(chatContents, { childList: true });
};

playingListener = new MutationObserver((mutations, obs) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'class') {
      if(mutation.target.classList.contains('playing')){
        setTimeout(injectFilter, 1000);
      } else {
        uninjectFilter();
      }
    }
  });
})
playingListener.observe(document.querySelector('body'), { attributes: true });