├── LICENSE ├── README.md ├── images ├── ico128.png ├── ico16.png ├── ico19.png ├── ico38.png └── ico48.png ├── manifest.json ├── twitch-hide-messages-demo.gif └── twitch-hide-messages.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Roman Davydov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ![Icon](https://github.com/rdavydov/twitch-hide-messages/blob/main/images/ico19.png?raw=true) Twitch Hide Messages 2 | 3 | ![](https://img.shields.io/github/license/rdavydov/twitch-hide-messages?style=for-the-badge&logo=github&color=purple&logoColor=thistle) 4 | ![](https://img.shields.io/github/stars/rdavydov/twitch-hide-messages?style=for-the-badge&logo=github&color=darkblue&logoColor=aquamarine) 5 | ![](https://img.shields.io/github/forks/rdavydov/twitch-hide-messages?style=for-the-badge&logo=github&color=darkblue&logoColor=aquamarine) 6 | ![](https://img.shields.io/github/watchers/rdavydov/twitch-hide-messages?style=for-the-badge&logo=github&color=darkblue&logoColor=aquamarine) 7 | ![](https://img.shields.io/github/last-commit/rdavydov/twitch-hide-messages?style=for-the-badge&logo=github&color=darkgreen&logoColor=lightgreen) 8 | 9 | Browser extension that hides messages that start with "!" on Twitch. 10 | 11 | ![Demo](https://github.com/rdavydov/twitch-hide-messages/blob/main/twitch-hide-messages-demo.gif?raw=true) 12 | 13 | ## How to Use 14 | 15 | Click on the exclamation mark icon near the gear icon at the bottom of the chat. It will toggle comments that start with "!". You can still see hidden messages in the browser console, they are logged there. 16 | 17 | ## How to Install 18 | 19 | | Browser | | 20 | |---------|--------------------------| 21 | | Edge | [Link](https://microsoftedge.microsoft.com/addons/detail/hide-messages-on-twitch/kgkngbohcejijflplmdagjieclcigkbh) | 22 | | Firefox | [Link](https://addons.mozilla.org/en-US/firefox/addon/twitch-hide-messages/) | 23 | 24 | OR (Chromium-based browsers) 25 | 26 | 1. Clone this repo 27 | 2. Go to your browser's extensions `chrome://extensions` 28 | 3. Enable Developer mode 29 | 4. Click "Load unpacked" (extension) and select this cloned repo's folder 30 | -------------------------------------------------------------------------------- /images/ico128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdavydov/twitch-hide-messages/2f83e8415b6185b66eed189c466e62e7152faf4a/images/ico128.png -------------------------------------------------------------------------------- /images/ico16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdavydov/twitch-hide-messages/2f83e8415b6185b66eed189c466e62e7152faf4a/images/ico16.png -------------------------------------------------------------------------------- /images/ico19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdavydov/twitch-hide-messages/2f83e8415b6185b66eed189c466e62e7152faf4a/images/ico19.png -------------------------------------------------------------------------------- /images/ico38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdavydov/twitch-hide-messages/2f83e8415b6185b66eed189c466e62e7152faf4a/images/ico38.png -------------------------------------------------------------------------------- /images/ico48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdavydov/twitch-hide-messages/2f83e8415b6185b66eed189c466e62e7152faf4a/images/ico48.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Twitch Hide Messages", 4 | "description": "Browser extension that hides messages that start with ! on Twitch.", 5 | "version": "0.2", 6 | "icons": { 7 | "16": "images/ico16.png", 8 | "19": "images/ico19.png", 9 | "38": "images/ico38.png", 10 | "48": "images/ico48.png", 11 | "128": "images/ico128.png" 12 | }, 13 | "content_scripts": [ 14 | { 15 | "matches": [ 16 | "*://www.twitch.tv/*" 17 | ], 18 | "js": [ 19 | "twitch-hide-messages.js" 20 | ] 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /twitch-hide-messages-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdavydov/twitch-hide-messages/2f83e8415b6185b66eed189c466e62e7152faf4a/twitch-hide-messages-demo.gif -------------------------------------------------------------------------------- /twitch-hide-messages.js: -------------------------------------------------------------------------------- 1 | // TODO: appendChild a button that toggles hiding 2 | 3 | // The issue you're experiencing is likely because the mutation observer is only observing the chat log element that existed when the page was first loaded. If you switch to another stream, a new chat log element is created and the observer is not aware of it. 4 | 5 | // To fix this, you can modify the code to observe the entire document instead of just the chat log element.When a mutation occurs, you can check if it's a chat message and then check if it starts with an exclamation point. If it does, you can remove the message. 6 | 7 | // This code observes the entire document body and checks for mutations in the subtree. When a chat message is added, it checks if it starts with an exclamation point and removes it if it does. It also logs the removed message to the console with Twitch's font and colors. 8 | 9 | // Write a message to the console 10 | console.log('%c😵 Twitch Hide Messages: Extension loaded.', 'color: #9147ff; font-size: 1.1em; font-family: sans-serif;'); 11 | 12 | // Find the chat settings button 13 | // not const because it changes when you switch channels 14 | let chatSettingsButton = document.querySelector('[data-a-target="chat-settings"]'); 15 | 16 | // Create a new toggle button 17 | const toggleButton = document.createElement('button'); 18 | toggleButton.innerHTML = '❗'; 19 | toggleButton.title = 'Show messages with "!"'; 20 | // toggleButton.style.backgroundColor = '#9147ff'; 21 | toggleButton.style.color = '#ffffff'; 22 | toggleButton.style.fontFamily = 'sans-serif'; 23 | toggleButton.style.fontSize = '1em'; 24 | toggleButton.style.fontWeight = 'bold'; 25 | // toggleButton.style.border = '1px solid #000'; 26 | toggleButton.style.borderRadius = '5px'; 27 | // toggleButton.style.padding = '5px 10px'; 28 | toggleButton.style.marginRight = '5px'; 29 | toggleButton.style.cursor = 'pointer'; 30 | toggleButton.classList.add('toggle-btn-enabled'); 31 | 32 | // Append the toggle button to the chat settings button's parent element 33 | chatSettingsButton.parentElement.insertBefore(toggleButton, chatSettingsButton); 34 | 35 | // Add a click event listener to the toggle button 36 | toggleButton.addEventListener('click', () => { 37 | if (toggleButton.classList.contains('toggle-btn-enabled')) { 38 | toggleButton.classList.remove('toggle-btn-enabled'); 39 | toggleButton.innerHTML = '❕'; 40 | toggleButton.title = 'Hide messages with "!"'; 41 | console.log('%c👀 Messages with "!" are no longer hidden', 'color: #9147ff; font-size: 1.1em; font-family: sans-serif'); 42 | observer.disconnect(); 43 | } else { 44 | toggleButton.classList.add('toggle-btn-enabled'); 45 | toggleButton.innerHTML = '❗'; 46 | toggleButton.title = 'Show messages with "!"'; 47 | console.log('%c😵 Messages with "!" are now hidden', 'color: #9147ff; font-size: 1.1em; font-family: sans-serif'); 48 | observer.observe(document.body, { childList: true, subtree: true }); 49 | } 50 | }); 51 | 52 | toggleButton.addEventListener('mouseover', () => { 53 | toggleButton.style.backgroundColor = 'var(--color-background-interactable-hover)'; 54 | }); 55 | 56 | toggleButton.addEventListener('mouseout', () => { 57 | toggleButton.style.backgroundColor = 'transparent'; 58 | }); 59 | 60 | // Create a new MutationObserver 61 | const observer = new MutationObserver(mutations => { 62 | // Loop over each mutation 63 | mutations.forEach(mutation => { 64 | // Check if nodes were added to the chat log 65 | if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { 66 | // Loop over each added node 67 | mutation.addedNodes.forEach(node => { 68 | // Check if the added node is a chat message with the "chat-line__message" class 69 | if (node instanceof HTMLDivElement && node.classList.contains('chat-line__message')) { 70 | const messageTextSpan = node.querySelector('[data-a-target="chat-message-text"]'); 71 | // Check if the message starts with an exclamation point 72 | if (messageTextSpan && messageTextSpan.innerText.trim().startsWith('!')) { 73 | console.log('%c➖ ' + node.innerText.trim(), 'color: #9147ff; font-size: 1.1em; font-family: sans-serif'); 74 | // Hide the message container 75 | node.style.display = "none"; 76 | } 77 | } 78 | }); 79 | } 80 | if (!document.body.contains(toggleButton)) { 81 | console.log('%c😟 Twitch Hide Messages button is lost. Restoring..', 'color: #9147ff; font-size: 1.1em; font-family: sans-serif'); 82 | // Re-append the toggle button to the chat settings button's parent element 83 | chatSettingsButton = document.querySelector('[data-a-target="chat-settings"]'); 84 | chatSettingsButton.parentElement.insertBefore(toggleButton, chatSettingsButton); 85 | } 86 | }); 87 | }); 88 | 89 | // Observe the chat log for changes 90 | observer.observe(document.body, { childList: true, subtree: true }); 91 | --------------------------------------------------------------------------------