JavaScript to visually pick elements from the DOM and grab the XPath to it

xpath_dom_picker.js

var taggerSelectorCSSClass = "urx-tagger-selector";
var taggerStyle;

var addStyle = function() {
	taggerStyle = document.createElement("style");
	taggerStyle.innerHTML = "." + taggerSelectorCSSClass + " { background-color:green !important; color:white !important; border: 4px dashed white !important; }" +
							"." + taggerSelectorCSSClass + " * { color: black !important; }";
	document.body.appendChild(taggerStyle);
};

var removeStyle = function() {
	document.body.removeChild(taggerStyle);
}

var xpathToElem = function(element) {
	// This is the body element, dummy
    if (element === document.body) return element.tagName.toLowerCase();

    var pos = 0;
    var siblings = element.parentNode.childNodes;

    for (var i = 0; i < siblings.length; i++) {
        var sibling = siblings[i];
        if (sibling === element) {
        	return xpathToElem(element.parentNode) + // Path to this element
        			'/' + element.tagName.toLowerCase() +  // /thisTagName
        			//(element.id !== '' ? '[@id=\'' + element.id + '\']' : '') + // [@id='idGoesHere'], if id is present
        			'[' + (pos + 1) + ']'; // [3], element position
        }
        
        if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
            pos++;
        }
    }
}

var lastElem = null;
var taggingGoodExamples = true;
var currentLabel = "unlabeled";
var colletedData = {};

var selectionMouseOver = function(elem) {
	elem.addEventListener("mouseover", function(e){
		if (lastElem != e.target) {
			if(lastElem != null) {
				lastElem.classList.remove(taggerSelectorCSSClass);
			}
			lastElem = e.target;
			lastElem.classList.add(taggerSelectorCSSClass);
		}
	});
};

var selectionClick = function(elem) {
	elem.addEventListener("click", function(e){
		if (lastElem != null) {
			var xpath = xpathToElem(lastElem);
			alert("tagged: " + lastElem.outerHTML);
			if(!colletedData[currentLabel]) {
				colletedData[currentLabel] = {};
			}
			if(!colletedData[currentLabel][taggingGoodExamples]) {
				colletedData[currentLabel][taggingGoodExamples] = [];
			}
			colletedData[currentLabel][taggingGoodExamples].push(xpath);
			alert(JSON.stringify(colletedData));
		}
		e.preventDefault();
		return false;
	});
}

var actionKeypress = function(elem) {
	elem.addEventListener("keypress", function(e) {
		var key = String.fromCharCode(e.charCode);
		switch (key) {
			case "-":
			alert("Now tagging Bad Examples");
			taggingGoodExamples = false;
			break;

			case "=":
			alert("Now tagging Good Examples");
			taggingGoodExamples = true;
			break;

			case "l":
			currentLabel = prompt("Set a new label to tag by");
			break;

			case "p":
			removeStyle();
			window.open("data:text/plain;charset=US-ASCII," + escape(JSON.stringify({"url":window.location.href + "", "html":document.querySelector("html").outerHTML, "data":colletedData})));
			addStyle();
		}
	});
}

addStyle();
alert("\"l\" sets the label to tag, \"+\" tags good examples, \"-\" tags bad examples, \"p\" prints the output");
selectionMouseOver(document.body);
selectionClick(document.body);
actionKeypress(document.body);