Chrome Texte d'extension sélectionné

Je cherche un moyen d'ajouter un cadre/une bordure (comme Evernote Web Clipper: image ci-dessous) autour du texte que j'ai sélectionné dans mon extension Chrome.Chrome Texte d'extension sélectionné

Pour ce faire, je pensais capturer le code HTML de la sélection et ajouter un cadre/bordure autour du texte actuel sélectionné. Mais je ne vois pas comment je peux le faire ...

Voici mon 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]; 
     } 
});

pop-up .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>

Source

2016-11-22 Steve23

Quelle est l'utilisation de la zone de texte dans popup.html? – sabithpocker

@sabithpocker C'est juste pour avoir un aperçu temporaire. – Steve23

Vous pouvez le faire avec 01 événementcomme ceci:

// 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

Mais pour la vraie vie, il devrait être plus complexe, pensez à:

sélections du clavier
mettent en évidence plusieurs éléments, qui peuvent être difficile
sélection d'images à l'intérieur
suppression fort sur un grand nombre de cas différents

Peut-être que ce peut être une bonne idée de DOM constamment scrutin pour un objet de sélection avec window.requestAnimationFrame() au lieu d'ajouter écouteur d'événement à mouseup.

Source

2016-11-22 16:42:37 terales

Chrome Texte d'extension sélectionné

Répondre

Questions connexes