☰

Text Highlighter with TTS

Highlight text on any website and have it read using TTS with options for voice and speed.

// ==UserScript==
// @name         Text Highlighter with TTS
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Highlight text on any website and have it read using TTS with options for voice and speed.
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create GUI
    let gui = document.createElement('div');
    gui.style.position = 'fixed';
    gui.style.top = '20px';
    gui.style.left = '20px';
    gui.style.width = '300px';
    gui.style.height = '200px';
    gui.style.background = 'gray';
    gui.style.borderRadius = '10px';
    gui.style.boxShadow = '2px 2px 10px rgba(0, 0, 0, 0.5)';
    gui.innerHTML = `
        <div style="background-color: #ccc; padding: 10px; border-radius: 10px 10px 0 0;">
            <span style="font-size: 18px;">Highlighter</span>
        </div>
        <div style="padding: 10px;">
            <button id="readButton">Read Selected Text</button>
            <br><br>
            <label for="voiceSelect">Voice: </label>
            <select id="voiceSelect"></select>
            <br><br>
            <label for="speedRange">Speed: </label>
            <input type="range" id="speedRange" min="0.5" max="2" step="0.1" value="1">
        </div>
    `;
    document.body.appendChild(gui);

    // Drag functionality
    gui.onmousedown = function(e) {
        let shiftX = e.clientX - gui.getBoundingClientRect().left;
        let shiftY = e.clientY - gui.getBoundingClientRect().top;

        function moveAt(pageX, pageY) {
            gui.style.left = pageX - shiftX + 'px';
            gui.style.top = pageY - shiftY + 'px';
        }

        function onMouseMove(e) {
            moveAt(e.pageX, e.pageY);
        }

        document.addEventListener('mousemove', onMouseMove);

        gui.onmouseup = function() {
            document.removeEventListener('mousemove', onMouseMove);
            gui.onmouseup = null;
        };
    };

    gui.ontouchstart = function(e) {
        let shiftX = e.touches[0].clientX - gui.getBoundingClientRect().left;
        let shiftY = e.touches[0].clientY - gui.getBoundingClientRect().top;

        function moveAt(pageX, pageY) {
            gui.style.left = pageX - shiftX + 'px';
            gui.style.top = pageY - shiftY + 'px';
        }

        function onTouchMove(e) {
            moveAt(e.touches[0].pageX, e.touches[0].pageY);
        }

        document.addEventListener('touchmove', onTouchMove);

        gui.ontouchend = function() {
            document.removeEventListener('touchmove', onTouchMove);
            gui.ontouchend = null;
        };
    };

    // Disable text selection while dragging
    gui.ondragstart = function() {
        return false;
    };

    // TTS setup
    let synth = window.speechSynthesis;
    let voices = [];

    function populateVoiceList() {
        voices = synth.getVoices();
        let voiceSelect = document.getElementById('voiceSelect');
        voiceSelect.innerHTML = '';
        voices.forEach((voice, index) => {
            let option = document.createElement('option');
            option.textContent = voice.name + ' (' + voice.lang + ')';
            option.value = index;
            voiceSelect.appendChild(option);
        });
    }

    populateVoiceList();
    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = populateVoiceList;
    }

    // Detect selected text
    let selectedText = '';
    document.addEventListener('selectionchange', () => {
        let selection = window.getSelection();
        if (selection && selection.rangeCount > 0) {
            selectedText = selection.toString().trim();
        }
    });

    // Read selected text using TTS
    document.getElementById('readButton').addEventListener('click', () => {
        if (selectedText) {
            let utterThis = new SpeechSynthesisUtterance(selectedText);
            utterThis.voice = voices[document.getElementById('voiceSelect').value];
            utterThis.rate = document.getElementById('speedRange').value;
            synth.speak(utterThis);
        } else {
            alert('Please select some text first.');
        }
    });
})();