Sélection de texte et superposition de bulles comme extension Chrome

Question

Je suis à la recherche d'un moyen de sélectionner du texte sur un site Web dans Chrome et avoir une superposition/info-bulle avec du contenu en fonction de la sélection de texte.

Quelqu'un a-t-il déjà fait cela ou sait-il du haut de la tête comment faire apparaître le toolip?

Très apprécié.

Answer 1

Tout ce que vous devez faire est d'écouter des événements de souris:

• mousedown: pour cacher la bulle.
• mouseup: pour montrer la bulle.

Par exemple, cela peut vous aider à démarrer. Plus de réglages sont nécessaires, pour savoir si vous avez initié la sélection de bas en haut, droite, gauche, etc (toutes les directions). Vous pouvez utiliser le code suivant comme une start-up:

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

Modifier les matchs partie au domaine que vous voulez injecter ct ces scripts de contenu.

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

Si vous voulez le style qu'il ressemble à une bulle, Nicolas Gallagher a fait une CSS3 impressionnante demos de bulles!

Answer 2

Si personne ne fournit une meilleure réponse, vous pouvez regarder comment l'extension Google Dictionary le fait (ce serait difficile car son code est minimisé).

Answer 3

J'ai écrit quelque chose de similaire à ce que vous demandez. J'ai écouté pour l'utilisateur de sélectionner le texte et quand il y avait une sélection, j'ai affiché une liste de liens pour des choses comme "Note sur Facebook", "Définir", etc

Un jour ou deux après que j'ai commencé à l'écrire , J'ai trouvé que google allait ajouter le support du menu contextuel dans une future version, donc je n'ai pas touché à cela jusqu'à récemment (quand j'ai converti en menus contextuels).

Jetez un oeil sur le code:

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