크롬 사용자에게 재미있는 경험 주기

tistory_blog_sidebar.html

<div id="make-google-chrome-great-again"
style="display: none; position: absolute; top: 0; left: 0; width: calc(100% - 2px - 1em); background: white; border: 1px solid grey; text-align: center; margin: 0.5em; z-index: 123456789;">
    <h1>앗! 야생의 구글 크롬 사용자닷!</h1>
    <p style="padding: 0.5em;">구글 크롬 좋은데요 사람들이 너무 많이 써서 요즘엔 다른 브라우저를 차별하더라구요.<br />특히 <a href="https://gigglehd.com/gg/soft/4748028">유튜브 너!</a> 요즘 구글 사악합니다.</p>
    <p style="padding: 0.5em;">이 사이트는 그런 건 없지만 구글 크롬 유저분들을 좀 더 재미있게 해드릴겁니다.</p>
    <button onclick='document.getElementById("make-google-chrome-great-again").style.display = "none";'>CLOSE</button> / <a href="https://gist.github.com/sftblw/17e1e6405fee1dabae3a5d06bb8a66c9">소스코드</a>
</div>
<script>
    // https://stackoverflow.com/a/13348618
    var isChromium = window.chrome;
    var winNav = window.navigator;
    var vendorName = winNav.vendor;
    var isOpera = typeof window.opr !== "undefined";
    var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
    var isIOSChrome = winNav.userAgent.match("CriOS");

    if (isIOSChrome) {
        // is Google Chrome on IOS
    } else if(
        isChromium !== null &&
        typeof isChromium !== "undefined" &&
        vendorName === "Google Inc." &&
        isOpera === false &&
        isIEedge === false
    ) {
        // is Google Chrome
        document.getElementById('make-google-chrome-great-again').style.display = 'block';
document.body.style.transition = 'filter 2s';

        function randNum(base, plus, round) {
            return Math.floor(((base + Math.random() * plus) * Math.pow(10, round))) / Math.pow(10, round)
        }
        setInterval(function(){
            document.body.style.opacity = Math.random() * 0.2 + 0.8;
            document.body.style.filter = `contrast(${randNum(90, 20, 2)}%) hue-rotate(${randNum(0, 360, 0)}deg)`;
        }, 3000);
    } else { 
        // not Google Chrome 
    }
</script>