selector.js

function binux_init() {
    var bdiv = document.createElement('div');bdiv.id = 'binux-overlay';bdiv.setAttribute('style', 'display: none;');
    (document.body || document.documentElement).appendChild(bdiv);
    
    function getOffset(elem) {
        var top = 0;
        var left = 0;
        do {
            if ( !isNaN( elem.offsetLeft) ) left += elem.offsetLeft;
            if ( !isNaN( elem.offsetTop) ) top += elem.offsetTop;
        } while( elem = elem.offsetParent )
        return {top: top, left: left};
    }
    
    var ballowed_tag = ['ul', 'li', 'a', 'ol', 'table', 'tr', 'dd', 'dt', 'dl', 'h1', 'h2', 'h3', 'h4',
                        'b', 'i', 'strong', 'em', 'img', 'code', 'small', ]
    function _getSelector(element, need_tagName) {
        var result = '';
        if (need_tagName) {
            result += element.tagName;
        } else if (ballowed_tag.indexOf(element.tagName.toLowerCase()) != -1) {
            result += element.tagName;
        }
        
        if (element.id) {
            return result+'#'+element.id;
        } else if (element.classList.length > 0) {
            for(var i=0; i<element.classList.length; i++) {
                result += '.'+element.classList[i];
            }
        }
        return result;
    }
    
    function getSelector(element) {
        var result = [];
        result.push(_getSelector(element, true));
        while( element = element.parentElement ) {
            var selector = _getSelector(element);
            if (selector != '') result.push(selector);
        }
        result.reverse();
        return result.join(' ');
    }
    
    document.addEventListener('mouseover', function(event) {
        if (event.target === bdiv) return;
        //console.log(event);
        window.myevent = event;
        var overlay = document.querySelector('#binux-overlay');
        var offset = getOffset(event.target);
        overlay.setAttribute('style', 'z-index: 999999;background-color: rgba(255, 165, 0, 0.3); position: absolute; pointer-events: none;'
                     +'top: '+offset.top+'px;'
                     +'left:'+offset.left+'px;'
                     +'width: '+event.target.offsetWidth+'px;'
                     +'height: '+event.target.offsetHeight+'px;');
    }, false);
    
    document.addEventListener('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        if (event.target === bdiv) return;
        //console.log(event);
        window.myevent = event;
        
        var selector = getSelector(event.target);
        var matched = document.querySelectorAll(selector);
        console.log(selector, matched);
        window.prompt('matches: '+matched.length, getSelector(event.target));
    }, false);
    
    return true;
}

window.binux_inited = window.binux_inited || binux_init();
window.console = window.console || function(){};