Streamlines DeepL's interface for translation-focused use by removing footers, cookie banners, and adding toggle buttons for sidebar and header
当前为
// ==UserScript==
// @name DeepL UI Cleaner
// @namespace http://tampermonkey.net/
// @version 0.3
// @description Streamlines DeepL's interface for translation-focused use by removing footers, cookie banners, and adding toggle buttons for sidebar and header
// @match https://www.deepl.com/*
// @license Unlicense
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// Define selectors for target elements
const TARGETS = {
footer: 'footer, .relative.bg-neutral-next-50 > .mobile\\:hidden',
leftSidebar: '.md\\:block.bg-white.border-e[class*="w-["][class*="px]"].h-full.hidden[class*="start-0"][class*="border-neutral-next-100"]',
topHeader: '[class*="BasePageHeader-module--container"]',
cookieBanner: '[id*="cookieBanner"], [class*="cookieBanner"]',
writePageElements: '.bg-white.px-0[class*="xl:px-["][class*="px]"][class*="md:px-["][class*="px]"][class*="min-[1280px]:px-["][class*="px]"], .mobile\\:hidden.p-8.px-0[class*="xl:px-["][class*="px]"][class*="md:px-["][class*="px]"][class*="min-[1280px]:px-["][class*="px]"]'
};
// Create and inject CSS styles
function injectStyles() {
const style = document.createElement('style');
style.textContent = `
/* Hide sidebar, header, cookie banner, and write page elements by default */
${TARGETS.leftSidebar}, ${TARGETS.topHeader}, ${TARGETS.cookieBanner}, ${TARGETS.writePageElements} { display: none !important; }
/* Style for toggle buttons */
.toggle-button {
position: fixed;
z-index: 10000;
width: 2em;
height: 2em;
background-color: rgba(240, 240, 240, 0.7);
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s;
}
.toggle-button:hover {
background-color: rgba(220, 220, 220, 0.9);
}
`;
(document.head || document.documentElement).appendChild(style);
}
// Remove footer, cookie banner, and write page elements
function removeElements() {
Object.entries(TARGETS).forEach(([key, selector]) => {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
if (key === 'footer' || key === 'cookieBanner' || key === 'writePageElements') {
element.remove();
console.log(`${key} removed`);
}
});
});
}
// Create a toggle button
function createToggleButton(showIcon, hideIcon, onClick) {
const button = document.createElement('button');
button.className = 'toggle-button';
button.textContent = showIcon;
button.addEventListener('click', onClick);
return button;
}
// Function to adjust button positions
function adjustButtonPositions() {
const header = document.querySelector(TARGETS.topHeader);
const headerVisible = header && getComputedStyle(header).display !== 'none';
const topPosition = headerVisible ? `${header.offsetHeight}px` : '0.5em';
document.querySelectorAll('.toggle-button').forEach(button => {
button.style.top = topPosition;
});
}
// Toggle visibility of elements
function toggleElementVisibility(selector, button, showIcon, hideIcon) {
const elements = document.querySelectorAll(selector);
console.log(`Toggling visibility for ${selector}, found ${elements.length} elements`);
let isVisible = false;
elements.forEach(element => {
const display = getComputedStyle(element).display;
console.log(`Current display for element: ${display}`);
if (display === 'none') {
element.style.setProperty('display', 'block', 'important');
isVisible = true;
} else {
element.style.setProperty('display', 'none', 'important');
}
});
button.textContent = isVisible ? hideIcon : showIcon;
console.log(`Button text set to: ${button.textContent}`);
// Adjust button positions after toggling
setTimeout(adjustButtonPositions, 0);
}
// Initialize the script
function init() {
// Remove unwanted elements
removeElements();
// Create and position sidebar toggle button
const sidebarButton = createToggleButton('≡', '×', () => toggleElementVisibility(TARGETS.leftSidebar, sidebarButton, '≡', '×'));
sidebarButton.style.left = '0.5em';
document.body.appendChild(sidebarButton);
// Create and position header toggle button
const headerButton = createToggleButton('▼', '▲', () => toggleElementVisibility(TARGETS.topHeader, headerButton, '▼', '▲'));
headerButton.style.left = '3em';
document.body.appendChild(headerButton);
// Initial adjustment of button positions
adjustButtonPositions();
// Set up MutationObserver to handle dynamically added elements
const observerConfig = { childList: true, subtree: true };
const observer = new MutationObserver(() => {
removeElements();
adjustButtonPositions();
});
observer.observe(document.body, observerConfig);
console.log('DeepL UI Adjuster initialized');
}
// Inject styles immediately
injectStyles();
// Run initialization when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();