Chrome Erweiterung ausgewählten Text

Ich bin auf der Suche nach einer Möglichkeit, einen Rahmen/Rahmen (wie Evernote Web Clipper: unter Bild) um meinen ausgewählten Text in meine Chrome-Erweiterung hinzuzufügen.Chrome Erweiterung ausgewählten Text

, das zu tun, dachte ich den HTML-Code der Auswahl erfassen und einen Rahmen/Rahmen um den aktuell ausgewählten Text hinzufügen. Aber ich sehe nicht, wie kann ich das tun ...

Hier ist mein Code:

manifest.json:

{ 
"name": "Selected Text", 
"version": "0.1", 
"description": "Selected Text", 
"manifest_version": 2, 
"browser_action": { 
    "default_title": "Selected Text", 
    "default_icon": "online.png", 
    "default_popup": "popup.html" 
}, 
"permissions": [ 
    "tabs", 
    "<all_urls>" 
], 
"content_scripts": [ 
    { 
    "matches": ["<all_urls>"], 
    "js": ["popup.js"] 
    } 
] 
}

popup.js:

chrome.tabs.executeScript({ 
    code: "window.getSelection().toString();" 
    }, function(selection) { 

     console.log(selection[0]); 
     if(selection[0].length > 0){ 
     document.getElementById("text").value = selection[0]; 
     } 
});

Popup .html:

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="popup.js"></script> 
    <style> 
     body { width: 300px; } 
     textarea { width: 250px; height: 100px;} 
    </style> 
    </head> 
    <body> 
    <textarea id="text"> </textarea> 
    </body> 
</html>

Quelle

2016-11-22 Steve23

Was ist der Textbereich in popup.html? – sabithpocker

@sabitpocker Es ist nur eine temporäre Vorschau zu haben. – Steve23

Sie können es mit 01 tunEreignis wie folgt aus:

// Add event listener for mouseup (there is no event for selection) 
 
document.addEventListener('mouseup', highlightSelectedBlock, false) 
 

 
function highlightSelectedBlock() { 
 
    // TODO Filter only selections 
 

 
    // Get Node where selection starts 
 
    let elementWhereSelectionStart = window.getSelection().anchorNode 
 

 
    // TODO Get Node where selection ends with Selection.focusNode() 
 
    // TODO Get Nodes in between start and end of selection 
 

 
    // I've hardcoded finding closest block element for a simplicity 
 
    let closestBlockElement = elementWhereSelectionStart.parentNode 
 

 
    // Add non disturbing border to selected elements 
 
    // For simplicity I've adding outline only for the start element 
 
    closestBlockElement.style.outline = '1px solid blue' 
 
    
 
    // TODO Clear outline on some event: saving selection, ending selection etc 
 
    setTimeout(() => { closestBlockElement.style.outline = 'none' }, 2000) 
 
}

<p>First line 
 
<p>Second line 
 
<p>Third line

Aber für das wirkliche Leben sollte es komplizierter sein, denken Sie an:

Auswahl von Tastatur
Highlight mehrere Elemente, die sein können knifflige
Auswahl von Bildern innerhalb
Highlight

Vielleicht eine gute Idee, ständig Umfrage DOM für ein Auswahlobjekt mit window.requestAnimationFrame() statt mit Ereignis-Listener mouseup kann es zu entfernen sein.

Quelle

2016-11-22 16:42:37 terales

Chrome Erweiterung ausgewählten Text

Antwort

Verwandte Themen