구글 번역 - 원본 보여주기 & 코드 번역 방지

bookmarklet.js

javascript:(function()%7Bdocument.head.innerHTML%20%2B%3D%20%60%3Cstyle%3E%0A%20%20%20%20%20%20%20%20.translate_original_text%7B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.translate_original_text%2C%20.translate_original_text%20*%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3Awhite%20!important%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3Ablack%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A1rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3Anormal%3B%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%0A%20%20%20%20%3C%2Fstyle%3E%60%3B%0A%20%20%20%20function%20notranslate_findUp(child%2C%20className)%20%7B%0A%20%20%20%20%20%20%20%20while%20(child.parentNode)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20child%20%3D%20child.parentNode%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!child)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(child%3F.classList%3F.contains('className'))%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20child%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%20%20%20%20let%20notranslate_target%20%3D%20null%3B%0A%20%20%20%20document.querySelectorAll('p%2Ch1%2Ch2%2Ch3%2Ch4%2Ch5%2Ch6%2Cli%2Ctable').forEach(function(e%2C%20index)%7B%0A%20%20%20%20%20%20%20%20var%20clone%20%3D%20e.cloneNode(true)%3B%0A%20%20%20%20%20%20%20%20clone.classList.add('notranslate')%3B%0A%20%20%20%20%20%20%20%20clone.classList.add('translate_original_text')%0A%20%20%20%20%20%20%20%20clone.style.border%20%3D%20'10px%20solid%20rgba(255%2C255%2C255%2C.5)'%3B%0A%20%20%20%20%20%20%20%20clone.style.borderRadius%20%3D%20'5px'%3B%0A%20%20%20%20%20%20%20%20clone.style.padding%20%3D%20'0.1rem'%3B%0A%20%20%20%20%20%20%20%20clone.style.color%20%3D%20'white'%3B%0A%20%20%20%20%20%20%20%20clone.style.marginTop%20%3D%20'2rem'%3B%0A%20%20%20%20%20%20%20%20clone.style.padding%20%3D%20'3px'%3B%0A%20%20%20%20%20%20%20%20clone.style.position%20%3D%20'absolute'%3B%0A%20%20%20%20%20%20%20%20clone.style.maxWidth%20%3D%20'400px'%3B%0A%20%20%20%20%20%20%20%20clone.style.margin%20%3D%200%3B%0A%20%20%20%20%20%20%20%20clone.style.display%20%3D%20'none'%3B%0A%20%20%20%20%20%20%20%20clone.style.zIndex%20%3D%201000%2Bindex%3B%0A%20%20%20%20%20%20%20%20var%20parent%20%3D%20document.querySelector('body')%3B%0A%20%20%20%20%20%20%20%20parent.append(clone)%3B%0A%20%20%20%20%20%20%20%20e.addEventListener('mouseenter'%2C%20(e)%3D%3E%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.querySelectorAll('.translate_original_text').forEach(e%3D%3E%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log('e'%2C%20e)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.style.display%20%3D%20'none'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20notranslate_target%20%3D%20%7Btarget%3Ae.target%2C%20avatar%3Aclone%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20notranslate_target.avatar.style.display%3D'block'%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20e.addEventListener('mouseleave'%2C%20(e)%3D%3E%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!notranslate_target)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20console.log('e'%2C%20notranslate_target.target%2C%20e.target%2C%20notranslate_target%20%3D%3D%3D%20e.target)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20notranslate_target.avatar.style.display%3D'none'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20notranslate_target%20%3D%20null%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log('mouseleave')%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%7D)%3B%0A%20%20%20%20window.addEventListener('mousemove'%2C%20(e)%3D%3E%7B%0A%20%20%20%20%20%20%20%20if(!notranslate_target)%0A%20%20%20%20%20%20%20%20%20%20%20%20return%3B%0A%20%20%20%20%20%20%20%20notranslate_target.avatar.style.top%20%3D%20(e.pageY-notranslate_target.avatar.offsetHeight-20)%2B'px'%3B%0A%20%20%20%20%20%20%20%20notranslate_target.avatar.style.left%20%3D%20(e.pageX%2B20)%2B'px'%3B%0A%20%20%20%20%7D)%0A%20%20%20%20document.querySelectorAll('code%2C%20pre').forEach(function(e)%7B%0A%20%20%20%20%20%20%20%20e.classList.add('notranslate')%3B%0A%20%20%20%20%7D)%3B%7D)()%3B

source.js

document.head.innerHTML += `<style>
        .translate_original_text{
        }
        .translate_original_text, .translate_original_text * {
            color:white !important;
            background:black;
            font-size:1rem;
            font-weight:normal;
        }    
    </style>`;
    function notranslate_findUp(child, className) {
        while (child.parentNode) {
            child = child.parentNode;
            if(!child)
                return null;
            if (child?.classList?.contains('className'))
                return child;
        }
        return null;
    }
    let notranslate_target = null;
    document.querySelectorAll('p,h1,h2,h3,h4,h5,h6,li,table').forEach(function(e, index){
        var clone = e.cloneNode(true);
        clone.classList.add('notranslate');
        clone.classList.add('translate_original_text')
        clone.style.border = '10px solid rgba(255,255,255,.5)';
        clone.style.borderRadius = '5px';
        clone.style.padding = '0.1rem';
        clone.style.color = 'white';
        clone.style.marginTop = '2rem';
        clone.style.padding = '3px';
        clone.style.position = 'absolute';
        clone.style.maxWidth = '400px';
        clone.style.margin = 0;
        clone.style.display = 'none';
        clone.style.zIndex = 1000+index;
        var parent = document.querySelector('body');
        parent.append(clone);
        e.addEventListener('mouseenter', (e)=>{
            document.querySelectorAll('.translate_original_text').forEach(e=>{
                console.log('e', e);
                e.style.display = 'none'
            });
            notranslate_target = {target:e.target, avatar:clone};
            notranslate_target.avatar.style.display='block';
        });
        e.addEventListener('mouseleave', (e)=>{
            if(!notranslate_target)
                return;
            // console.log('e', notranslate_target.target, e.target, notranslate_target === e.target);
            notranslate_target.avatar.style.display='none';
            notranslate_target = null;
            console.log('mouseleave')
        })
    });
    window.addEventListener('mousemove', (e)=>{
        if(!notranslate_target)
            return;
        notranslate_target.avatar.style.top = (e.pageY-notranslate_target.avatar.offsetHeight-20)+'px';
        notranslate_target.avatar.style.left = (e.pageX+20)+'px';
    })
    document.querySelectorAll('code, pre').forEach(function(e){
        e.classList.add('notranslate');
    });