如何用JavaScript实现谷歌生日气球？能否编写Tampermonkey脚本？

我特别喜欢谷歌头像旁的漂浮生日气球，想知道有没有办法让气球一直显示在头像上方？能不能用Tampermonkey脚本来实现这个需求？

相关资源 #

• 谷歌生日气球是谷歌为用户生日提供的专属特效，对应的静态动画文件地址：https://ssl.gstatic.com/gb/images/birthday/apd_desktop_dark_2x.gif

完整Tampermonkey脚本 #

下面是可以实现持续显示气球的脚本，考虑了谷歌页面动态加载的特性，确保元素能被正确定位：

// ==UserScript==
// @name         谷歌头像生日气球常驻
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  让谷歌账户头像旁持续显示生日气球特效
// @match        https://*.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 插入气球元素的函数
    function addBirthdayBalloon() {
        // 定位账户头像按钮
        const btnAccount = document.querySelector('a[aria-label*="account"]');
        if (!btnAccount) return;

        // 检查是否已经添加过气球，避免重复插入
        if (btnAccount.parentNode.querySelector('.birthday-balloon')) return;

        // 创建气球图片元素
        const imgEle = document.createElement('img');
        imgEle.className = 'birthday-balloon gb_d';
        imgEle.src = 'https://ssl.gstatic.com/gb/images/birthday/apd_desktop_dark_2x.gif';
        // 设置样式，确保气球覆盖在头像上方且不影响交互
        Object.assign(imgEle.style, {
            zIndex: '991',
            position: 'absolute',
            top: '-4px',
            bottom: '-4px',
            left: '-4px',
            right: '-4px',
            pointerEvents: 'none' // 避免遮挡头像点击
        });

        // 将气球插入到头像按钮的父容器中，放在头像前面
        btnAccount.parentNode.insertBefore(imgEle, btnAccount);
    }

    // 页面加载完成后先执行一次
    addBirthdayBalloon();

    // 监听DOM变化，处理页面动态加载的情况
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
            addBirthdayBalloon();
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

使用说明 #

1. 先安装Tampermonkey浏览器扩展（支持Chrome、Edge等主流浏览器）
2. 点击Tampermonkey图标，选择"创建新脚本"
3. 将默认代码替换为上面的脚本，保存修改
4. 打开任意谷歌域名下的页面（比如首页、搜索页），就能看到账户头像旁的生日气球一直显示了

脚本说明 #

• 使用MutationObserver监听页面DOM变化，解决谷歌页面动态渲染导致元素找不到的问题
• 增加了重复插入检测，避免页面更新时重复添加气球
• 设置pointerEvents: none，确保气球不会遮挡头像的点击交互
• 样式沿用了谷歌原生气球的类名和布局参数，保持视觉一致性

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