0

So I made a chrome extension to blur and unblur (when hovered) some profanity words that I'm storing in a json file. Script works fine for almost all sites I tested but makes the page loading slow for some sites like facebook and twitter (very poor perfomance here)

I tried using some points from this well described answer but none of them seem to work for me: Performance of MutationObserver to detect nodes in entire 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)";
}

Would be grateful for your suggestions on how to make this script optimized and fast by any means without affecting its coverage on DOM. Thanks

Utsav Shukla
  • 47
  • 2
  • 8
  • Er, your code is rechecking the entire document every time a DOM mutation occurs. This is entirely wrong. You need to process the nodes inside mutationsList. I suggest you find examples of using the mutation observer properly and rewrite the entire code. Also do a performance profiling in devtools, the performance panel - click the reload icon in the panel toolbar. There are tutorials on how to read the output properly. You may want to embed json in your content script. – wOxxOm Jun 15 '19 at 07:01
  • 'you need to process the nodes inside mutationList' by this you mean to watch only some selected nodes instead of whole document.body if I am not wrong? – Utsav Shukla Jun 15 '19 at 23:42
  • No. You need to learn how MutationObserver works: the callback receives a list of changes (added/removed nodes), which you need to enumerate. It shouldn't take more than a few seconds to find an example. Here's mine: [How to change the HTML content as it's loading on the page](//stackoverflow.com/a/39334319) – wOxxOm Jun 16 '19 at 05:08

0 Answers0