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

Question

最初提出的问题已得到解答。此外，Whosebug 之外的某个人提供了一个完整的解决方案来解决我试图通过我的脚本实现的目标，我已将其添加为我的问题的答案。脚本本身和它解决的具体问题的摘要在我自己的回答中有详细说明。

原题：

不幸的是，我不是程序员，所以我的经验非常有限。

我的浏览器在启动几秒钟后用不正确的 src 覆盖了正确的 img src。

我的脚本的预期功能是一种解决方法，即在我的浏览器覆盖正确的 src 时立即再次用正确的 src 替换损坏的 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();

脚本在我的浏览器启动时直接加载。我的 Chrome Devtools 控制台给出错误：

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

Answer 1

as document.getElementsByTagName('img'); returns 一个 list 元素，不是一个节点，你不能使用 targetNode （因为它不是' t一个节点)

这里我使用 document.querySelectorAll 来代替，结果相同，但是它有一个 forEach 方法，我用它来为每个 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

有人非常友好地提供了一个解决方案，完全实现了我想要做的事情。

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();

将 setTimeout 设置为 0，损坏的 src 会立即得到更正，用户不会看到任何视觉变化。如果其他人遇到 Web 浏览器 Vivaldi 错误地修改特定用户添加的 Web 面板的图标的 src 的问题，可以修改此脚本以供使用。

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

What's causing this error in my mutation observer using script?

html

javascript

google-chrome

google-chrome-devtools

mutation-observers