Bilibili导航栏Logo替换为MikuFans（自用）

同步动态替换主Logo和小电视内联SVG Logo为MikuFans，尺寸统一样式精准
换行
// ==UserScript==
// @name         Bilibili导航栏Logo替换为MikuFans（自用）
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  同步动态替换主Logo和小电视内联SVG Logo为MikuFans，尺寸统一样式精准
// @author       Jinyou
// @license      MIT
// @match        *://www.bilibili.com/*
// @match        *://space.bilibili.com/*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // 🔧 配置区：图标链接与尺寸策略
  const config = {
    mainLogo: {
      selector: 'svg.mini-header__logo', // 主Logo选择器
      imgUrl: 'https://pic1.imgdb.cn/item/67d43df388c538a9b5bdb408.png', // 建议Base64
      width: 140, // 主Logo显示宽度
      height: 64 // 主Logo显示高度
    },
    tvIcon: {
      selector: 'svg.zhuzhan-icon', // 小电视选择器
      imgUrl: 'https://pic1.imgdb.cn/item/67d43df388c538a9b5bdb408.png', // 与主Logo同尺寸
      useMainLogoSize: true // 同步主Logo尺寸
    }
  };

  // 🛠️ 核心替换函数
  function replaceElement(targetConfig) {
    const element = document.querySelector(targetConfig.selector);
    if (!element) return;

    // 创建新图片并设置属性
    const newImg = new Image();
    newImg.src = targetConfig.imgUrl;
    newImg.alt = 'custom-icon';
    newImg.style.cssText = getComputedStyle(element).cssText; // 继承原始样式

    // 尺寸策略
    if (targetConfig === config.mainLogo) {
      newImg.style.width = `${config.mainLogo.width}px`;
      newImg.style.height = `${config.mainLogo.height}px`;
    } else if (config.tvIcon.useMainLogoSize) {
      newImg.style.width = `${config.mainLogo.width}px`;
      newImg.style.height = `${config.mainLogo.height}px`;
    }

    // 精确还原布局
    newImg.style.display = 'block';
    newImg.style.margin = '0 10px'; // 调整边距
    newImg.style.objectFit = 'contain'; // 防止拉伸变形
    newImg.style.verticalAlign = 'middle'; // 垂直居中

    // 替换元素并保留父容器结构
    const wrapper = document.createElement('div');
    wrapper.style.display = 'inline-block';
    wrapper.appendChild(newImg);
    element.parentNode.replaceChild(wrapper, element);
  }

  // 🔄 批量替换 + 动态监听
  function replaceAllIcons() {
    replaceElement(config.mainLogo);
    replaceElement(config.tvIcon);
  }

  // 🚀 启动监听
  const observer = new MutationObserver(replaceAllIcons);
  observer.observe(document, { subtree: true, childList: true });
  replaceAllIcons();
})();
欢迎访问Greasy Fork镜像
