BetterTriangulet with Theme-Aware Overlay

Adds BetterTriangulet panel and plugin modal with theme-colored overlay
当前为 2025-07-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         BetterTriangulet with Theme-Aware Overlay
// @version      1.13
// @description  Adds BetterTriangulet panel and plugin modal with theme-colored overlay
// @match        https://tri.pengpowers.xyz/*
// @grant        none
// @namespace https://gf.qytechs.cn/users/1479014
// ==/UserScript==

(function () {
    'use strict';

    function createOverlayBox() {
        const profileBody = document.querySelector('.arts__profileBody___eNPbH-camelCase');
        if (!profileBody) return;

        const existingOverlay = document.getElementById('profileBodyOverlayBox');
        if (existingOverlay) existingOverlay.remove();

        const rect = profileBody.getBoundingClientRect();
        const overlay = document.createElement('div');
        overlay.id = 'profileBodyOverlayBox';

        Object.assign(overlay.style, {
            position: 'absolute',
            top: `${rect.top + window.scrollY}px`,
            left: `${rect.left + window.scrollX}px`,
            width: `${rect.width}px`,
            height: `${rect.height}px`,
            zIndex: '9998',
            color: 'inherit'
        });

        // Theme-aware overlay background
        const theme = localStorage.getItem("theme");
        const themeColors = {
            Purple: '#4d136b',
            Green: '#265b09',
            Blue: '#132a6b',
            Red: '#6b1313',
            Orange: '#6b3b13',
            Yellow: '#6b6a13',
            Pink: '#6b134a',
            White: '#e6e6e6',
            Black: '#000000'
        };

        overlay.style.backgroundColor = themeColors[theme] || 'var(--container)';

        document.body.appendChild(overlay);
    }

    function removeOverlayBox() {
        const existingOverlay = document.getElementById('profileBodyOverlayBox');
        if (existingOverlay) existingOverlay.remove();
    }

    function createModal() {
        const profileBody = document.querySelector(".arts__profileBody___eNPbH-camelCase");
        if (!profileBody) return;

        const existingModal = document.getElementById("betterTrianguletModalOverlay");
        if (existingModal) existingModal.remove();

        createOverlayBox();

        const modalOverlay = document.createElement("div");
        modalOverlay.id = "betterTrianguletModalOverlay";

        Object.assign(modalOverlay.style, {
            position: "absolute",
            top: profileBody.offsetTop + "px",
            left: profileBody.offsetLeft + "px",
            width: profileBody.offsetWidth + "px",
            height: profileBody.offsetHeight + "px",
            zIndex: "9999",
            backgroundColor: "var(--container)",
            color: "inherit",
            borderRadius: "0.5vw",
            overflowY: "auto",
            padding: "1.5vw",
            fontFamily: "Nunito, sans-serif",
            display: "flex",
            flexDirection: "column",
            boxSizing: "border-box",
        });

        const title = document.createElement("div");
        title.textContent = "Plugin Manager";
        Object.assign(title.style, {
            fontSize: "2vw",
            fontWeight: "800",
            marginBottom: "1vw",
            color: "var(--accent)",
            userSelect: "none",
        });

        const content = document.createElement("div");
        content.textContent = "This is where plugin options will go!";
        Object.assign(content.style, {
            fontSize: "1.2vw",
            flexGrow: "1",
            marginBottom: "2vw",
            whiteSpace: "pre-wrap",
        });

        const closeBtn = document.createElement("button");
        closeBtn.textContent = "Close";
        Object.assign(closeBtn.style, {
            padding: "0.8vw 1.5vw",
            fontSize: "1.1vw",
            border: "none",
            borderRadius: "0.5vw",
            backgroundColor: "var(--accent)",
            color: "var(--container)",
            cursor: "pointer",
            alignSelf: "flex-end",
            userSelect: "none",
        });
        closeBtn.onclick = () => {
            modalOverlay.remove();
            removeOverlayBox();
        };

        modalOverlay.appendChild(closeBtn);
        modalOverlay.appendChild(title);
        modalOverlay.appendChild(content);

        profileBody.parentElement.appendChild(modalOverlay);
    }

    function injectPanel() {
        const mainContainer = document.querySelector(".styles__mainContainer___4TLvi-camelCase");
        if (!mainContainer || document.getElementById("betterTrianguletBox")) return;

        const container = document.createElement("div");
        container.className = "styles__infoContainer___2uI-S-camelCase";
        container.id = "betterTrianguletBox";

        const headerRow = document.createElement("div");
        headerRow.className = "styles__headerRow___1tdPa-camelCase";

        const icon = document.createElement("i");
        icon.className = "fas fa-code styles__headerIcon___1ykdN-camelCase";
        icon.setAttribute("aria-hidden", "true");

        const headerText = document.createElement("div");
        headerText.className = "styles__infoHeader___1lsZY-camelCase";
        headerText.textContent = "BetterTriangulet";

        headerRow.appendChild(icon);
        headerRow.appendChild(headerText);

        const pluginDiv = document.createElement("div");
        const pluginText = document.createElement("text");
        pluginText.className = "styles__link___5UR6_-camelCase";
        pluginText.id = "managePlugins";
        pluginText.textContent = "Manage Plugins";
        pluginText.style.cursor = "pointer";
        pluginText.style.textDecoration = "underline";

        pluginText.onclick = () => {
            if (!document.getElementById("betterTrianguletModalOverlay")) {
                createModal();
            }
        };

        pluginDiv.appendChild(pluginText);
        container.appendChild(headerRow);
        container.appendChild(pluginDiv);
        mainContainer.appendChild(container);
    }

    function waitForSettings() {
        const settingsHeader = [...document.querySelectorAll("div")].find(el =>
            el.textContent.trim() === "Settings" &&
            el.className.includes("styles__header___")
        );
        if (settingsHeader) {
            injectPanel();
        } else {
            setTimeout(waitForSettings, 250);
        }
    }

    waitForSettings();
})();
欢迎访问Greasy Fork镜像
