Google Chrome 扩展中的 getSelection.getRangeAt(0)

Question

我正在尝试确定浏览器中所选文本的位置。我需要在所选文本上方显示工具提示的位置。我想如果我得到了边界，我就能够计算出中间的值。\n我四处摆弄并在这里寻找建议，但找不到解决方案。

\n\n

如果我没记错的话，这似乎是与 Google Chrome 相关的问题？

\n\n

\n

请注意，我正在尝试创建一个 chrome 扩展，因此无需测试它是否适用于 Firefox / IE ...

\n

\n\n

这是导致问题的所有代码：

\n\n

var selection = window.getSelection();\n\n// calculate the posiition of the selection\nvar oRange = selection.getRangeAt(0);\nvar oRect = oRange.getBoundingClientRect();\nconsole.log(oRect);\n

\n\n

（我试图在这里参考这个例子）

\n\n

错误是这样的：

\n\n

\n

background.js:20 Uncaught DOMException: 无法在“Selection”上执行“getRangeAt”：0 不是有效索引。

\n

\n\n

如果这可以用 实现jQuery，我也不介意使用它，我不限于本机 JavaScript。

\n\n

我的background.js的完整代码

\n\n

chrome.contextMenus.create({\n    "title": "\xc3\x9cbersetzen",\n    "contexts": ["selection"],\n    "onclick" : clickHandler\n});\n\nfunction clickHandler(e) {\n\n    var translateUrl = "https://glosbe.com/gapi/translate?from=eng&dest=deu&format=json&phrase=" + encodeURI(e.selectionText.toLowerCase()) + "&pretty=true";\n    $.getJSON(translateUrl, callback);\n    // console.log(data.responseTex);\n}\n\nfunction callback(data) {\n    var translation = data.tuc[0].phrase.text;\n    var selection = document.getSelection();\n\n     console.log(selection);\n\n\n    // calculate the position of the selection\n    var oRange = selection.getRangeAt(0);\n    var oRect = oRange.getBoundingClientRect();\n    console.log(oRect);\n    var selection = "";\n\n    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){\n        chrome.tabs.sendMessage(tabs[0].id, {translation: translation}, function(response) {});\n    });\n}\n

\n\n

更新：当我直接在浏览器控制台中运行此代码时，它按预期工作（如果这作为提示有用）

\n\n

更新2：也许这很重要：选择文本后，我打开上下文菜单（通过鼠标单击）并单击一个项目，但选择不应受此影响。

\n\n

Update3：上面的代码在示例 HTML 页面中运行良好。我的后台脚本似乎得到一个未填充的对象（其中所有值均为空）

\n\n

更新4：我添加了完整的代码以供参考（我也尝试过chrome.tabs.executeScript- 但没有成功）

\n

Answer 1

您需要在内容脚本中而不是在后台脚本中获取选择。尝试调用您的“onMessage”方法并在那里使用 var s = window.getSelection() 。如果您将其登录到控制台，它将按预期工作。