title: Getting selected text does not work on certain webpages
body: <p>I am writing a Chrome extension for which I need to read the selected text from the webpage. Here are the relevant pieces of my code:</p>
  
  <p><em>manifest.json</em>:</p>
  
  <pre><code>{
  "name": "XXX",
  "version": "1.0",
  "manifest_version": 2,
  "description": "XXX",
  "icons": {
  "128": "images/icon.png"
  },
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "tabs"
  ],
  "content_scripts": [{
    "matches": ["&lt;all_urls&gt;"],
    "js": [ "content_script.js" ],
    "run_at": "document_start",
    "all_frames": true
  }],
  
  }
  </code></pre>
  
  <p><em>content_script.js</em>:</p>
  
  <pre class="lang-js prettyprint-override"><code>chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
      if (request.method == "getSelection") {
          var sel = window.getSelection();
          var selectedText = sel.toString();
          console.log("getSelection requested, sending \""+selectedText+"\"")
          sendResponse({data: selectedText})
      }
  });
  </code></pre>
  
  <p><em>popup.html</em></p>
  
  
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>popup.js</em>:</p>
  
  <pre class="lang-js prettyprint-override"><code>  chrome.tabs.query( {active:true, windowId: chrome.windows.WINDOW_ID_CURRENT}, 
      function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {method: "getSelection"}, 
          function(response){
            console.log("getSelection method returned - " + response.data)
          });
      });
  </code></pre>
  
  <p>This works perfectly on simple pages like Wikipedia; however it does not work on pages with lot of dynamic content like say cnn.com</p>
  
  <p>The console log below shows messages generated on one click of extension. They seem to indicate that message is sent to multiple elements in the page or its received multiple times (though in popup.js its only sent once). Some return " whereas some return the correct selection.</p>
  
  <pre><code>getSelection requested, sending ""      selection.js:26 
  getSelection requested, sending ""      selection.js:26 
  getSelection requested, sending ""      selection.js:26 
  getSelection requested, sending ""      selection.js:26 
  getSelection requested, sending ""      selection.js:26 
  getSelection requested, sending ""      selection.js:26 
  getSelection requested, sending "Trump" selection.js:26 
  getSelection requested, sending ""      selection.js:26 
  </code></pre>
  
  <p>I am trying to figure out:</p>
  
  <ul>
  <li>What's going on here?</li>
  <li>What's the right way to get selected text?</li>
  </ul>