Add a button to the Twitch.tv website that opens a menu to translate messages to the Twitch.tv chat.
// ==UserScript==
// @name Twitch.tv chat Translation
// @namespace Magof - twitch-translation-script
// @version 2.0
// @description Add a button to the Twitch.tv website that opens a menu to translate messages to the Twitch.tv chat.
// @author Magof
// @match https://www.twitch.tv/*
// ==/UserScript==
// Add the Bootstrap link via CDN to the document header
const bootstrapCDN = document.createElement('link');
bootstrapCDN.rel = 'stylesheet';
bootstrapCDN.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css';
document.head.appendChild(bootstrapCDN);
(function () {
'use strict';
// Function called when the button is clicked
function toggleToolbox() {
const toolbox = document.getElementById('toolbox');
if (toolbox) {
toolbox.classList.toggle('visible');
}
}
function addButton() {
// Check if the button has already been added
const existingButton = document.getElementById('toggle-toolbox');
if (existingButton) {
return;
}
// Create the button
const newButton = document.createElement('button');
newButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16"><path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"></path><path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"></path></svg> Translate';
newButton.classList.add('btn', 'btn-primary');
newButton.id = 'toggle-toolbox';
newButton.style.marginRight = '10px'
// Add the click event to the button
newButton.addEventListener('click', toggleToolbox);
// Add the button to the element with the class "chat-input__buttons-container"
const chatButtonsContainer = document.querySelector('.chat-input__buttons-container');
if (chatButtonsContainer) {
chatButtonsContainer.appendChild(newButton);
}
// Create the button for instructions
const instructionsButton = document.createElement('button');
instructionsButton.textContent = 'Instructions';
instructionsButton.classList.add('btn', 'btn-secondary', 'me-2');
// Add the click event to the instructions button
instructionsButton.addEventListener('click', () => {
alert(`
Translated Twitch.tv Chat Instructions:
1. Click the "Translate" button to open the toolbox.
2. Use the "Translate Chat in Real Time" checkbox to enable/disable real-time translation.
3. Select a language from the dropdown to choose the target language for translation.
4. New messages in the chat will be automatically translated if real-time translation is enabled.
5. Press the "ESC" key to quickly toggle the visibility of the toolbox.
Enjoy chatting in different languages on Twitch.tv!
`);
});
// Add the instructions button to the toolbox
const toolboxContent = document.getElementById('toolbox');
if (toolboxContent) {
if (!toolboxContent.querySelector('button')) {
toolboxContent.appendChild(instructionsButton);
}
}
}
// Add a keydown event listener to the document
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
toggleToolbox();
}
});
// Function to check for changes in the DOM
function checkDOMChange() {
addButton();
setTimeout(checkDOMChange, 1000); // Check again every 1 second
}
// Wait for the page to fully load and then add the button
window.addEventListener('load', () => {
checkDOMChange();
});
})();
// CSS styles for the toolbox
const css = `
/* Style for the visible toolbox */
.tool-box.visible {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
/* General style for the hidden toolbox */
.tool-box {
position: absolute;
top: 20px;
right: 20px;
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-family: Arial, sans-serif;
color: #333;
display: none;
}
/* Style for the toolbox title */
.tool-box h2 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
/* Style for checkboxes and labels */
.tool-box label {
display: block;
margin-bottom: 10px;
}
/* Style for the select element */
.tool-box select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
`;
// Add the CSS style to the page
const style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
// Add the toolbox to the document body
const toolboxHtml = `
<div class="tool-box" id="toolbox">
<h2>Toolbox</h2>
<label>
<input type="checkbox" id="real-time-translate" />
Translate Chat in Real Time
</label>
<label for="language-select">Select Language:</label>
<select id="language-select">
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="am">Amharic</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="ceb">Cebuano</option>
<option value="ny">Chichewa</option>
<option value="zh-cn">Chinese (Simplified)</option>
<option value="zh-tw">Chinese (Traditional)</option>
<option value="co">Corsican</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="fy">Frisian</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="ht">Haitian Creole</option>
<option value="ha">Hausa</option>
<option value="haw">Hawaiian</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hmn">Hmong</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="ig">Igbo</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="jw">Javanese</option>
<option value="kn">Kannada</option>
<option value="kk">Kazakh</option>
<option value="km">Khmer</option>
<option value="ko">Korean</option>
<option value="ku">Kurdish (Kurmanji)</option>
<option value="ky">Kyrgyz</option>
<option value="lo">Lao</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="lb">Luxembourgish</option>
<option value="mk">Macedonian</option>
<option value="mg">Malagasy</option>
<option value="ms">Malay</option>
<option value="ml">Malayalam</option>
<option value="mt">Maltese</option>
<option value="mi">Maori</option>
<option value="mr">Marathi</option>
<option value="mn">Mongolian</option>
<option value="my">Myanmar (Burmese)</option>
<option value="ne">Nepali</option>
<option value="no">Norwegian</option>
<option value="ps">Pashto</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pt-br">Portuguese (Brazil)</option>
<option value="pa">Punjabi</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sm">Samoan</option>
<option value="gd">Scots Gaelic</option>
<option value="sr">Serbian</option>
<option value="st">Sesotho</option>
<option value="sn">Shona</option>
<option value="sd">Sindhi</option>
<option value="si">Sinhala</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="so">Somali</option>
<option value="es">Spanish</option>
<option value="su">Sundanese</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="tg">Tajik</option>
<option value="ta">Tamil</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="uz">Uzbek</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="xh">Xhosa</option>
<option value="yi">Yiddish</option>
<option value="yo">Yoruba</option>
<option value="zu">Zulu</option>
</select>
</div>
`;
const body = document.body;
const div = document.createElement('div');
div.innerHTML = toolboxHtml;
body.appendChild(div);
// Variable to store the MutationObserver reference
let observer = null;
// Store the original messages in a map (key: message element, value: original text)
const originalMessages = new Map();
// Function to translate text using the Google Translate API
function translateText(text, destinationLanguage) {
return new Promise((resolve, reject) => {
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${destinationLanguage}&dt=t&q=${encodeURIComponent(text)}`;
fetch(url)
.then(response => response.json())
.then(data => {
const translation = data[0][0][0];
resolve(translation);
})
.catch(error => {
reject(error);
});
});
}
// Function to translate a message
function translateMessage(messageElement, destinationLanguage) {
const originalText = originalMessages.get(messageElement);
return translateText(originalText, destinationLanguage)
.then(translation => {
messageElement.textContent = translation;
return translation;
})
.catch(error => {
console.error("Error translating message:", error);
});
}
// ...
const checkbox = document.getElementById('real-time-translate');
checkbox.addEventListener('change', () => {
const selectElement = document.getElementById('language-select');
const option = selectElement.value;
if (checkbox.checked) {
// Start translation
// If there is already an observation, we don't need to create another one
if (observer) {
return;
}
// Translate all existing messages and store them in the originalMessages map
const messages = document.querySelectorAll("span.text-fragment");
messages.forEach(messageElement => {
const originalText = messageElement.textContent;
originalMessages.set(messageElement, originalText);
translateMessage(messageElement, option);
});
// Create the observation for new messages
const chatContainer = document.querySelector('[data-test-selector="chat-scrollable-area__message-container"]');
if (chatContainer && !observer) {
observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
const newMessages = Array.from(mutation.addedNodes).filter(node => node.nodeType === Node.ELEMENT_NODE && node.closest('[data-test-selector="chat-scrollable-area__message-container"]'));
newMessages.forEach(newMessage => {
const messageElement = newMessage.querySelector('span.text-fragment');
if (messageElement && !originalMessages.has(messageElement)) {
const originalText = messageElement.textContent;
originalMessages.set(messageElement, originalText);
translateMessage(messageElement, option);
}
});
});
});
const observerConfig = { childList: true, subtree: true };
observer.observe(chatContainer, observerConfig);
}
} else {
// Disable translation
// Remove the observation
if (observer) {
observer.disconnect();
observer = null;
}
// Revert translated messages to their original texts
originalMessages.forEach((originalText, messageElement) => {
messageElement.textContent = originalText;
});
// Clear the map of original messages
originalMessages.clear();
}
});
// ...