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
});
})();