Javascript blocking multible scripts with mutation observer doese't work

Question

i've created a script that block script defined in a json array.

But when i load more then 2 scripts the blocking doesen't work anymore.

Can anyone tell me what my mistake is or give me a hint how i can make it work with multible scripts.

This is blocking the google recaptcha script:

    <script>
        function blockScript(origin) {
            const scripts = Array.from(document.getElementsByTagName("SCRIPT"));
            if (scripts.length > 0) {
                scripts.forEach((script) => {
                    if (script.src.includes(origin)) {
                        document.head.removeChild(script);
                    }
                })
            }
        }
    </script>
    <script>

      var json = [
{
    "name" : "Google Recaptcha", 
    "url"   : "www.google.com",
    "desc" : "Recaptcha",
    "rights": ""
}];
            const observer = new MutationObserver((mutationsList, observer) => {
                for(let mutation of mutationsList) {
                    const addedNodes = Array.from(mutation.addedNodes);
                    if (addedNodes && addedNodes.some(n => n.nodeName === 'SCRIPT')) {
                      for(var i = 0; i < json.length; i++) {
        var obj = json[i];

        console.log(obj.url);
        blockScript(obj.url);
    }
                    }
                    observer.disconnect();
                }
            });
            observer.observe(document, { childList: true, subtree: true });
    </script>
        <script src="https://www.google.com/recaptcha/api.js?render=MYKEY"></script>

---

And this isn`t.

    <script>
        function blockScript(origin) {
            const scripts = Array.from(document.getElementsByTagName("SCRIPT"));
            if (scripts.length > 0) {
                scripts.forEach((script) => {
                    if (script.src.includes(origin)) {
                        document.head.removeChild(script);
                    }
                })
            }
        }
    </script>
    <script>

      var json = [
{
    "name" : "Google Recaptcha", 
    "url"   : "www.google.com",
    "desc" : "Recaptcha",
    "rights": ""
}];
            const observer = new MutationObserver((mutationsList, observer) => {
                for(let mutation of mutationsList) {
                    const addedNodes = Array.from(mutation.addedNodes);
                    if (addedNodes && addedNodes.some(n => n.nodeName === 'SCRIPT')) {
                      for(var i = 0; i < json.length; i++) {
        var obj = json[i];

        console.log(obj.url);
        blockScript(obj.url);
    }
                    }
                    observer.disconnect();
                }
            });
            observer.observe(document, { childList: true, subtree: true });
    </script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://www.google.com/recaptcha/api.js?render=MYKEY"></script>

Thanks in advance!

Answer 1

Removing the disconnect method will fix this and account for lazy loaded scripts, too.