[REQ] Support for DeepSeek

[panosru]

Hi! I love your extension and frankly speaking, I'm in disbelief that ChatGPT doesn't do that by default (especially for us with wide monitors). Since we have a new strong "kid" on the block, I would love to have a similar extension (preferably using Tampermonkey) that would support DeepSeek as well. For now, I have this user script which seems to be working fine and I'm sharing it here in case others may find it useful.

// ==UserScript==
// @name         DeepSeek Chat Expander
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Makes DeepSeek chat interface fully wide and responsive
// @author       You
// @match        https://chat.deepseek.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        /* Reset root container */
        #root > div {
            max-width: none !important;
            width: 100% !important;
        }

        /* Main chat container */
        [class*="Layout_main"] {
            max-width: none !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 20px !important;
        }

        /* Chat history container */
        [class*="Conversation_"] > div > div {
            max-width: none !important;
            width: 100% !important;
            margin: 0 auto !important;
            padding: 0 20px !important;
        }

        /* Input container */
        [class*="Input_container"] {
            max-width: none !important;
            width: 100% !important;
            padding: 0 20px !important;
        }

        /* Message bubbles */
        [class*="Message_"] {
            max-width: 100% !important;
            width: auto !important;
        }

        /* Text input field */
        #chat-input {
            width: 100% !important;
            max-width: none !important;
        }

        /* Footer disclaimer */
        div:has(> div:contains("AI-generated")) {
            max-width: none !important;
            width: 100% !important;
            padding: 0 20px !important;
        }

        /* General layout rules */
        [class*="flex"] {
            max-width: none !important;
            width: 100% !important;
        }

        * {
            box-sizing: border-box !important;
            max-width: 100% !important;
        }
    `);
})();

Thanks!

[panosru]

For the sidebar collapsing, not the best solution, but this should work-ish...

// ==UserScript==
// @name         DeepSeek Chat Expander
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Makes DeepSeek chat interface fully wide and responsive
// @author       You
// @match        https://chat.deepseek.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        /* Text input field */
        #chat-input {
            width: 100% !important;
            max-width: none !important;
        }

        /* Footer disclaimer */
        div:has(> div:contains("AI-generated")) {
            max-width: none !important;
            width: 100% !important;
            padding: 0 20px !important;
        }

        * {
            box-sizing: border-box !important;
            max-width: none !important;
        }
    `);

    // Wait for the DOM to fully load
    window.addEventListener('load', function() {
        // Use JavaScript to find the parent div
        document.querySelectorAll('div').forEach(div => {
            // Check if the div has exactly two classes
            if (div.classList.length !== 2) {
                return; // Skip divs that don't have exactly two classes
            }

            // Check if the second child exists and has display: none
            const secondChild = div.children[1];
            if (secondChild && window.getComputedStyle(secondChild).display === 'none') {
                // Generate a CSS rule for this div
                const css = `
                    div.${div.classList[0]}.${div.classList[1]} {
                        width: 68px;
                    }
                `;

                // Inject the CSS into the document
                const style = document.createElement('style');
                style.textContent = css;
                document.head.appendChild(style);

                console.log('CSS applied to:', div);
            }
        });
    });
})();

[adamlui]

Thanks for sharing! I'll try to make one when I have the time

[kiranwayne]

@panosru Here's "my" Deekseek script, with LLMs doing most of the work. It provides two menu options to customize the width and to enable/disable justification. I'm using similar scripts for multiple sites now, including Copilot, Grok, HuggingChat, Qwen Chat, Reddit (based on Reddit++) etc.

// ==UserScript==
// @name         DeepSeek Enhanced
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Override :root CSS variables for width (configurable via menu) and toggle justification on chat.deepseek.com. Handles Shadow DOM.
// @author       kiranwayne
// @match        https://chat.deepseek.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @run-at       document-end // Keep document-end
// ==/UserScript==

