如何在Tampermonkey用户脚本中检测网页Favicon变化并触发函数？

你用Proxy的方式之所以无效，核心原因是：页面脚本直接修改的是原始DOM元素对象，而你创建的Proxy只是原对象的一个代理副本——页面代码根本不会去操作这个副本，自然触发不了Proxy的set拦截器。

正确的解决方案是使用浏览器原生的MutationObserver，它专门用来监听DOM元素的属性、结构变化，完全适配你的需求。

完整Tampermonkey脚本代码 #

// ==UserScript==
// @name         监听Favicon变化触发函数
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  网页Favicon变化时自动执行指定函数
// @author       You
// @match        替换为你需要监听的网页URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 你要触发的目标函数
    function myFunction() {
        console.log("Favicon changed!");
        // 在这里编写你的业务逻辑
    }

    // 获取页面中的favicon元素
    const faviconLink = document.querySelector('[rel="shortcut icon"]');
    if (!faviconLink) {
        console.warn("未找到页面的favicon元素");
        return;
    }

    // 创建MutationObserver实例，监听属性变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // 只响应href属性的修改
            if (mutation.type === 'attributes' && mutation.attributeName === 'href') {
                myFunction();
            }
        });
    });

    // 配置观察规则：仅监听href属性的变化
    const observerConfig = {
        attributes: true,
        attributeFilter: ['href']
    };

    // 启动监听
    observer.observe(faviconLink, observerConfig);

    // ------------------------------
    // 可选：如果页面会动态替换整个favicon元素（删除旧的+新增新的），打开以下代码
    // ------------------------------
    // const headObserver = new MutationObserver((mutations) => {
    //     mutations.forEach(mutation => {
    //         if (mutation.addedNodes.length) {
    //             const newFavicon = Array.from(mutation.addedNodes).find(node => 
    //                 node.tagName === 'LINK' && node.rel === 'shortcut icon'
    //             );
    //             if (newFavicon) {
    //                 observer.disconnect(); // 停止监听旧元素
    //                 observer.observe(newFavicon, observerConfig); // 监听新元素
    //                 myFunction();
    //             }
    //         }
    //     });
    // });
    // headObserver.observe(document.head, { childList: true });
})();

代码说明 #

1. 基础监听逻辑：针对现有favicon元素，监听其href属性的修改，一旦变化就触发myFunction。
2. 动态元素兼容：如果页面不是修改现有元素的href，而是直接替换整个favicon标签，就把注释里的head监听代码打开，它会捕获head节点的新增元素，自动切换监听目标。

内容的提问来源于stack exchange，提问作者perc9000