title: Chrome Extension selected text
body: <p>I am looking for a way to add a frame/border (like Evernote Web Clipper: below image) around my selected text into my Chrome extension.</p>
  
  <p><a href="https://i.stack.imgur.com/8lDTE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lDTE.jpg" alt="enter image description here"></a></p>
  
  <p>To do that, I thought capture the HTML code of the selection and add a frame/border around the current selected text. But I don't see how can I do that...</p>
  
  <p>Here is my code:</p>
  
  <p>Manifest.json:</p>
  
  <pre><code>{
   "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",
     "&lt;all_urls&gt;"
   ],
   "content_scripts": [
     {
       "matches": ["&lt;all_urls&gt;"],
       "js": ["popup.js"]
     }
   ]
  }
  </code></pre>
  
  <p>popup.js:</p>
  
  <pre><code>chrome.tabs.executeScript( {
      code: "window.getSelection().toString();"
      }, function(selection) {
  
        console.log(selection[0]);
        if(selection[0].length &gt; 0){
          document.getElementById("text").value = selection[0];
        }
  });
  </code></pre>
  
  <p>popup.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;style&gt;
        body { width: 300px; }
        textarea { width: 250px; height: 100px;}
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;textarea id="text"&gt; &lt;/textarea&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>