ClrCompactIntercept

Intercept WebSocket messages on StumbleChat and display them

  1. // ==UserScript==
  2. // @name ClrCompactIntercept
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.2
  5. // @description Intercept WebSocket messages on StumbleChat and display them
  6. // @author MeKLiN
  7. // @match https://stumblechat.com/room/*
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=stumblechat.com
  9. // @grant none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. // Your code starts here
  17. // ==============================================================
  18.  
  19. // Method to create the div for displaying WebSocket messages
  20. function createWebSocketMessagesDiv() {
  21. const div = document.createElement("div");
  22. div.id = "webSocketMessages";
  23. div.style.position = "relative";
  24. div.style.height = "25%";
  25. div.style.paddingLeft = "2px";
  26. div.style.willChange = "transform";
  27. div.style.boxSizing = "border-box";
  28. div.style.overflowX = "hidden";
  29. div.style.overflowY = "auto";
  30. div.style.color = "#ffffff"; // Set font color to white
  31. div.style.padding = "10px"; // Example padding
  32. div.style.zIndex = "2"; // Set a higher z-index value
  33.  
  34. // Additional styles for specific scenarios
  35. div.style.display = "flex";
  36. div.style.flexDirection = "column";
  37. div.style.justifyContent = "flex-end";
  38. div.style.fontSize = "12px";
  39.  
  40. div.style.whiteSpace = "normal"; // Allow text to wrap within the container
  41. div.style.wordWrap = "break-word"; // Allow long words to break and wrap
  42.  
  43. // Locate and append custom div the chat-position div
  44. const chatPositionDiv = document.getElementById("chat-position");
  45. if (chatPositionDiv) {
  46. chatPositionDiv.appendChild(div);
  47. } else {
  48. // If chat-position div not found, append to document body
  49. document.body.appendChild(div);
  50. }
  51. }
  52. // Call the function to create the WebSocket messages div
  53. createWebSocketMessagesDiv();
  54. // ==============================================================
  55.  
  56. // Function to display WebSocket messages
  57. function displayWebSocketMessage(message) {
  58. const webSocketMessagesDiv = document.getElementById("webSocketMessages");
  59. if (webSocketMessagesDiv) {
  60. webSocketMessagesDiv.innerHTML += message + "<br>";
  61. webSocketMessagesDiv.scrollTop = webSocketMessagesDiv.scrollHeight;
  62. }
  63. }
  64.  
  65. // Override WebSocket constructor to intercept WebSocket creation
  66. const originalWebSocket = window.WebSocket;
  67. window.WebSocket = function(url, protocols) {
  68. console.log('WebSocket URL:', url);
  69.  
  70. // Call original WebSocket constructor
  71. const ws = new originalWebSocket(url, protocols);
  72.  
  73. // Event listener for receiving messages
  74. ws.addEventListener('message', event => {
  75. displayWebSocketMessage(event.data);
  76. });
  77.  
  78. return ws;
  79. };
  80.  
  81. // Function to clear messages
  82. function clearMessages() {
  83. const webSocketMessagesDiv = document.getElementById("webSocketMessages");
  84. if (webSocketMessagesDiv) {
  85. webSocketMessagesDiv.innerHTML = "";
  86. }
  87. }
  88.  
  89. // Function to toggle compact view
  90. function toggleCompactView() {
  91. const messages = document.querySelectorAll('.message .content');
  92. messages.forEach(message => {
  93. message.classList.toggle('compact');
  94. });
  95. }
  96.  
  97. // Create top buttons
  98. function createTopButtons() {
  99. const topButtonsDiv = document.createElement("div");
  100. topButtonsDiv.id = "topButtons";
  101. topButtonsDiv.style.position = "fixed";
  102. topButtonsDiv.style.top = "10px";
  103. topButtonsDiv.style.left = "50%";
  104. topButtonsDiv.style.transform = "translateX(-50%)";
  105. topButtonsDiv.style.zIndex = "9999";
  106.  
  107. // Clear button
  108. const clearButton = document.createElement("button");
  109. clearButton.textContent = "Clear";
  110. clearButton.style.background = "black";
  111. clearButton.style.color = "lime";
  112. clearButton.style.width = "50px";
  113. clearButton.style.height = "20px";
  114. clearButton.style.margin = "0 5px";
  115. clearButton.addEventListener("click", clearMessages);
  116. topButtonsDiv.appendChild(clearButton);
  117.  
  118. // Compact button
  119. const compactButton = document.createElement("button");
  120. compactButton.textContent = "Compact";
  121. compactButton.style.background = "black";
  122. compactButton.style.color = "lime";
  123. compactButton.style.width = "60px";
  124. compactButton.style.height = "20px";
  125. compactButton.style.margin = "0 5px";
  126. compactButton.addEventListener("click", toggleCompactView);
  127. topButtonsDiv.appendChild(compactButton);
  128.  
  129. // Append top buttons div to document body
  130. document.body.appendChild(topButtonsDiv);
  131. }
  132.  
  133. // Call the function to create top buttons
  134. createTopButtons();
  135.  
  136. // ==============================================================
  137.  
  138. })();
  139.  
  140. /* Additional compacting styles */
  141. /* Ensure the following styles are properly appended to the end of your userscript */
  142. /* without breaking the existing code structure */
  143.  
  144. /* Compact message styles */
  145. /*@-moz-document url-prefix("https://stumblechat.com/room/") {*/
  146. // Compact message styles
  147. const compactStyles = `
  148. .message .nickname ~ .content {
  149. display: inline-block;
  150. top: -7px;
  151. position: relative;
  152. margin-left: 2px;
  153. margin-right: 1em;
  154. }
  155. .content + .content {
  156. display: inline-block!important;
  157. margin-right: 1em;
  158. }
  159. .message .nickname ~ .content span {
  160. line-height: 1.5em;
  161. }
  162. `;
  163.  
  164. // Apply compact styles to the document
  165. const style = document.createElement('style');
  166. style.textContent = compactStyles;
  167. document.head.appendChild(style);
  168. /*}*/