Userscript: Replace blurred text translations with 'Show Translation' button

[juribi]

Hey, the UI change that was made which replaced buttons with blurred text to show translations really bothered me, so I used chatgpt to generate a userscript to put buttons there again.
It’s not perfect but it’s sufficient for what I wanted, so I’m just dumping it here in case anyone wants it.

I would love to have access to a setting which would allow for users to revert back to the old, non-blur, button-based UI for translations, instead of resorting to this hacky solution : (

without script (translation blurred)

with script (show translation button)

Please note that this will break the “Sentence” and “Translation” buttons you can see in the screenshot.

// ==UserScript==
// @name         Bunpro Unblur Fix
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Replaces blurred buttons with clean show/hide buttons on Bunpro
// @author       You
// @match        https://bunpro.jp/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement('style');
    style.textContent = `
        .sentence-container {
            position: relative;
        }
        .sentence-content {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            margin: 0;
        }
        .sentence-container.revealed .sentence-content {
            position: static;
            opacity: 1;
            pointer-events: auto;
        }
        .sentence-container.revealed .show-sentence-btn {
            display: none;
        }
    `;
    document.head.appendChild(style);

    function createNewButton(content) {
        const container = document.createElement('div');
        container.className = 'sentence-container mt-6';

        // Create the content element
        const contentDiv = document.createElement('div');
        contentDiv.className = 'sentence-content';
        contentDiv.innerHTML = content;

        // Create the show button
        const button = document.createElement('button');
        button.className = 'show-sentence-btn';
        button.setAttribute('aria-label', 'Show Translation');
        button.innerHTML = `
            <span class="justify-center items-center rounded flex text-primary-fg text-small px-16 py-4 border border-rim">
                <span>Show Translation</span>
            </span>
        `;

        container.appendChild(contentDiv);
        container.appendChild(button);
        return container;
    }

    function processButtons() {
        const blurButtons = document.querySelectorAll('.bp-unblur-content-on-hover:not(.processed)');
        blurButtons.forEach(button => {
            const content = button.querySelector('p').innerHTML;
            const newButton = createNewButton(content);
            button.parentNode.replaceChild(newButton, button);
            button.classList.add('processed');
        });
    }

    // Handle clicks
    document.addEventListener('click', function(e) {
        const container = e.target.closest('.sentence-container');
        if (container && !container.classList.contains('revealed')) {
            container.classList.add('revealed');
            e.preventDefault();
            e.stopPropagation();
        }
    }, true);

    // Initial processing
    processButtons();

    // Set up a MutationObserver to handle dynamically loaded content
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                processButtons();
            }
        });
    });

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

[schumi]

I second that! The blurred text has bothered me to the point that I just switched back to the setting where the translation is always visible (and then I try to force myself not to read it, which is not always successful). If things stay that way, I might try your userscript some time. Thanks for that!

[loikuu]

This is an awesome idea! I’ve also created another version that completely disables the blur. To be honest, not being able to toggle it bothers me as well. It would be fantastic if the team could implement this as a setting option!

// ==UserScript==
// @name         Bunpro Unblur Always Visible
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Always shows unblurred text on Bunpro
// @author       You
// @match        https://bunpro.jp/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement('style');
    style.textContent = `
        .sentence-container {
            position: relative;
        }
        .sentence-content {
            position: static;
            opacity: 1;
            pointer-events: auto;
            margin: 0;
        }
    `;
    document.head.appendChild(style);

    function processContent() {
        const blurButtons = document.querySelectorAll('.bp-unblur-content-on-hover:not(.processed)');
        blurButtons.forEach(button => {
            const content = button.querySelector('p');
            if (content) {
                button.replaceWith(content);
            }
        });
    }

    // Initial processing
    processContent();

    // Set up a MutationObserver to handle dynamically loaded content
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                processContent();
            }
        });
    });

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