使用Javascript前后更改背景颜色？

我正在开发一个Chrome扩展。我在这里有一个函数：

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

问题是：

1） 它要求文本仍处于选中状态，但单击会取消选中该文本，因此仅当您重新选择完全相同的文本并实际单击该文本时，它才起作用

2） 这似乎会使页面运行得更慢，甚至有时会锁定页面

我想做的是：

当我在任何地方单击时，文本将取消高亮显示并取消选中（基本上，每当文本取消选中时，将“高亮显示”设置为透明或之前的任何内容）

你怎么办

---

仅限Javascript。如果您有使用jQuery的方法，请告诉我，但请记住，我必须在Chrome扩展的content.js文件中使用它。

use可以使用以下代码取消高亮显示。这很好用。：）

此处“span”是由创建的元素

document.execCommand("HiliteColor", false, colour)

---

小评论：将JQuery嵌入内容脚本是完全可以接受的。当您通过清单文件执行此操作时，JQuery将以沙盒模式运行，这意味着它不会与页面上的脚本本身冲突。关于您的主要问题，我不知道在取消选中文本后如何恢复高亮显示。也许有一种方法可以选择页面上的所有文本并删除所有突出显示或类似内容？另一个要点是：由于这是一个Chrome扩展，您不需要“IE9和非IE”代码。：-）编写Chrome扩展的有趣之处在于，你不必担心任何浏览器的兼容性。这就是我想去除高光的原因。删除整个页面中的所有突出显示，因为我不知道在没有选定文本的情况下如何删除。问题是，如果没有选择，如何全局删除所有文本中的所有突出显示，而不管文本是在还是在a或a或其他位置。如果它具有高光颜色，则将其设置为“透明”或将其删除。不知道该怎么做，已经找了五天了。

document.designMode = 'on';
document.execCommand("undo", false, 'span');
document.designMode = 'off';

document.execCommand("HiliteColor", false, colour)