javascript - usar - Inspeccionar el elemento para la extensión de Chrome
edit css chrome (3)
Necesito la capacidad de realizar más o menos un elemento de inspección o más hasta el punto de poder resaltar y guardar elementos DOM particulares al pasar el mouse. Esto es sinónimo de la pestaña "Elementos" de las herramientas para desarrolladores de Google Chrome o la pestaña "HTML" en FireBug.
No necesito mostrar el DOM o un panel como estas herramientas. Simplemente necesito saber cuál es el objeto XPATH o DOM y luego poder resaltarlo (al igual que estas herramientas) en la página web misma. Estas herramientas actualmente muestran sombreado sobre los elementos cuando se seleccionan.
Quiero hacer esto preferiblemente en Chrome. ¿Hay alguna manera de agregar un oyente? Jugué con chrome.contextMenus.create, pero esto no le da acceso a la página ni le dice dónde se encuentra. El texto seleccionado allí es inútil para volver más adelante al mismo elemento DOM.
¿Alguien sabe de una API que le permite saber dónde está el mouse?
Nota: no tengo acceso a la página. es decir, la razón para esto como una extensión es porque estoy inspeccionando una página de terceros, no de la que tengo control.
Aquí hay una implementación muy básica para comenzar:
Css inyectado (a través del manifiesto):
.el-selection {outline: 1px solid blue;}
Script de contenido inyectado:
$(window).mouseenter(function(event) {
$(event.target).addClass("el-selection");
});
$(window).mouseleave(function(event) {
$(event.target).removeClass("el-selection");
});
$(window).click(function(event) {
console.log("selected: ", event.target);
return false;
});
Es un trabajo bastante grande. Con jQuery puedes diseñar el elemento sobre el que se mueve el mouse así:
$("*").not("body, html").hover(function(e) {
$(this).css("border", "1px solid #000");
e.stopPropagation();
}, function(e) {
$(this).css("border", "0px");
e.stopPropagation();
});
Obtener xPath expresson es algo que tendrías que hacer tú mismo, aunque podrías encontrar que la implementación de Firebug es un recurso útil.
Siempre puedes usar FireBug Lite para algo como esto. Es una versión de JavaScript, y por lo tanto, no importa de qué navegador lo esté utilizando. Simplemente incluya esta secuencia de comandos en el HTML <head> :
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Espero que ayude.