Итак, я сделал расширение для Chrome, чтобы размыть и убрать (когда парил) некоторые ненормативную лексику, которые я храню в файле json.Скрипт отлично работает практически на всех сайтах, которые я тестировал, но замедляет загрузку страниц для некоторых сайтов, таких как Facebook и Twitter (очень плохая производительность)
Я пытался использовать некоторые моменты из этого хорошо описанного ответа, но ни один из них, похоже, неработа для меня: Производительность MutationObserver для обнаружения узлов во всем DOM
let profanityWords='';
var URL= chrome.extension.getURL('../../common/profanity_list_en.json');
var request = new XMLHttpRequest();
request.open('GET', URL , false); // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
var msgs = JSON.parse(request.responseText);
//console.log(msgs.list);
profanityWords=msgs.list;
}
console.log(profanityWords);
function newww(){
for(var i = 0, len = profanityWords.length; i < len; i++){
let searchTerm=profanityWords[i];
matchText(document.body, new RegExp("\\b" + searchTerm + "\\b", "i"), function(node, match, offset) {
var span = document.createElement("span");
// span.parentNode.id="bblur";
span.id = "SSS-blur";
span.textContent = match;
span.style.filter="blur(5px)";
span.addEventListener("mouseover", mouseOver, false);
span.addEventListener("mouseout", mouseOut, false);
return span;
});
}
}
var targetNode=document.body;
var config = {childList:true,subtree: true};
var callback = function(mutationsList, observer) {
newww();
}
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
var matchText = function(node, regex, callback, excludeElements) {
excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
var child = node.firstChild;
while (child) {
switch (child.nodeType) {
case 1:
if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
break;
if (child.id !== 'SSS-blur') {
matchText(child, regex, callback, excludeElements);
}
break;
case 3:
var bk = 0;
child.data.replace(regex, function(all) {
var args = [].slice.call(arguments),
offset = args[args.length - 2],
newTextNode = child.splitText(offset+bk), tag;
bk -= child.data.length + all.length;
newTextNode.data = newTextNode.data.substr(all.length);
tag = callback.apply(window, [child].concat(args));
child.parentNode.insertBefore(tag, newTextNode);
child = newTextNode;
});
regex.lastIndex = 0;
break;
}
child = child.nextSibling;
}
return node;
};
function mouseOver()
{
this.style.filter="blur(0px)";
}
function mouseOut()
{
this.style.filter="blur(5px)";
}
Буду признателен за ваши предложения о том, как сделать этот скрипт оптимизированным и быстрым любым способом, не влияя на его покрытиена ДОМ.Спасибо