Textauswahl und Bubble-Overlay als Chrome-Erweiterung

Question

Ich bin auf der Suche nach einer Möglichkeit, Text auf einer Website in Chrome auszuwählen und einen Overlay/Tooltip Pop mit Inhalt abhängig von der Textauswahl zu haben.

Hat jemand das schon einmal gemacht oder weiß von oben, wie man das Toolip-Popup macht?

Sehr geschätzt.

Answer 1

Alles, was Sie tun müssen, ist für Mausereignisse hören:

• mousedown-: die Blase zu verstecken.
• MouseUp: um die Blase zu zeigen.

Zum Beispiel könnte dies Ihnen den Einstieg erleichtern. Weitere Verbesserungen sind erforderlich, um herauszufinden, ob Sie die Auswahl von unten-> oben, rechts-> links usw. (alle Richtungen) initiiert haben. Sie können den folgenden Code als Start verwenden:

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

ändern die Spiele Anteil an der Domain, die Sie inje ct diese Inhaltsskripte.

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

Wenn Sie wollen, dass es um Stil wie eine Blase zu sehen, hat Nicolas Gallagher einige tolle CSS3 demos für Blasen!

Answer 2

Wenn niemand eine bessere Antwort bietet, dann könnten Sie sehen, wie Google Dictionary Erweiterung tut es (es wäre schwer, wie sein Code minimiert ist).

Answer 3

Ich schrieb etwas ähnliches zu dem, was Sie fragen. Ich hörte, dass der Benutzer Text auswählte, und wenn es eine Auswahl gab, zeigte ich eine Liste von Links für Dinge wie "Notiz auf Facebook", "Definieren" usw. an.

Ein oder zwei Tage später fing ich an, es zu schreiben Ich habe festgestellt, dass Google in einem zukünftigen Release eine Unterstützung für das Kontextmenü hinzufügen würde, so dass ich dies erst vor kurzem (wenn ich in Kontextmenüs konvertiert habe) anfasste.

Werfen Sie einen Blick auf den Code:

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