¿Obtener selección de página incluyendo HTML?

Question

Estoy escribiendo una extensión de Chrome, y me preguntaba si era posible obtener el texto seleccionado de una pestaña en particular, incluido el HTML subyacente. Entonces, si selecciono un enlace, también debería devolver la etiqueta <a>.

He intentado buscando en los objetos de eventos de menú de contexto (sí, estoy usando un menú contextual para esto), y esto es todo lo que conlleva la devolución de llamada:

editable : false 
menuItemId : 1 
pageUrl : <the URL> 
selectionText : <the selected text in plaintext formatting, not HTML> 

También devuelve un objeto Tab , pero tampoco nada fue muy útil.

Así que estoy un poco perdido aquí. ¿Esto es posible? Si es así, cualquier idea que tengas será grandiosa. ¡Gracias! :)

Answer 1

Parece que las extensiones this y this hacen lo que necesita.

Answer 2

Conseguir el texto seleccionado de una página es bastante fácil, se puede hacer algo como

var text = window.getSelection().toString(); 

y obtendrá una representación de texto del texto seleccionado en ese momento que se puede pasar de un guión de contenido a una página de fondo o una ventana emergente.

Obtener contenido HTML es mucho más difícil, principalmente porque la selección no siempre está en un límite HTML limpio en el documento (¿qué pasa si solo selecciona una parte pequeña de un enlace largo o unas pocas celdas de una tabla? por ejemplo). La forma más directa de obtener todos los html asociados con una selección es hacer referencia a commonAncestorContainer, que es una propiedad en un rango de selección que corresponde con el nodo más profundo que contiene tanto el inicio como el final de la selección. Para hacer esto, harías algo como:

var selection = window.getSelection(); 
// Only works with a single range - add extra logic to 
// iterate over more ranges if needed 
var range = selection.getRangeAt(0); 
var container = range.commonAncestorContainer; 
var html = container.innerHTML 

Por supuesto, esto probablemente contenga una gran cantidad de HTML que no fue realmente seleccionado. Es posible que puedas iterar a través de los hijos del ancestro común y podar cualquier cosa que no esté en la selección, pero eso va a ser un poco más complicado y puede no ser necesario dependiendo de lo que estés tratando de hacer.

Para mostrar cómo envolver todo esto para arriba en una extensión, he escrito una pequeña muestra que se puede hacer referencia a: http://github.com/kurrik/chrome-extensions/tree/master/contentscript-selection/

Answer 3

Si no desea que todos de los hermanos, sólo el HTML seleccionado, utilice range otros métodos como .cloneContents() (para copiar) o .extractContents() (para cortar).

Aquí uso .cloneContents():

function getSelectedHTML() { 
    var range = window.getSelection().getRangeAt(0); // Get the selected range 
    var div = document.createElement("div"); 
    div.appendChild(range.cloneContents()); // Get the document fragment from selected range 
    return div.innerHTML; // Return the actual HTML 
}