HTSK

bookmarklet.js

// ==UserScript==
// @name         HTSK
// @namespace    https://www.howtostudykorean.com/
// @version      0.3
// @description  Blurs out the English translation of examples on HowToStudyKorean.com until you hover over them, so you can try to understand the Korean first.
// @author       Daniel Flint <[email protected]>
// @match        https://www.howtostudykorean.com/*
// @grant        none
// ==/UserScript==

(d => {
    if (!d.querySelector('.blur-text')) {
        [].slice.call(d.querySelectorAll('a[href$=mp3]')).map(link => {
            let span = d.createElement('span');
            span.className = 'blur-text';
            link.parentNode.insertBefore(span, link.nextSibling);
            let is = (el, ...tags) => el && tags.indexOf(el.tagName) >= 0,
                stop = el => is(el, 'BUTTON', 'BR', 'A'),
                sibling = span.nextSibling,
                takeOneBr = is(sibling, 'BR')/* special case for mobile */;
            while (sibling && (takeOneBr || !stop(sibling))) {
                takeOneBr = false;
                span.appendChild(link.parentNode.removeChild(sibling));
                sibling = span.nextSibling;
            }
        });
        let itr = d.createNodeIterator(
            document.body,
            NodeFilter.SHOW_TEXT,
            node => node.parentElement.tagName !== 'SCRIPT' && node.textContent.trim().indexOf('=') >= 0
                ? NodeFilter.FILTER_ACCEPT
                : NodeFilter.FILTER_REJECT
        );
        let nodes = [];
        while(node = itr.nextNode()) {
            nodes.push(node);
        }
        nodes.forEach(node => {
            let [kr, ...en] = node.textContent.split('=', 2);
            node.textContent = kr + '=';
            let span = d.createElement('span');
            span.className = 'blur-text';
            span.textContent = en.join('=');

            node.parentElement.insertBefore(span, node.nextSibling);
        });

        let css = d.createElement('style');
        css.innerText = '.blur-text{opacity:0.5;filter:blur(3px); transition: all 100ms linear; }.blur-text:hover{opacity:1;filter:none;cursor:crosshair}';
        d.head.appendChild(css);
    }
})(document);

bookmarklet.min.js

javascript:~(a=>{if(!a.querySelector('.blur-text')){[].slice.call(a.querySelectorAll('a[href$=mp3]')).map(f=>{let g=a.createElement('span');g.className='blur-text',f.parentNode.insertBefore(g,f.nextSibling);let h=(l,...m)=>l&&0<=m.indexOf(l.tagName),i=l=>h(l,'BUTTON','BR','A'),j=g.nextSibling,k=h(j,'BR');for(;j&&(k||!i(j));)k=!1,g.appendChild(f.parentNode.removeChild(j)),j=g.nextSibling});let b=a.createNodeIterator(document.body,NodeFilter.SHOW_TEXT,f=>'SCRIPT'!==f.parentElement.tagName&&0<=f.textContent.trim().indexOf('=')?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT),c=[];for(;node=b.nextNode();)c.push(node);c.forEach(f=>{let[g,...h]=f.textContent.split('=',2);f.textContent=g+'=';let i=a.createElement('span');i.className='blur-text',i.textContent=h.join('='),f.parentElement.insertBefore(i,f.nextSibling)});let e=a.createElement('style');e.innerText='.blur-text{opacity:0.5;filter:blur(3px); transition: all 100ms linear; }.blur-text:hover{opacity:1;filter:none;cursor:crosshair}',a.head.appendChild(e)}})(document);

Blurs out the English translation of examples on HowToStudyKorean.com until you hover over them, so you can try to understand the Korean first.