HTML Markup in junon.io | EN

Allows to paste HTML+CSS elements into chat

  1. // ==UserScript==
  2. // @name HTML Markup in junon.io | EN
  3. // @namespace http://tampermonkey.net/
  4. // @version 2.1
  5. // @description Allows to paste HTML+CSS elements into chat
  6. // @author Belogvardeec
  7. // @license MIT
  8. // @match *://junon.io/*
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. function convertContentToHTMLCSS(element) {
  16. if (element.id === 'chat_input') return; // ignoring chat input for better experience
  17.  
  18. let content = element.value || element.textContent;
  19. const regex = /#(.*?)#/g;
  20.  
  21. if (!regex.test(content)) return; // if no #...# found, then do nothing
  22.  
  23. // deleting previous custom element for not copying
  24. element.querySelectorAll('.custom-content').forEach(el => el.remove());
  25.  
  26. // adding one style for one time
  27. if (!document.querySelector('.custom-style')) {
  28. const style = document.createElement('style');
  29. style.className = 'custom-style';
  30. style.innerHTML = `
  31. .custom-content {
  32. color: white;
  33. font-size: 16px;
  34. }
  35. `;
  36. document.head.appendChild(style);
  37. }
  38.  
  39. // replace #...# on HTML+CSS content
  40. const newContent = content.replace(regex, (_, p1) => {
  41. return `<span class="custom-content">${p1}</span>`;
  42. });
  43.  
  44. // inputs except chat_input are enabled too, for preview
  45. if (element.tagName.toLowerCase() === 'input') {
  46. let output = element.parentNode.querySelector('.custom-content-container');
  47. if (!output) {
  48. output = document.createElement('div');
  49. output.className = 'custom-content-container';
  50. element.insertAdjacentElement('afterend', output);
  51. }
  52. output.innerHTML = newContent;
  53. } else {
  54. element.innerHTML = newContent;
  55. }
  56.  
  57. // set element as converted
  58. element.dataset.converted = "true";
  59. }
  60.  
  61. function processElements() {
  62. document.querySelectorAll('input, .chat_content').forEach(element => {
  63. convertContentToHTMLCSS(element);
  64. });
  65. }
  66.  
  67. setInterval(processElements, 450);
  68.  
  69. })();