在chrome搜索栏中获取当前选定的文本(输入字段)

时间:2018-07-16 22:09:56

标签: javascript html google-chrome-extension frontend html-input

我目前正在开发一个chrome扩展程序,该扩展程序将js脚本注入访问过的网站。它获取当前选定的文本(由光标突出显示),然后在该文本上重新聚焦之后。我的saveSelection和restoreSelection函数如下:

saveSelection = function(containerEl) {
    let range = window.getSelection()
        .getRangeAt(0);
    let preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    let start = preSelectionRange.toString()
        .length;
    return {start: start,
        end: start + range.toString()
            .length}
};

restoreSelection = function(containerEl, savedSel)
{
    let charIndex = 0,
        range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    let nodeStack = [containerEl],
        node, foundStart = false,
        stop = false;
    while (!stop && (node = nodeStack.pop()))
    {
        if (node.nodeType === 3)
        {
            let nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex)
            {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex)
            {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        }
        else
        {
            let i = node.childNodes.length;
            while (i--)
            {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

这些功能适用于段落中的文本,但适用于输入字段(例如google搜索栏,codepen,jsfiddle)中的文本,脚本无法重新关注文本。在调试中,我发现范围startOffset和endOffset =0。

我如何1)获取选择范围,以及2)重新关注搜索栏中的文本?

0 个答案:

没有答案