Selección de texto y superposición de burbujas como extensión de Chrome

Question

Estoy buscando una forma de seleccionar texto en un sitio web en Chrome y tener una superposición/información emergente emergente con contenido dependiendo de la selección de texto.

¿Alguien ha hecho esto antes o sabe desde lo alto de sus cabezas cómo hacer emergente la herramienta emergente?

Muy apreciado.

Answer 1

Todo lo que necesita hacer es escuchar a los eventos del ratón:

• mousedown: ocultar la burbuja.
• mouseup: para mostrar la burbuja.

Por ejemplo, esto podría ayudarlo a comenzar. Se necesitan más ajustes para averiguar si inició la selección desde abajo -> arriba, derecha -> izquierda, etc. (todas las direcciones). Usted puede utilizar el código siguiente como un inicio:

contentscript.js

// Add bubble to the top of the page. 
var bubbleDOM = document.createElement('div'); 
bubbleDOM.setAttribute('class', 'selection_bubble'); 
document.body.appendChild(bubbleDOM); 

// Lets listen to mouseup DOM events. 
document.addEventListener('mouseup', function (e) { 
    var selection = window.getSelection().toString(); 
    if (selection.length > 0) { 
    renderBubble(e.clientX, e.clientY, selection); 
    } 
}, false); 


// Close the bubble when we click on the screen. 
document.addEventListener('mousedown', function (e) { 
    bubbleDOM.style.visibility = 'hidden'; 
}, false); 

// Move that bubble to the appropriate location. 
function renderBubble(mouseX, mouseY, selection) { 
    bubbleDOM.innerHTML = selection; 
    bubbleDOM.style.top = mouseY + 'px'; 
    bubbleDOM.style.left = mouseX + 'px'; 
    bubbleDOM.style.visibility = 'visible'; 
} 

contentscript.css

.selection_bubble { 
    visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698)); 
} 

manifest.json

Cambiar los partidos porción del dominio que desea inyectar ct estos scripts de contenido.

... 
... 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "css": ["main.css"], 
     "js": ["main.js"], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
... 
... 

Si quieres estilo que se vea como una burbuja, Nicolas Gallagher hizo un poco de CSS3 impresionante demos de burbujas!

Answer 2

Si nadie proporciona una mejor respuesta, entonces puede ver cómo lo hace la extensión Google Dictionary (sería difícil ya que su código está minimizado).

Answer 3

Escribí algo similar a lo que pregunta. Escuché que el usuario seleccionara texto y cuando había una selección, mostré una lista de enlaces para cosas como "Nota en Facebook", "Definir", etc.

Uno o dos días después de que comencé a escribirlo , Descubrí que Google iba a agregar compatibilidad con el menú contextual en una versión futura, por lo que no lo toqué hasta hace poco (cuando me convertí en menús contextuales).

Tome un vistazo al código:

http://code.google.com/p/select-actions/source/browse/trunk/select_actions.js?r=4