☰

AI Studio Build Focus Mode

Provides a clean "Focus Mode" for the Google AI Studio app builder by hiding everything except the preview panel.

目前為 2025-08-28 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         AI Studio Build Focus Mode
// @name:zh-CN   AI Studio Build 专注模式
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Provides a clean "Focus Mode" for the Google AI Studio app builder by hiding everything except the preview panel.
// @description:zh-CN 为 Google AI Studio 应用构建器提供清爽的“专注模式”，仅显示预览面板。
// @author       yeahhe365
// @match        https://aistudio.google.com/app/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=aistudio.google.com
// @grant        GM_addStyle
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    console.log('[AI Studio Build Focus Mode] Script started. Waiting for the applet container...');

    // 目标容器的准确类名是 '.applet-container'
    const TARGET_SELECTOR = '.applet-container';

    // 使用定时器持续检查，直到目标元素被加载到页面中
    const intervalId = setInterval(() => {
        const previewContainer = document.querySelector(TARGET_SELECTOR);

        if (previewContainer) {
            console.log('[AI Studio Build Focus Mode] Applet container found!', previewContainer);
            
            // 找到后立即停止定时器，避免不必要的性能消耗
            clearInterval(intervalId);

            // 应用专注模式样式
            applyFocusMode();
        }
    }, 500); // 每 0.5 秒检查一次

    function applyFocusMode() {
        console.log('[AI Studio Build Focus Mode] Applying styles...');
        
        const focusStyles = `
            /* 1. 隐藏所有无关的顶层和同级元素 */
            body > app-header,                   /* 顶部全局导航栏 */
            ms-console-left-panel,               /* 左侧整个代码/提示面板 */
            .console-left-panel,                 /* 左侧面板的另一种可能形式 */
            ms-console-splitter,                 /* 中间的拖动条 */
            .console-right-panel > .subheader,   /* 右侧面板内部的 "Preview/Code" 标题栏 */
            .console-right-panel > .editor-container, /* 右侧面板内部可能出现的编辑器 */
            .safety-info-container               /* 底部的安全提示信息 */
             {
                display: none !important;
                visibility: hidden !important;
            }

            /* 2. 将目标预览容器提升到最顶层并使其占满整个屏幕 */
            .applet-container {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                z-index: 999999 !important;
                padding: 0 !important;
                border: none !important;
            }

            /* 3. 确保内部的iframe也完全填满其容器 */
            .applet-container iframe {
                width: 100% !important;
                height: 100% !important;
            }

            /* 4. 重置其父容器的样式，防止它们限制预览容器的尺寸 */
            ms-console-content,
            .console-right-panel {
                position: static !important;
                overflow: visible !important;
            }
        `;

        // 使用 GM_addStyle 将我们的CSS注入页面
        GM_addStyle(focusStyles);
        
        console.log('[AI Studio Build Focus Mode] Styles applied successfully!');
    }

    // 设置一个15秒的超时，如果页面结构发生巨大变化导致找不到元素，
    // 脚本会自动停止，不会一直运行。
    setTimeout(() => {
        clearInterval(intervalId);
    }, 15000);

})();