hangout_comment.user.js

// ==UserScript==
// @name         Hangout Comment
// @namespace    https://gist.github.com/mohno007/9579408a62c34dc385458a75406381ec
// @version      0.1
// @description  Emoji Reaction
// @author       M
// @match        https://meet.google.com/*
// @grant        none
// ==/UserScript==

const sanitizeMap = {
  '<': '&lt;',
  '>': '&gt;',
  '&': '&amp;',
  "'": '&#x27;',
  '`': '&#x60;',
  '"': '&quot;',
};

const html = (callSites, ...substitutions) => {
  const escapedSubstitutions = substitutions.map(value =>
    value.toString().replace(/[<>&\\`'"]/g, match => sanitizeMap[match])
  );

  const htmlString = String.raw(callSites, ...escapedSubstitutions);

  const template = document.createElement('template');
  template.innerHTML = htmlString;

  return template.content;
};

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const findChatContainer = async () => {
  while (true) {
    const firstMessage = document.querySelector('[data-message-text]');
    if (firstMessage) {
      return firstMessage.parentNode.parentNode.parentNode;
    }
    console.log('not found')
    await sleep(1000);
  }
};

const watchMessage = async (onMessage) => {
  const container = await findChatContainer();

  const observer = new MutationObserver((records) => {
    records.forEach(record => {
      if (record.type === 'childList') {
        Array.prototype.forEach.call(record.addedNodes, (node) => {
          if (node.getAttribute('data-message-text')) {
            const data = node.parentNode.parentNode;
            onMessage({
              timestamp: data.getAttribute('data-timestamp'),
              sender: data.getAttribute('data-sender-id'),
              body: node.getAttribute('data-message-text'),
            });
          }
        });
      }
    });
  });

  observer.observe(container, { childList: true, subtree: true });
}

const style = html`
  <style>
    @keyframes hangout_message_overlay_animation {
      0% { left: calc(100%); }
      100% { left: calc(-50%); }
    }

    .hangout_message_overlay {
      font-size: 2.5rem;
      font-family: sans-serif;
      font-weight: bold;
      text-shadow: 0 1px 5px #000;
      color: #fff;
      position: absolute;
      height: max-content;
      width: max-content;
      user-select: none;
      z-index: 100;
    }
  </style>
`;

const messageRenderer = (message) => {
  const elem = html`
    <div class="hangout_message_overlay" style="">
      ${message.body}
    </div>
  `.firstElementChild;

  Object.assign(elem.style, {
    top: `${Math.random() * 100}vh`,
    animation: `${Math.max(10.0 / (Math.log10(message.body.length + 1) * 2), 10)}s linear 0s 1 normal both running hangout_message_overlay_animation`,
  });
  document.body.appendChild(elem);
  setTimeout(() => {
    document.body.removeChild(elem);
  }, 10000);
};

(async () => {
  document.body.appendChild(style);

  watchMessage((message) => {
    console.log(message)
    messageRenderer(message);
  })
})()