Gemini Fullscreen Canvas Toggle - Hide sidebar, header, and chat to focus only on the canvas/artifact with a simple toggle button. Solves the annoying problem of gemini having no fullscreen/pop-out option.

gemini-fullscreen-canvas-toggle.user.js

// ==UserScript==
// @name         Gemini Chat Toggle - Hide Chat & Fullscreen Canvas
// @namespace    Duuuh
// @version      5.2
// @description  Toggle button to hide everything except canvas on Google Gemini
// @author       Duuuh
// @match        *://gemini.google.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    console.log('[GEMINI TOGGLE] Script loaded');

    let isChatHidden = false;

    function createToggleButton() {
        if (document.getElementById('gemini-chat-toggle-btn')) return;

        const button = document.createElement('button');
        button.id = 'gemini-chat-toggle-btn';
        button.textContent = '◀';
        button.title = 'Toggle Fullscreen Canvas';
        
        Object.assign(button.style, {
            position: 'fixed',
            top: '50%',
            right: '20px',
            transform: 'translateY(-50%)',
            zIndex: '999999',
            width: '40px',
            height: '40px',
            borderRadius: '50%',
            border: '2px solid #1a73e8',
            backgroundColor: '#fff',
            color: '#1a73e8',
            fontSize: '20px',
            cursor: 'pointer',
            boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
            transition: 'all 0.3s ease',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontWeight: 'bold'
        });

        button.addEventListener('mouseenter', () => {
            button.style.backgroundColor = '#1a73e8';
            button.style.color = '#fff';
            button.style.transform = 'translateY(-50%) scale(1.1)';
        });

        button.addEventListener('mouseleave', () => {
            button.style.backgroundColor = '#fff';
            button.style.color = '#1a73e8';
            button.style.transform = 'translateY(-50%) scale(1)';
        });

        button.addEventListener('click', toggleChat);
        document.body.appendChild(button);
        console.log('[GEMINI TOGGLE] Button created');
    }

    function hideElement(selector) {
        const elements = document.querySelectorAll(selector);
        elements.forEach(el => {
            if (el) el.style.display = 'none';
        });
        return elements.length;
    }

    function showElement(selector) {
        const elements = document.querySelectorAll(selector);
        elements.forEach(el => {
            if (el) el.style.display = '';
        });
        return elements.length;
    }

    function toggleChat() {
        const button = document.getElementById('gemini-chat-toggle-btn');
        
        isChatHidden = !isChatHidden;

        if (isChatHidden) {
            // HIDE MODE - use querySelectorAll to catch all instances
            console.log('[GEMINI TOGGLE] Hiding UI elements...');
            
            hideElement('bard-sidenav');
            hideElement('app-header');
            hideElement('mat-toolbar');
            hideElement('header');
            hideElement('.chat-container');
            
            // Expand content wrapper
            const contentWrappers = document.querySelectorAll('.content-wrapper');
            contentWrappers.forEach(wrapper => {
                if (wrapper) {
                    wrapper.style.marginLeft = '0';
                    wrapper.style.marginTop = '0';
                    wrapper.style.width = '100vw';
                    wrapper.style.height = '100vh';
                }
            });
            
            // Expand any canvas/iframe
            const canvases = document.querySelectorAll('.canvas-container, [class*="canvas"], iframe, .artifact-viewer');
            canvases.forEach(canvas => {
                if (canvas) {
                    canvas.style.position = 'fixed';
                    canvas.style.top = '0';
                    canvas.style.left = '0';
                    canvas.style.width = '100vw';
                    canvas.style.height = '100vh';
                    canvas.style.zIndex = '1000';
                    canvas.style.margin = '0';
                    canvas.style.maxWidth = '100%';
                }
            });
            
            button.textContent = '▶';
            button.title = 'Show All UI';
            console.log('[GEMINI TOGGLE] Fullscreen canvas mode activated');
        } else {
            // SHOW MODE - force re-query everything
            console.log('[GEMINI TOGGLE] Restoring UI elements...');
            
            // Use setTimeout to ensure we query after any DOM updates
            setTimeout(() => {
                const restored = {
                    sidebar: showElement('bard-sidenav'),
                    header: showElement('app-header, mat-toolbar, header'),
                    chat: showElement('.chat-container')
                };
                
                console.log('[GEMINI TOGGLE] Restored:', restored);
                
                // Restore content wrapper
                const contentWrappers = document.querySelectorAll('.content-wrapper');
                contentWrappers.forEach(wrapper => {
                    if (wrapper) {
                        wrapper.style.marginLeft = '';
                        wrapper.style.marginTop = '';
                        wrapper.style.width = '';
                        wrapper.style.height = '';
                    }
                });
                
                // Restore canvas/iframe
                const canvases = document.querySelectorAll('.canvas-container, [class*="canvas"], iframe, .artifact-viewer');
                canvases.forEach(canvas => {
                    if (canvas) {
                        canvas.style.position = '';
                        canvas.style.top = '';
                        canvas.style.left = '';
                        canvas.style.width = '';
                        canvas.style.height = '';
                        canvas.style.zIndex = '';
                        canvas.style.margin = '';
                        canvas.style.maxWidth = '';
                    }
                });
                
                console.log('[GEMINI TOGGLE] Normal mode restored');
            }, 50);
            
            button.textContent = '◀';
            button.title = 'Fullscreen Canvas';
        }
    }

    function init() {
        if (document.body) {
            createToggleButton();
        } else {
            setTimeout(init, 100);
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    setTimeout(init, 1000);

})();