// ==UserScript==

// @name         网页全屏工具

// @namespace    http://tampermonkey.net/

// @version      0.1

// @description  提供一个简单的按钮将当前网页全屏，并可通过浏览器的返回操作退出全屏。

// @author       Assistant

// @match        *://*/*

// @grant        none

// @license MIT

// @downloadURL https://update.greasyfork.icu/scripts/573724/%E7%BD%91%E9%A1%B5%E5%85%A8%E5%B1%8F%E5%B7%A5%E5%85%B7.user.js
// @updateURL https://update.greasyfork.icu/scripts/573724/%E7%BD%91%E9%A1%B5%E5%85%A8%E5%B1%8F%E5%B7%A5%E5%85%B7.meta.js
// ==/UserScript==

(function() {

    'use strict';

    // 定义按钮的样式

    const buttonStyle = `

        position: fixed;

        top: 20px;

        left: 20px;

        z-index: 999999;

        width: 40px;

        height: 40px;

        background-color: rgba(0, 0, 0, 0.5);

        border-radius: 50%;

        cursor: pointer;

        display: flex;

        justify-content: center;

        align-items: center;

        box-shadow: 0 2px 5px rgba(0,0,0,0.3);

        transition: opacity 0.3s ease;

    `;

    // 定义SVG图标 (一个简单的全屏图标)

    const svgIcon = `

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>

        </svg>

    `;

    // 创建按钮元素

    let fullscreenBtn = document.createElement('div');

    fullscreenBtn.style.cssText = buttonStyle;

    fullscreenBtn.innerHTML = svgIcon;

    fullscreenBtn.title = "点击全屏";

    // 标志变量，用于跟踪当前是否处于我们触发的全屏状态

    let isOurFullscreen = false;

    // 将按钮添加到页面

    document.body.appendChild(fullscreenBtn);

    // 进入全屏的函数

    function enterFullscreen() {

        let elem = document.documentElement;

        if (elem.requestFullscreen) {

            elem.requestFullscreen();

        } else if (elem.webkitRequestFullscreen) { /* Safari */

            elem.webkitRequestFullscreen();

        } else if (elem.msRequestFullscreen) { /* IE11 */

            elem.msRequestFullscreen();

        }

    }

    // 按钮点击事件

    fullscreenBtn.addEventListener('click', () => {

        enterFullscreen();

    });

    // 监听全屏状态变化

    document.addEventListener('fullscreenchange', handleFullscreenChange);

    document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // 兼容旧版Safari

    document.addEventListener('mozfullscreenchange', handleFullscreenChange); // 兼容旧版Firefox

    document.addEventListener('MSFullscreenChange', handleFullscreenChange); // 兼容IE

    function handleFullscreenChange() {

        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {

            // 处于全屏状态

            isOurFullscreen = true;

            // 隐藏按钮

            fullscreenBtn.style.display = 'none';

            // 关键：在进入全屏时，向浏览器的历史记录中推送一个新状态

            // 这样用户点击浏览器的“返回”按钮时，就会触发 popstate 事件

            window.history.pushState({ fullscreen: true }, "");

        } else {

            // 退出全屏状态

            isOurFullscreen = false;

            // 重新显示按钮

            fullscreenBtn.style.display = 'flex';

        }

    }

    // 监听浏览器的“返回”操作 (popstate 事件)

    window.addEventListener('popstate', (event) => {

        // 如果当前处于我们触发的全屏状态

        if (isOurFullscreen) {

            // 退出全屏

            if (document.exitFullscreen) {

                document.exitFullscreen();

            } else if (document.webkitExitFullscreen) { /* Safari */

                document.webkitExitFullscreen();

            } else if (document.msExitFullscreen) { /* IE11 */

                document.msExitFullscreen();

            }

            // 注意：退出全屏会触发 fullscreenchange 事件，那里的逻辑会负责重新显示按钮

        }

    });

})();