title: getSelection.getRangeAt(0) in Google Chrome Extension
body: <p>I'm trying to determine the position of a selected text in my browser. I need the position to show a tooltip above the selected text. I guess if I get the boundaries, I'm able to calculate the middle of that. 
  I fiddled around and looked here for suggestions, but couldn't find a solution.</p>
  
  <p>If I'm not mistaken, this seems to be a problem related to Google Chrome?</p>
  
  <blockquote>
    <p>Please be aware, that I'm trying to create a chrome-extension, so there is no need of testing if it works in Firefox / IE ...</p>
  </blockquote>
  
  <p>This is all the code which causes the trouble:</p>
  
  <pre><code>var selection = window.getSelection();
  
  // calculate the posiition of the selection
  var oRange = selection.getRangeAt(0);
  var oRect = oRange.getBoundingClientRect();
  console.log(oRect);
  </code></pre>
  
  <p>(I tried to refer to this example <a href="https://stackoverflow.com/a/17887684/3372043" title="here">here</a>)</p>
  
  <p>The error is like this:</p>
  
  <blockquote>
    <p>background.js:20 Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.</p>
  </blockquote>
  
  <p>If this is doable with <code>jQuery</code>, I don't mind using this as well, I'm not restricted to native JavaScript.</p>
  
  <p>Complete code of my <strong>background.js</strong></p>
  
  <pre><code>chrome.contextMenus.create({
      "title": "Übersetzen",
      "contexts": ["selection"],
      "onclick" : clickHandler
  });
  
  function clickHandler(e) {
  
      var translateUrl = "https://glosbe.com/gapi/translate?from=eng&amp;dest=deu&amp;format=json&amp;phrase=" + encodeURI(e.selectionText.toLowerCase()) + "&amp;pretty=true";
      $.getJSON(translateUrl, callback);
      // console.log(data.responseTex);
  }
  
  function callback(data) {
      var translation = data.tuc[0].phrase.text;
      var selection = document.getSelection();
  
       console.log(selection);
  
  
      // calculate the position of the selection
      var oRange = selection.getRangeAt(0);
      var oRect = oRange.getBoundingClientRect();
      console.log(oRect);
      var selection = "";
  
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
          chrome.tabs.sendMessage(tabs[0].id, {translation: translation}, function(response) {});
      });
  }
  </code></pre>
  
  <p><strong>Update:</strong> When I run this code directly in the browser-console, it works as expected (If that is useful as a hint)</p>
  
  <p><strong>Update2:</strong> Maybe this is important: After selecting the text, I open the context-menu (via mouseclick) and click on an item, but the selection shouldn't be affected by this.</p>
  
  <p><strong>Update3:</strong> The code above works fine in an example-HTML page. My Background script seems to get an unfilled object (where there all the values are null)</p>
  
  <p><strong>Update 4:</strong> I added the complete code for reference (I also tried <code>chrome.tabs.executeScript</code> - but without success)</p>