Greasy Fork

Greasy Fork is available in English.

DeepL UI Cleaner

Streamlines DeepL's interface for translation-focused use by removing footers, cookie banners, and adding toggle buttons for sidebar and header

目前为 2024-08-09 提交的版本，查看 最新版本。

// ==UserScript==
// @name         DeepL UI Cleaner
// @namespace    http://tampermonkey.net/
// @version      0.2
// @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: '.border-t.md\\:block.bg-white.border-e.w-\\[90px\\].h-full.hidden.top-\\[61px\\].start-0.sticky',
        topHeader: '[class*="BasePageHeader-module--container"]',
        cookieBanner: '[id*="cookieBanner"], [class*="cookieBanner"]'
    };

    // Create and inject CSS styles
    function injectStyles() {
        const style = document.createElement('style');
        style.textContent = `
            /* Hide sidebar, header, and cookie banner by default */
            ${TARGETS.leftSidebar}, ${TARGETS.topHeader}, ${TARGETS.cookieBanner} { display: none !important; }

            /* Style for toggle buttons */
            .toggle-button {
                position: fixed;
                z-index: 9999;
                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: background-color 0.3s;
            }
            .toggle-button:hover {
                background-color: rgba(220, 220, 220, 0.9);
            }
        `;
        (document.head || document.documentElement).appendChild(style);
    }

    // Remove footer and cookie banner elements
    function removeElements() {
        Object.entries(TARGETS).forEach(([key, selector]) => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(element => {
                if (key === 'footer' || key === 'cookieBanner') {
                    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;
    }

    // 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}`);
    }

    // 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';
        sidebarButton.style.top = '0.5em';
        document.body.appendChild(sidebarButton);

        // Create and position header toggle button
        const headerButton = createToggleButton('▼', '▲', () => toggleElementVisibility(TARGETS.topHeader, headerButton, '▼', '▲'));
        headerButton.style.left = '3em';
        headerButton.style.top = '0.5em';
        document.body.appendChild(headerButton);

        // Set up MutationObserver to handle dynamically added elements
        const observerConfig = { childList: true, subtree: true };
        const observer = new MutationObserver(removeElements);
        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();
    }
})();