Speech Recognition bookmarklet - Inspired by the gist made available by kevinlin1 (https://gist.github.com/kevinlin1/a7e644eda177d8b5777eb8f791971cb8) I adapted it to suit my needs and style

speak.js

javascript:(() => {    
    const div = document.createElement('div');    
    div.classList.add("my-notes");    
    div.style.display = 'none';    
    div.style.backgroundColor = '#52614B';    
    div.style.position = 'fixed';    
    div.style.top = '0';    
    div.style.zIndex = '999';    
    div.style.maxWidth = '40rem';    
    div.style.maxHeight = '30vh';    
    div.style.overflowY = 'scroll';    
    div.style.padding = '1rem';    
    div.style.color = 'white';    
    div.style.fontWeight = '700';    
    div.style.fontSize = '1.5rem';    
    div.style.fontFamily = 'Avenir, Helvetica, Arial, sans-serif';      
    
    let p = document.createElement('p');    
    const recognition = new webkitSpeechRecognition();    
    recognition.interimResults = true;    
    recognition.lang = 'en-GB';    
    recognition.continuous = true;      
    recognition.onresult = e => {      
        div.style.display = 'block';      
        const realTimeTranscription = document.querySelector('.my-notes');      
        realTimeTranscription.appendChild(p);      
        transcript = Array.from(e.results).map(result => result[0]).map(result => result.transcript).join('');
        p.textContent = transcript;
        div.scrollBy({
            top: 20,        
            left: 0,        
            behavior: "smooth",      
        });    
    };    
    recognition.onend = event => recognition.start();      
    div.onclick = event => {      
        recognition.onend = event => {};      
        recognition.abort();    
    };      
    document.body.appendChild(div);    
    recognition.start();  
})();