Convert flat to sharp in Cifraclub website

userscript.js

// ==UserScript==
// @name         Cifra Club - Sustenidos
// @namespace    https://example.com/
// @version      4.0
// @description  Converte acordes bemóis para sustenidos (mantendo Bb)
// @match        *://*.cifraclub.com.br/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const STORAGE_KEY = "cifraclub_sharps_enabled";

    const map = {
        Cb: "B",
        Db: "C#",
        Eb: "D#",
        Fb: "E",
        Gb: "F#",
        Ab: "G#"
        // Bb continua Bb
    };

    let enabled = localStorage.getItem(STORAGE_KEY);

    if (enabled === null) {
        enabled = true;
    } else {
        enabled = enabled === "true";
    }

    function convert(text) {
        return text
            .replace(/^(Cb|Db|Eb|Fb|Gb|Ab)/, m => map[m])
            .replace(/\/(Cb|Db|Eb|Fb|Gb|Ab)/g,
                (_, n) => "/" + map[n]);
    }

    function updatePage() {

        document.querySelectorAll("pre b").forEach(el => {

            if (!el.dataset.original)
                el.dataset.original = el.textContent;

            el.textContent = enabled
                ? convert(el.dataset.original)
                : el.dataset.original;
        });

        const tom = document.querySelector("#cifra_tom");

        if (tom) {

            if (!tom.dataset.original)
                tom.dataset.original = tom.textContent;

            tom.textContent = enabled
                ? convert(tom.dataset.original)
                : tom.dataset.original;
        }

        updateButton();
    }

    function updateButton() {

        const btn = document.getElementById("cc-sharp-toggle");

        if (!btn)
            return;

        btn.textContent = enabled
            ? "♯ Sustenidos ON"
            : "♭ Originais";

        btn.style.opacity = enabled ? "1" : "0.7";
    }

    function toggle() {
        enabled = !enabled;
        localStorage.setItem(STORAGE_KEY, enabled);
        updatePage();
    }

    function createButton() {

        if (document.getElementById("cc-sharp-toggle"))
            return;

        const btn = document.createElement("button");

        btn.id = "cc-sharp-toggle";

        Object.assign(btn.style, {
            position: "fixed",
            right: "20px",
            bottom: "20px",
            zIndex: "999999",
            padding: "10px 16px",
            borderRadius: "999px",
            border: "1px solid #666",
            background: "#222",
            color: "#fff",
            fontSize: "14px",
            fontWeight: "bold",
            cursor: "pointer",
            boxShadow: "0 3px 10px rgba(0,0,0,.3)",
            transition: "all 0.2s ease"
        });

        btn.addEventListener("mouseenter", () => {
            btn.style.transform = "scale(1.05)";
        });

        btn.addEventListener("mouseleave", () => {
            btn.style.transform = "scale(1)";
        });

        btn.addEventListener("click", toggle);

        document.body.appendChild(btn);

        updateButton();
    }

    function process() {
        createButton();
        updatePage();
    }

    process();

    let timer;

    const observer = new MutationObserver(() => {

        clearTimeout(timer);

        timer = setTimeout(() => {
            process();
        }, 150);
    });

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

})();