pain

Highlight Position Fix.user.js

// ==UserScript==
// @name         Highlight Position Fix
// @namespace    http://tampermonkey.net/
// @version      2024-08-10
// @description  try to take over the world!
// @author       You
// @match        https://t.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// ==/UserScript==

(function() {
    "use strict";

    function performFix(highlight) {
        const list = document.querySelector(".bili-dyn-list-tabs__list").getBoundingClientRect();
        const selection = document.querySelector(".bili-dyn-list-tabs__item.active").getBoundingClientRect();
        const hlRect = highlight.getBoundingClientRect();
        highlight.style.transform = `translateX(${selection.left - list.left + selection.width / 2 - hlRect.width / 2}px)`;
    }

    const observer = new MutationObserver(function(mutations) {
        for (const mutationRecord of mutations) {
            performFix(mutationRecord.target);
        }
    });
    let observerCreation;
    function plunge() {
        const target = document.querySelector(".bili-dyn-list-tabs__highlight");
        if (!target) {
            return;
        }
        observerCreation.disconnect();
        observer.observe(target, { attributes: true, attributeFilter: ["style"] });
        window.addEventListener("resize", () => {
            performFix(target);
        }, true);
        setInterval(() => { // yep
            performFix(target);
        }, 250);
        performFix(target);
    }
    observerCreation = new MutationObserver(plunge);
    observerCreation.observe(document.body, { childList: true, subtree: true });
    plunge();
})();