Question

我使用以下代码突出显示Chrome扩展程序的内容脚本中的“and”一词。

function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

findText(document.body, /\band\b/g, function(node, match) {
    var span= document.createElement('span');
    span.className= 'highlight';
    node.splitText(match.index+3);
    span.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

此代码在维基百科等网页上成功突出显示“和”一词，但当我浏览更复杂的网站时，例如espn.com或cnn.com，则无法突出显示“和”这个词。

我猜我是如何接近DOM树的，但是无法安静地弄清楚它。

Answer 1

通过Chrome扩展程序突出显示页面上的文字必须通过 'Content Script'完成。内容脚本的目的是使用CSS / Javascript收集数据或更改您正在浏览的页面。所以我们需要将 highlight（）函数放在内容脚本中。

以下是highlight（）方法的示例代码：

highlight('yellow');

在您的内容脚本中，您需要收听来自您的扩展程序的请求，以便我们向其发送所选文本：

chrome.extension.onRequest.addListener(function(request, sender,  sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});

与突出显示来自不同网站的文本不一致

1 个答案: