检测用户脚本中的图标变化

Question

我正在编写 Tampermonkey 用户脚本，每次页面图标更改时我都需要触发一个函数。

例如：

1. 页面上的脚本将页面图标更改为另一个
2. 用户脚本检测到这一点，或者获取它发生的事件
3. 用户脚本触发 myFunction()

页面上的favicon设置如下：

<link rel="shortcut icon" href="/dstatic/favicon.ico" type="image/x-icon" crossorigin="anonymous">

我尝试使用代理对象：

var targetObj = document.querySelectorAll('[rel="shortcut icon"]')[0]; var targetProxy = new Proxy(targetObj, { set: function (target, key, value) { console.log("Favicon changed"); target[key] = value; return true; } });

我预计：

console.log("Favicon changed");

在页面脚本中的图标更改时触发。 结果： 仅当您致电

targetProxy.href

时才会发生这种情况。如果您使用 targetProxy（页面本身所做的事情）以外的任何内容来调用它，则它不起作用。

Answer 1

你可以尝试MutationObserver。

以头部为目标，观察rel=icon元素何时发生变化。

const faviconLink = document.querySelector('link[rel="shortcut icon"]');

let observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'href') {
            console.log('Favicon changed');
            myFunction(); // Call your function
        }
    });
});

const observerConfig = { attributes: true };

observer.observe(faviconLink,observerConfig);