是什么导致我使用脚本的变异观察器出现此错误？

Question

The original question asked has been answered . In addition, someone outside of Stackoverflow has provided a full solution to what I was trying to achieve with my script, which I have added as an answer to my question. The script itself and a summary of the specific problem it solves is detailed in my own answer.

Original Question:

I'm not a programmer, unfortunately, so my experience is very limited.

My browser overwrites a correct img src with an incorrect src a couple of seconds after it starts.

My script's intended function is a work-around to immediately replace the broken src with the correct src again, at the time my browser overwrites the correct src .

function getElementsBySrc(srcValue) {
  var nodes = [];
  var e = document.getElementsByTagName('img');

  for (var i = 0; i < e.length; i++) {
    if (e[i].hasAttribute('src') && e[i].getAttribute('src') == srcValue) {
      nodes.push(e[i]);
    }
  }

  return nodes;
}

function initMod(){
    if(!document.querySelector("#browser")){
        setTimeout(initMod, 1000);
        return;
    }

var targetNode = document.getElementsByTagName('img');
var config = { attributes: true, childList: false, subtree: false, characterData: false };

var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'attributes') {

            console.log('The ' + mutation.attributeName + ' attribute was modified.');

            var n = getElementsBySrc('https://hyperspace.marquiskurt.net/icons/favicon-32x32.png');
            for (var i = 0; i < n.length; i++) {
                n[i].setAttribute('src', 'chrome://favicon/https://hyperspace.marquiskurt.net/app/');
            }

        }
    }
};

var observer = new MutationObserver(callback);

observer.observe(targetNode, config);

}
initMod();

The script is loaded directly as my browser starts. My Chrome Devtools Console gives the error:

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Answer 1

as document.getElementsByTagName('img'); returns a list of elements, not a node, you can't use targetNode (because it isn't a node)

Here I'm using document.querySelectorAll instead, same result, but it has a forEach method that I use to create the mutation observers for each IMG

function initMod() {
    if(!document.querySelector("#browser")){
        setTimeout(initMod, 1000);
        return;
    }

    const callback = (mutationsList, observer) => {
        for(let mutation of mutationsList) {
            if (mutation.type == 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
                const n = getElementsBySrc('https://hyperspace.marquiskurt.net/icons/favicon-32x32.png');
                for (let e of n) {
                    e.setAttribute('src', 'chrome://favicon/https://hyperspace.marquiskurt.net/app/');
                }
            }
        }
    };
    const config = { attributes: true, childList: false, subtree: false, characterData: false };
    document.querySelectorAll('img').forEach(targetNode => {
        const observer = new MutationObserver(callback);
        observer.observe(targetNode, config);
    });
}

Answer 2

Someone very kindly provided a solution that achieved exactly what I was trying to do.

const selector = "#panels img[src='https://hyperspace.marquiskurt.net/icons/favicon-32x32.png']";
function fixImages() {
    const maybeBadImage = document.querySelector(selector);
    if(maybeBadImage){
        maybeBadImage.src = "chrome://favicon/https://hyperspace.marquiskurt.net/app/";
    }
}
const observer = new MutationObserver(fixImages);
function initMod() {
    if(!document.querySelector(selector)){
        setTimeout(initMod, 0);
        return;
    }
    observer.observe(document.querySelector(selector), { attributes: true });
    fixImages();
}
initMod();

With setTimeout set to 0, the broken src is immediately corrected without any visual change that the user can see. This script can be modified for use if anyone else is having the issue where the web browser Vivaldi incorrectly modifies the src for the favicon of a specific user-added web panel.