Toggle White Overlay on Top of ChatGPT Page

在 https://chatgpt.com/ 页面顶部添加一个可切换的白色背景覆盖层,鼠标移入时显示,移开时隐藏

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Toggle White Overlay on Top of ChatGPT Page
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  在 https://chatgpt.com/ 页面顶部添加一个可切换的白色背景覆盖层,鼠标移入时显示,移开时隐藏
// @match        https://chatgpt.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建覆盖层
    const overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '60px';
    overlay.style.backgroundColor = 'white';
    overlay.style.zIndex = '1000';
    overlay.style.opacity = '0'; // 初始状态隐藏
    overlay.style.transition = 'opacity 0.3s';
    overlay.style.pointerEvents = 'none';

    // 鼠标移动事件
    document.body.addEventListener('mousemove', (event) => {
        if (event.clientY <= 60) {
            overlay.style.opacity = '1';
        } else {
            overlay.style.opacity = '0';
        }
    });

    // 使用 MutationObserver 监控页面加载
    const observer = new MutationObserver(() => {
        if (document.body) {
            document.body.appendChild(overlay);
            console.log("覆盖层已添加");
            observer.disconnect(); // 覆盖层添加后停止观察
        }
    });

    // 监视页面的变化,确保覆盖层添加在动态加载内容后
    observer.observe(document.documentElement, { childList: true, subtree: true });
})();