S1头像替换

在 S1 论坛头像右上角显示按钮，点击后替换为 Dicebear 图像。
当前为 2024-08-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         S1头像替换
// @namespace    https://bbs.saraba1st.com
// @version      2024-08-12
// @description  在 S1 论坛头像右上角显示按钮，点击后替换为 Dicebear 图像。
// @author       hexie
// @match        https://*.saraba1st.com/2b/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=saraba1st.com
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_registerMenuCommand
// @license      MIT

// ==/UserScript==

(function() {
    'use strict';

    // 从 href 中提取 uid
    function extractUidFromHref(href) {
        const match = href.match(/uid-(\d+)\.html/);
        return match ? match[1] : null;
    }

    // 替换头像函数
    function replaceAvatar(imgElement, uid) {
        const originalSrc = imgElement.src;
        const seed = uid || originalSrc.split('/').pop().split('.')[0]; // 使用 uid 作为 seed
        const newSrc = `https://api.dicebear.com/9.x/thumbs/svg?seed=${seed}`;

        // 设置新的头像链接
        imgElement.src = newSrc;

        // 保存新头像到本地存储
        GM_setValue(uid, newSrc);
    }

    // 恢复头像为默认的原始头像
    function resetAvatar(imgElement, uid) {
        GM_deleteValue(uid);
        imgElement.src = imgElement.getAttribute('data-original-src'); // 恢复为原始头像
    }

    // 在头像右上角添加按钮
    function addReplaceButton(avatarElement, imgElement, uid) {
        const button = document.createElement('button');

        // 使用提供的 SVG 作为图标
        button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                            <path d="M 7.1601562 3 L 8.7617188 5 L 18 5 C 18.551 5 19 5.448 19 6 L 19 15 L 16 15 L 20 20 L 24 15 L 21 15 L 21 6 C 21 4.346 19.654 3 18 3 L 7.1601562 3 z M 4 4 L 0 9 L 3 9 L 3 18 C 3 19.654 4.346 21 6 21 L 16.839844 21 L 15.238281 19 L 6 19 C 5.449 19 5 18.552 5 18 L 5 9 L 8 9 L 4 4 z"></path>
                        </svg>`;
    button.style.position = 'absolute';
    button.style.top = '5px';
    button.style.right = '5px';
    button.style.zIndex = '1000';
    button.style.cursor = 'pointer';
    button.style.background = 'transparent'; // 背景色透明
    button.style.border = 'none';
    button.style.padding = '0';
    button.style.display = 'none'; // 默认隐藏按钮
    button.style.boxShadow = '0 0 8px 2px rgba(0, 150, 255, 0.8)'; // 发光效果

    // 鼠标移到头像上时显示按钮，移开时隐藏按钮
    avatarElement.addEventListener('mouseover', function() {
        button.style.display = 'block';
    });

    avatarElement.addEventListener('mouseout', function() {
        button.style.display = 'none';
    });

    button.onclick = function(event) {
        event.preventDefault(); // 阻止打开链接
        event.stopPropagation(); // 阻止事件冒泡
        replaceAvatar(imgElement, uid);
    };

    avatarElement.style.position = 'relative'; // 确保父元素的定位是相对的
    avatarElement.appendChild(button);
}
    // 遍历所有头像并添加按钮
    document.querySelectorAll('div.avatar').forEach(function(avatarElement) {
        const imgElement = avatarElement.querySelector('img');
        const linkElement = avatarElement.querySelector('a.avtm');
        const uid = linkElement ? extractUidFromHref(linkElement.href) : null;

        if (imgElement && uid) {
            imgElement.style.visibility = 'hidden'; // 隐藏原始头像，避免闪烁
            imgElement.setAttribute('data-original-src', imgElement.src); // 存储原始头像链接

            const savedSrc = GM_getValue(uid);
            if (savedSrc) {
                imgElement.src = savedSrc; // 如果有保存的头像链接，则使用
            }

            addReplaceButton(avatarElement, imgElement, uid);

            imgElement.style.visibility = 'visible'; // 完成替换后显示头像
        }
    });

    // 清除保存数据的功能
    GM_registerMenuCommand("清除所有保存的头像数据", function() {
        document.querySelectorAll('div.avatar img').forEach(function(imgElement) {
            const linkElement = imgElement.closest('div.avatar').querySelector('a.avtm');
            const uid = linkElement ? extractUidFromHref(linkElement.href) : null;
            if (uid) {
                resetAvatar(imgElement, uid); // 恢复为原始头像
            }
        });
        alert("所有保存的头像数据已清除。");
    });
})();