我正在尝试确定所选文本在我的浏览器中的位置。我需要在所选文本上方显示工具提示的位置。我想如果我得到边界,我就能计算出它的中间值。 我四处寻找建议,但找不到解决方案。
如果我没记错的话,这似乎是与 Google Chrome 相关的问题?
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 ...
这是导致问题的所有代码:
var selection = window.getSelection();
// calculate the posiition of the selection
var oRange = selection.getRangeAt(0);
var oRect = oRange.getBoundingClientRect();
console.log(oRect);
(我试图引用这个例子 here )
错误是这样的:
background.js:20 Uncaught DOMException: Failed to execute 'getRangeAt' on '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);
// 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) {});
});
}
更新:当我直接在浏览器控制台中运行这段代码时,它按预期工作(如果这对提示有用的话)
更新 2:也许这很重要:选择文本后,我打开上下文菜单(通过鼠标单击)并单击一个项目,但选择不应受此影响。
更新 3: 上面的代码在示例 HTML 页面中运行良好。我的后台脚本似乎得到了一个未填充的对象(其中所有值为空)
更新 4: 我添加了完整的代码以供引用(我也尝试了 chrome.tabs.executeScript
- 但没有成功)
最佳答案
您需要在您的内容脚本中获取选择,而不是在后台脚本中。尝试调用您的“onMessage”方法并在那里使用 var s = window.getSelection()。如果您将其登录到控制台,它会按预期工作。
关于javascript - Google Chrome 扩展程序中的 getSelection.getRangeAt(0),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47581527/