ChatGPT撑开页面宽度

将页面宽度展开
目前为 2023-08-11 提交的版本。查看最新版本。
换行
/*
 * @Author: Await
 * @Date: 2023-08-11 11:42:41
 * @LastEditors: Await
 * @LastEditTime: 2023-08-11 15:10:43
 * @Description: 请填写简介
 */
// ==UserScript==
// @name         ChatGPT撑开页面宽度
// @namespace    https://gf.qytechs.cn/
// @version      1.0.1
// @description  将页面宽度展开
// @author       OpenAI - ChatGPT
// @match        https://chat.openai.com/
// @match        https://chat.openai.com/c/*
// @match        https://chat.openai.com/?*
// @license    await
// ==/UserScript==

(function () {
  "use strict";
  const newMaxWidth = "90rem";
  const targetClassName = ".xl\\:max-w-3xl";
  const targetClass = "flex flex-col text-sm dark:bg-gray-800";
  const desiredMinWidth = 1280;

  //   function checkAndModifyStyle() {
  //     var elements = document.querySelectorAll(targetClassName);
  //     elements.forEach(function (element) {
  //       editStyle(element);
  //     });
  //   }

  function btnClick() {
    const toggleButton = document.querySelector("nav");
    //toggleButton添加一个元素，位置在 窗口宽度小于1280时，右上角的按钮 top10px left10px
    //提示内容为：请点击此按钮，以展开页面宽度 如果页面未展开，请重新点击此按钮 提示内容十秒后自动消失
    toggleButton.insertAdjacentHTML(
      "beforeend",
      '<div id="btnClick" style="position:fixed;top:3rem;left:15rem;z-index:9999;background-color:rgba(0,0,0,0.5);color:#fff;padding:10px;border-radius:5px;">如果页面宽度未展开，请重新点击此树结构导航栏<br>或者直接<span style="color:red">点击我</span><br>提示内容十秒后自动消失</div>'
    );
    const btn = document.getElementById("btnClick");
    btn.addEventListener("click", function () {
      checkObserver();
    });
    setTimeout(function () {
      btn.remove();
    }, 10000);
    if (toggleButton) {
      toggleButton.addEventListener("click", function () {
        setTimeout(function () {
          checkObserver();
        }, 1000);
      });
    }
  }

  function checkObserver() {
    var elementForm = document.querySelectorAll("form");
    elementForm.forEach(function (element) {
      if (element.className.indexOf("xl:max-w-3xl") > -1) {
        editStyle(element);
      }
    });

    var parentElement = document.getElementsByClassName(targetClass)[0]; // 替换为实际的父元素ID或选择器
    //获取元素本身的子元素
    parentElement.querySelectorAll(targetClassName).forEach(function (flexDiv) {
      editStyle(flexDiv);
    });
    var observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        mutation.addedNodes.forEach(function (addedNode) {
          var flexDivs = addedNode.querySelectorAll(targetClassName);
          flexDivs.forEach(function (flexDiv) {
            editStyle(flexDiv);
          });
        });
      });
    });
    var config = { childList: true, subtree: true };
    observer.observe(parentElement, config);
  }

  function editStyle(el) {
    el.style.transition = "max-width 1s";
    setTimeout(function () {
      el.style.transition = "";
    }, 1000);
    el.style.maxWidth = newMaxWidth;
  }

  window.addEventListener("resize", checkObserver);
  window.onload = function () {
    if (window.innerWidth < desiredMinWidth) {
      return;
    }
    btnClick();
    // checkAndModifyStyle();
    setTimeout(function () {
      checkObserver();
    }, 2000);
  };
})();
欢迎访问Greasy Fork镜像