(function() {
    'use strict';

    // --- Configuration & Constants ---
    const DEFAULT_WIDTH = '1300px';
    const WIDTH_STORAGE_KEY = 'deepseekMaxWidth_v1';
    const JUSTIFY_STORAGE_KEY = 'deepseekJustifyEnabled_v1';

    const WIDTH_STYLE_ID = 'vm-deepseek-width-style';
    const JUSTIFY_STYLE_ID = 'vm-deepseek-justify-style';

    let justifyMenuCommandLabel = null;
    const allStyleRoots = new Set();

    // --- Style Generation Functions ---

    function getWidthCss(widthValue) {
        if (!widthValue || typeof widthValue !== 'string' || widthValue.trim() === '') {
            widthValue = DEFAULT_WIDTH;
        }
        return `
            :root {
                --message-list-padding-horizontal: 16px !important;
                --message-list-max-width: ${widthValue} !important;
            }
        `;
    }

    // Generates CSS to justify text based on observed working selector
    function getJustifyCss() {
        // *** UPDATED SELECTOR BASED ON USER FEEDBACK ***
        // This selector targets the specific div combination found to work.
        // NOTE: These class names might change if DeepSeek updates their site!
        // If justification stops working, inspect the element again to find the new classes.
        return `
            ._4f9bf79.d7dc56a8._43c05b5 {
                text-align: justify !important;
                /* Optional: Add hyphens for potentially better justification */
                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                hyphens: auto;
            }
        `;
    }

    // --- Style Injection / Update Function ---
    function injectOrUpdateStyle(root, styleId, cssContent) {
        if (!root) return;

        let style = root.querySelector(`#${styleId}`);
        if (!style) {
            style = document.createElement('style');
            style.id = styleId;
            style.textContent = cssContent;
            (root === document.head ? document.head : root).appendChild(style);
        } else {
            if (style.textContent !== cssContent) {
                 style.textContent = cssContent;
            }
        }
    }

    // --- Global Style Application Functions ---
    function applyWidthStyleToAllRoots(widthValue) {
        const widthCss = getWidthCss(widthValue);
        allStyleRoots.forEach(root => {
            injectOrUpdateStyle(root, WIDTH_STYLE_ID, widthCss);
        });
        console.log(`UserScript: Applied max-width var: ${widthValue} to all known roots.`);
    }

    function applyJustificationStyleToAllRoots(enabled) {
        const justifyCss = enabled ? getJustifyCss() : '';
        allStyleRoots.forEach(root => {
            injectOrUpdateStyle(root, JUSTIFY_STYLE_ID, justifyCss);
        });
        console.log(`UserScript: Text justification ${enabled ? 'enabled' : 'disabled'} for all known roots.`);
    }


    // --- Menu Command Logic ---

    // ** Width Configuration **
    function promptAndSetWidth() {
        const currentWidth = GM_getValue(WIDTH_STORAGE_KEY, DEFAULT_WIDTH);
        const newWidth = prompt(`Enter new max-width for messages (--message-list-max-width):\n(e.g., ${DEFAULT_WIDTH}, 1500px, 90%)`, currentWidth);

        if (newWidth === null) {
            console.log('UserScript: Width change cancelled.');
            return;
        }

        const trimmedWidth = newWidth.trim();
        if (trimmedWidth) {
             GM_setValue(WIDTH_STORAGE_KEY, trimmedWidth);
             applyWidthStyleToAllRoots(trimmedWidth);
             console.log(`UserScript: Max-width (--message-list-max-width) set to ${trimmedWidth} and saved.`);
        } else {
             console.warn('UserScript: Invalid/empty width value entered:', newWidth);
             alert('Invalid or empty width value entered.');
        }
    }

    // ** Justification Toggle **
    function getJustifyMenuLabel(isEnabled) {
         return `${isEnabled ? 'Disable' : 'Enable'} Text Justification (Messages)`;
    }

    function getJustifyAccessKey(isEnabled) {
        return isEnabled ? 'D' : 'E';
    }

    function toggleJustification() {
        let currentState = GM_getValue(JUSTIFY_STORAGE_KEY, false);
        let newState = !currentState;

        if (justifyMenuCommandLabel) {
             try {
                GM_unregisterMenuCommand(justifyMenuCommandLabel);
             } catch (e) {
                console.warn('UserScript: Failed to unregister justify menu command:', justifyMenuCommandLabel, e);
             }
        }

        GM_setValue(JUSTIFY_STORAGE_KEY, newState);
        applyJustificationStyleToAllRoots(newState);

        registerJustificationMenuCommand(newState);
        console.log(`UserScript: Text justification toggled to ${newState ? 'enabled' : 'disabled'}.`);
    }

    function registerJustificationMenuCommand(isEnabled) {
        const newLabel = getJustifyMenuLabel(isEnabled);
        const accessKey = getJustifyAccessKey(isEnabled);
        justifyMenuCommandLabel = newLabel;
        GM_registerMenuCommand(
            newLabel,
            toggleJustification,
            accessKey
        );
    }

    // --- Shadow DOM Handling ---
    function processElement(element) {
        if (element.shadowRoot && !allStyleRoots.has(element.shadowRoot)) {
            const shadow = element.shadowRoot;
            allStyleRoots.add(shadow);
            console.log('UserScript: Detected new Shadow Root, applying styles.', shadow.host);

            const currentWidth = GM_getValue(WIDTH_STORAGE_KEY, DEFAULT_WIDTH);
            const currentJustify = GM_getValue(JUSTIFY_STORAGE_KEY, false);
            injectOrUpdateStyle(shadow, WIDTH_STYLE_ID, getWidthCss(currentWidth));
            injectOrUpdateStyle(shadow, JUSTIFY_STYLE_ID, currentJustify ? getJustifyCss() : '');
        }
    }

    // --- Initialization ---

    if (document.head) {
        allStyleRoots.add(document.head);
    } else {
        allStyleRoots.add(document.documentElement || document);
    }

    let initialWidth = GM_getValue(WIDTH_STORAGE_KEY, DEFAULT_WIDTH);
    let initialJustifyState = GM_getValue(JUSTIFY_STORAGE_KEY, false);

    applyWidthStyleToAllRoots(initialWidth);
    applyJustificationStyleToAllRoots(initialJustifyState);

    GM_registerMenuCommand('Set DeepSeek Max Width...', promptAndSetWidth, 'W');
    registerJustificationMenuCommand(initialJustifyState);

    console.log('UserScript: Starting initial Shadow DOM scan...');
    try {
        document.querySelectorAll('*').forEach(processElement);
    } catch (e) {
        console.error("UserScript: Error during initial Shadow DOM scan", e);
    }
    console.log('UserScript: Initial Shadow DOM scan complete.');

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                     if (node.shadowRoot && !allStyleRoots.has(node.shadowRoot)) {
                           processElement(node);
                     }
                     try {
                        node.querySelectorAll('*').forEach(child => {
                            if (child.shadowRoot && !allStyleRoots.has(child.shadowRoot)) {
                                processElement(child);
                            }
                        });
                     } catch (e) {
                         // console.warn("UserScript: Error querying descendants of added node", node, e);
                     }
                }
            });
        });
    });

    console.log("UserScript: Starting MutationObserver to watch for new Shadow DOMs.");
    observer.observe(document.documentElement || document.body || document, {
        childList: true,
        subtree: true
    });

})();