¿Desea inspeccionar el elemento de la extensión de Chrome?

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.¿Desea inspeccionar el elemento de la extensión de Chrome?

No necesito mostrar el DOM o un panel como estas herramientas. Simplemente necesito saber qué 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.

Fuente

2011-06-30 Mech Software

Gracias a todos por la entrada, pero una cosa que no noté y voy a editar es que no tengo control sobre la página. Es por eso que quiero hacer esto como una extensión. No puedo hacer esto en la página en sí. No controlo el contenido y necesito que esto funcione como un "firebug". –

Puede hacer esto en la página, y debería hacerlo. Se llama secuencias de comandos de contenido: http://code.google.com/chrome/extensions/dev/content_scripts.html – serg

Es un trabajo bastante grande. Con jQuery puede estilo del elemento que el ratón sobre este aspecto:

$("*").not("body, html").hover(function(e) { 
    $(this).css("border", "1px solid #000"); 
    e.stopPropagation(); 
}, function(e) { 
    $(this).css("border", "0px"); 
    e.stopPropagation(); 
});

Para obtener el expresson xRuta es algo que tendría que hacer usted mismo, aunque es posible encontrar firebug's implementation of it un recurso útil.

Fuente

2011-06-30 16:20:31 bcoughlan

Aquí es una aplicación muy básica para empezar:

css inyectado (a través manifiesto):

.el-selection {outline: 1px solid blue;}

inyectado escritura de contenido:

$(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; 
});

Fuente

2011-06-30 16:22:15 serg

Siempre se puede 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. Basta con incluir este script en el código HTML <head>:

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Espero que ayude.

Fuente

2011-06-30 17:49:41

¿Desea inspeccionar el elemento de la extensión de Chrome?

Respuesta

Cuestiones relacionadas