Question

我正在构建一个chrome扩展程序，其中所选文本可以应用不同的突出显示样式。我使用范围来使所有这些工作正常，然后我克隆了范围，在其周围放了一个跨度，然后删除了范围并用克隆的范围替换了它。一切似乎都很好，除非我通过扩展名触发了此行为，设法以某种方式禁用了右键单击。我将其范围缩小到range.surroundContents(span)的单行，但这是完整的代码部分：

// Determines the selected text
document.onmouseup = function() {
    var selection = document.getSelection();
    selection = getSelectedText(color);
};

// Finds the text selected in the page, spans it, and gives it a class
function getSelectedText(inputColor) {
    var span = document.createElement('span');
    span.setAttribute('class', inputColor);

    if(document.getSelection) {
        var selection = document.getSelection();
        if(selection.rangeCount == true) {
            var range = selection.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
}

有什么办法可以应对吗？我已经尝试在问题行之后直接使用document.oncontextmenu = false，但这并没有带来右键单击。我也尝试按照https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents的建议用newNode.appendChild(range.extractContents()); range.insertNode(newNode)替换它，但是它不是高亮显示文本，而是只是将其从页面中删除。

Answer 1

@wOxxOm在评论中回答了我的问题，但是setTimeout（）起作用了。因此，对于将来可能会遇到类似问题的其他人：

// Finds the text selected in the page, spans it, and gives it a class
function getSelectedText(inputColor) {
    var span = document.createElement('span');
    span.setAttribute('class', inputColor);

    if(document.getSelection) {
        var selection = document.getSelection();
        if(selection.rangeCount == true) {
            var range = selection.getRangeAt(0).cloneRange();
            setTimeout(function(){
                range.surroundContents(span);
                selection.removeAllRanges();
                selection.addRange(range);
            }, 100)
        }
    }
}

chrome扩展程序中的range.surroundContents禁用右键单击

1 个答案: