I am trying to determine the position of selected text in my browser. I need a position to show a tooltip above the selected text. I assume that if I get the boundaries, I can figure out the middle of this. I was busy and looked at the offers here, but could not find a solution.
If I'm not mistaken, does this seem to be a problem with Google Chrome?
Remember that I am trying to create a chrome extension, so there is no need to test if it works in Firefox / IE ...
This is all the code causing the problem:
var selection = window.getSelection();
var oRange = selection.getRangeAt(0);
var oRect = oRange.getBoundingClientRect();
console.log(oRect);
(I tried to refer to this example here )
The error looks like this:
background.js: 20 Uncaught DOMException: Failed to execute 'getRangeAt' in 'Selection': 0 is not a valid index.
jQuery, , JavaScript.
background.js
chrome.contextMenus.create({
"title": "Übersetzen",
"contexts": ["selection"],
"onclick" : clickHandler
});
function clickHandler(e) {
var translateUrl = "https://glosbe.com/gapi/translate?from=eng&dest=deu&format=json&phrase=" + encodeURI(e.selectionText.toLowerCase()) + "&pretty=true";
$.getJSON(translateUrl, callback);
}
function callback(data) {
var translation = data.tuc[0].phrase.text;
var selection = document.getSelection();
console.log(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) {});
});
}
:. , ( )
Update2: , : ( mouseclick) , .
Update3: -HTML. script, , ( )
4: ( chrome.tabs.executeScript - )