Last active
February 16, 2026 18:20
-
-
Save minanagehsalalma/3bc9b4ad26a934bc9a556b71de58259a to your computer and use it in GitHub Desktop.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==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); | |
| })(); |
Author
minanagehsalalma
commented
Feb 16, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment