Question

我试图确定浏览器中所选文本的位置。我需要在所选文本上方显示工具提示的位置。我想如果我得到了界限，我就可以计算出它的中间部分。我摆弄着，在这里寻找建议，但无法找到解决方案。

如果我没弄错，这似乎是与谷歌浏览器有关的问题？

请注意，我正在尝试创建Chrome扩展程序，因此无需测试它是否适用于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未捕获的DOMException：无法执行＆＃39; getRangeAt＆＃39; on＆＃39; Selection＆＃39;：0不是有效索引。

如果这对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) {});
    });
}

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

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

Update3：上面的代码在示例HTML页面中运行正常。我的后台脚本似乎获得了一个未填充的对象（其中所有值都为null）

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

Answer 1

您需要在内容脚本中进行选择，而不是在后台脚本中进行选择。尝试调用你的“onMessage”-method并在那里使用var s = window.getSelection（）。如果您将其记录到控制台中，它将按预期工作。

Google Chrome扩展程序

1 个答案: