Chrome拡張機能が選択されたテキスト

私のChrome拡張機能に、選択したテキストの周りにフレーム/枠（Evernote Web Clipper：下の画像など）を追加する方法を探しています。Chrome拡張機能が選択されたテキスト

それを行うには、私は選択のHTMLコードをキャプチャし、現在選択されているテキストの周りにフレーム/境界線を追加思いました。しかし、私はそれを行うことができますどのように表示されていない...ここで

は私のコードです：

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

ポップアップ.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>

出典

2016-11-22 Steve23

popup.htmlのテキスト領域の使用方法は？ – sabithpocker

@sabithpockerちょうど一時的なプレビューを持つことです。 – Steve23

01このようなイベント：することができ、

ハイライトいくつかの要素キーボードから

選択：

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

しかし、本当の生活のために、それはより複雑にする必要がありますが、考えますトリッキー

内側の画像の選択
は、多分常にwindow.requestAnimationFrame()代わりのmouseupにイベントリスナーを追加すると選択オブジェクトのためのDOMをポーリングすることをお勧めすることができ異なる場合

の多くにハイライトを取り除きます。

出典

2016-11-22 16:42:37 terales

Chrome拡張機能が選択されたテキスト

答えて

関連する問題