<html>
    <head>
        <style>
            body{
                margin: 0;
                padding: 0;
                pointer-events: none;
            }
            .hover {
                pointer-events: none;
                outline: 1px solid #000;
                position: absolute;
                -webkit-transform: translate3d(0, 0, 0);
            }
            .selection {
                pointer-events: none;
                outline: 1px solid #00A2FF;
                position: absolute;
                -webkit-transform:translate3d(-10000px, -10000px, 0px);
            }
        </style>
        <script>
            var message = {
                    ADD_HOVER: "ADD HOVER",
                    REMOVE_HOVER: "REMOVE HOVER",
                    ADD_SELECTION: "ADD SELECTION",
                    REMOVE_SELECTION: "REMOVE SELECTION"
                },
                createAndAppendDiv = function (className, css) {
                    var allSelectionDivs = document.getElementsByClassName(className);

                    if (allSelectionDivs.length === 1 && allSelectionDivs[0].style.webkitTransform === 'translate3d(-10000px, -10000px, 0px)') {
                        allSelectionDivs[0].style.cssText = css;
                    } else {
                        var parent = document.body,
                            newDiv = document.createElement("div");
                        newDiv.className = className;
                        newDiv.style.cssText = css;
                        parent.appendChild(newDiv);
                    }
                },
                removeDivs = function (className) {
                    var allDivs = document.getElementsByClassName(className),
                        parent = document.body,
                        i = allDivs.length - 1;
                    
                    for (i; i > 0; --i ) {
                        parent.removeChild(allDivs[0])
                    }
                    
                    allDivs[0].style.webkitTransform = 'translate3d(-10000px, -10000px, 0px)';
                },
                moveHoverDiv = function (css) {
                    var hoverDiv = document.getElementsByClassName('hover')[0];
                    if (hoverDiv) {
                        hoverDiv.style.cssText = css;
                    }
                },
                hideHoverDiv = function () {
                    var hoverDiv = document.getElementsByClassName('hover')[0];
                    if (hoverDiv) {
                        hoverDiv.style.webkitTransform = 'translate3d(-10000px, -10000px, 0px)';
                    }
                },
                messageHandler = function (event) {
                    var data = event.data;
                    if (data.type === message.ADD_HOVER) {
                        moveHoverDiv(data.css);
                    } else if (data.type === message.ADD_SELECTION) {
                        createAndAppendDiv("selection", data.css);
                    } else if (data.type === message.REMOVE_SELECTION) {
                        removeDivs("selection");
                    } else if (data.type === message.REMOVE_HOVER) {
                        hideHoverDiv();
                    }
                };
            window.addEventListener("message", messageHandler, false);
        </script>
    </head>
    <body>
        <div class="hover">
        </div>
        <div class="selection">
        </div>
    </body>
</html>