☰

Blacket Global Scripts Manager

Apply custom userscripts, CSS, and JS globally across Blacket; manage via /settings page UI panel styled like General box with buttons and icon styling matching Blacket UI.

// ==UserScript==
// @name         Blacket Global Scripts Manager
// @namespace    http://tampermonkey.net/
// @version      2.5
// @description  Apply custom userscripts, CSS, and JS globally across Blacket; manage via /settings page UI panel styled like General box with buttons and icon styling matching Blacket UI.
// @author       You
// @match        https://*.blacket.org/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const applyAll = () => {
        const css = localStorage.getItem('bb_saved_css');
        if (css) {
            let el = document.getElementById('bb_injectedCSS');
            if (!el) {
                el = document.createElement('style');
                el.id = 'bb_injectedCSS';
                document.head.appendChild(el);
            }
            el.textContent = css;
        }

        const js = localStorage.getItem('bb_saved_js');
        if (js) {
            const script = document.createElement('script');
            script.textContent = js;
            document.body.appendChild(script);
            script.remove();
        }

        const userscript = localStorage.getItem('bb_saved_userscript');
        if (userscript) {
            const script = document.createElement('script');
            script.textContent = userscript;
            document.body.appendChild(script);
            script.remove();
        }
    };

    applyAll();

    if (!location.pathname.startsWith('/settings')) return;

    // ---------- UI PANEL BELOW ONLY RENDERS ON /settings ----------
    function createStyledButton(text, onClick) {
        const btnWrapper = document.createElement('div');
        btnWrapper.className = 'styles__button___1_E-G-camelCase styles__upgradeButton___3UQMv-camelCase';
        btnWrapper.setAttribute('role', 'button');
        btnWrapper.setAttribute('tabindex', '0');

        const anchor = document.createElement('a');
        anchor.href = '#';
        anchor.style.textDecoration = 'none';
        anchor.addEventListener('click', e => {
            e.preventDefault();
            onClick();
        });

        const shadowDiv = document.createElement('div');
        shadowDiv.className = 'styles__shadow___3GMdH-camelCase';

        const edgeDiv = document.createElement('div');
        edgeDiv.className = 'styles__edge___3eWfq-camelCase';
        edgeDiv.style.backgroundColor = 'var(--secondary)';

        const frontDiv = document.createElement('div');
        frontDiv.className = 'styles__front___vcvuy-camelCase styles__upgradeButtonInside___396BT-camelCase';
        frontDiv.style.backgroundColor = 'var(--secondary)';
        frontDiv.style.display = 'flex';
        frontDiv.style.justifyContent = 'center';
        frontDiv.style.alignItems = 'center';
        frontDiv.textContent = text;

        anchor.appendChild(shadowDiv);
        anchor.appendChild(edgeDiv);
        anchor.appendChild(frontDiv);
        btnWrapper.appendChild(anchor);

        return btnWrapper;
    }

    function tryCloneGeneralBox() {
        const boxes = document.querySelectorAll('.styles__infoContainer___2uI-S-camelCase');
        for (const box of boxes) {
            const header = box.querySelector('.styles__infoHeader___1lsZY-camelCase');
            if (header?.textContent?.trim() === 'General') {
                const clone = box.cloneNode(true);
                clone.querySelector('.styles__infoHeader___1lsZY-camelCase').textContent = 'Scripts Manager';

                const oldIcon = clone.querySelector('i.fas.fa-cog.styles__headerIcon___1ykdN-camelCase');
                if (oldIcon) {
                    const icon = document.createElement('i');
                    icon.className = 'fas fa-plus styles__headerIcon___1ykdN-camelCase';
                    icon.setAttribute('aria-hidden', 'true');
                    oldIcon.replaceWith(icon);
                }

                clone.querySelectorAll('a.styles__link___5UR6_-camelCase').forEach(link => link.remove());

                const btn = createStyledButton('Manage Scripts', () => {
                    const modal = document.getElementById('bb_scriptsManagerModal');
                    if (modal) modal.style.visibility = 'visible';
                });

                clone.appendChild(btn);
                box.parentNode.insertBefore(clone, box.nextSibling);
                break;
            }
        }
    }

    function addModal() {
        if (document.getElementById('bb_scriptsManagerModal')) return;

        const overlay = document.createElement('div');
        overlay.id = 'bb_scriptsManagerModal';
        Object.assign(overlay.style, {
            position: 'fixed', top: 0, left: 0,
            width: '100vw', height: '100vh',
            backgroundColor: 'rgba(0,0,0,0.7)',
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            zIndex: 9999, visibility: 'hidden',
        });

        const modal = document.createElement('div');
        modal.style.background = '#1e1e1e';
        modal.style.borderRadius = '8px';
        modal.style.padding = '20px';
        modal.style.maxWidth = '600px';
        modal.style.width = '100%';
        modal.style.color = '#fff';

        const header = document.createElement('div');
        header.style.display = 'flex';
        header.style.alignItems = 'center';
        header.style.marginBottom = '10px';

        const icon = document.createElement('i');
        icon.className = 'fas fa-plus styles__headerIcon___1ykdN-camelCase';
        icon.setAttribute('aria-hidden', 'true');
        icon.style.marginRight = '10px';

        const title = document.createElement('div');
        title.className = 'styles__infoHeader___1lsZY-camelCase';
        title.textContent = 'Manage Scripts';

        const close = document.createElement('div');
        close.textContent = '×';
        close.style.marginLeft = 'auto';
        close.style.cursor = 'pointer';
        close.onclick = () => overlay.style.visibility = 'hidden';

        header.appendChild(icon);
        header.appendChild(title);
        header.appendChild(close);
        modal.appendChild(header);

        const editors = [
            { id: 'userscript', label: 'Userscript JS', placeholder: '// Paste userscript here' },
            { id: 'css', label: 'CSS', placeholder: '/* Paste CSS here */' },
            { id: 'js', label: 'JavaScript', placeholder: '// Paste JavaScript here' }
        ];

        editors.forEach(({ id, label, placeholder }) => {
            const wrap = document.createElement('div');
            wrap.style.marginBottom = '16px';

            const l = document.createElement('label');
            l.textContent = label;

            const ta = document.createElement('textarea');
            ta.placeholder = placeholder;
            ta.id = 'bb_' + id + '_textarea';
            ta.value = localStorage.getItem('bb_saved_' + id) || '';
            Object.assign(ta.style, {
                width: '100%', height: '100px', background: '#111', color: '#fff',
                border: '1px solid #444', borderRadius: '4px', padding: '6px',
                marginTop: '6px', fontFamily: 'monospace'
            });

            const btnWrap = document.createElement('div');
            btnWrap.style.marginTop = '6px';
            btnWrap.style.display = 'flex';
            btnWrap.style.gap = '10px';

            const apply = createStyledButton('Apply', () => {
                const val = ta.value;
                localStorage.setItem('bb_saved_' + id, val);
                applyAll();
            });

            const remove = createStyledButton('Remove', () => {
                ta.value = '';
                localStorage.removeItem('bb_saved_' + id);
                if (id === 'css') {
                    const el = document.getElementById('bb_injectedCSS');
                    if (el) el.remove();
                }
            });

            btnWrap.appendChild(apply);
            btnWrap.appendChild(remove);

            wrap.appendChild(l);
            wrap.appendChild(ta);
            wrap.appendChild(btnWrap);

            modal.appendChild(wrap);
        });

        overlay.appendChild(modal);
        document.body.appendChild(overlay);
    }

    // Run UI creation on settings page only
    tryCloneGeneralBox();
    addModal();
})();