将页面宽度展开
目前为
// ==UserScript==
// @name ChatGPT撑开页面宽度
// @namespace https://greasyfork.org/
// @version 1.1.3
// @description 将页面宽度展开
// @author OpenAI - ChatGPT
// @match https://chat.openai.com/
// @match https://chat.openai.com/c/*
// @match https://chat.openai.com/?*
// @license AGPL-3.0-or-later
// ==/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;
const styleId = "await-max-width";
const btnId = "await-btn";
// const btnSvgId = "await-svg";
const btnShowTipId = "await-show-tip";
const textClass = "await-text";
function getById(id) {
const btn = document.getElementById(id);
if (!btn) {
setTimeout(function () {
return getById();
}, 1000);
}
return btn;
}
function styleCreate() {
const style = document.createElement("style");
style.innerHTML = `
.${styleId} {
max-width: ${newMaxWidth} !important;
}
.${btnId}{
right:2.8rem;
}
.${textClass}{
}
`;
document.head.appendChild(style);
}
function btnClickAdd() {
//在 id为prompt-textarea的元素后面添加一个btnClick按钮
const promptTextarea = document.getElementById("prompt-textarea");
if (!promptTextarea) {
setTimeout(function () {
btnClickAdd();
}, 1000);
return;
}
promptTextarea.insertAdjacentHTML(
"afterend",
`<button id="${btnId}" class="absolute p-1 rounded-md md:bottom-3 md:p-2 md:right-3 dark:hover:bg-gray-900 dark:disabled:hover:bg-transparent right-2 disabled:text-gray-400 enabled:bg-brand-purple text-white bottom-1.5 transition-colors disabled:opacity-40 ${btnId}"></button> `
);
}
function removeStyle(el) {
el.classList.remove(styleId);
}
function editStyle(el) {
el.style.transition = "max-width 1s";
setTimeout(function () {
el.style.transition = "";
}, 1000);
el.classList.add(styleId);
}
function openSvg() {
const btn = getById(btnId);
//替换btn的svg
btn.innerHTML = "";
btn.insertAdjacentHTML(
"afterbegin",
`<a class="flex gap-3 transition-colors duration-200 text-white cursor-pointer text-sm rounded-md border border-white/20 hover:bg-gray-500/10 flex-shrink-0 items-center justify-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg><span style="${textClass}">撑开</span></a>`
// `<a class="flex gap-3 transition-colors duration-200 text-white cursor-pointer text-sm rounded-md border border-white/20 hover:bg-gray-500/10 flex-shrink-0 items-center justify-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg><span style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;">撑开</span></a>`
);
// btn.insertAdjacentHTML(
// "afterbegin",
// `<span data-state="closed"><svg class="${btnSvgId}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize-2"><path d="M15 3H21V9M9 15H3v6M21 9L15 9M9 15L9 9"></path></svg></span>`
// );
btn.addEventListener("click", function () {
checkObserver(1);
closeSvg();
});
}
function closeSvg() {
const btn = getById(btnId);
btn.innerHTML = "";
btn.insertAdjacentHTML(
"afterbegin",
`<a class="flex gap-3 transition-colors duration-200 text-white cursor-pointer text-sm rounded-md border border-white/20 hover:bg-gray-500/10 flex-shrink-0 items-center justify-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg><span style="${textClass}">还原</span></a>`
);
// btn.insertAdjacentHTML(
// "afterbegin",
// `<span data-state="closed"><svg class="${btnSvgId}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2"><path d="M4 4h7.586a2 2 0 0 1 1.414.586L20 15.172V4M20 20H12.414a2 2 0 0 1-1.414-.586L4 8.828V20M4 4l8.586 8.586"></path></svg></span>`
// );
btn.addEventListener("click", function () {
checkObserver(2);
openSvg();
});
}
function showTip() {
styleCreate();
const toggleButton = document.querySelector("nav");
if (!toggleButton) {
setTimeout(function () {
showTip();
}, 1000);
return;
}
toggleButton.insertAdjacentHTML(
"beforeend",
`<div id="${btnShowTipId}" 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 = getById(btnShowTipId);
btn.addEventListener("click", function () {
run();
});
setTimeout(function () {
btn.remove();
}, 10000);
}
function btnClick() {
const toggleButton = document.querySelector("nav");
if (!toggleButton) {
setTimeout(function () {
btnClick();
}, 1000);
return;
}
toggleButton.addEventListener("click", function () {
setTimeout(function () {
run();
btnClick();
}, 1000);
});
}
function checkForm() {
var elementForm = document.querySelectorAll("form");
if (!elementForm || elementForm.length === 0) {
setTimeout(function () {
checkObserver();
}, 1000);
return;
}
elementForm.forEach(function (element) {
if (element.className.indexOf("xl:max-w-3xl") > -1) {
editStyle(element);
}
});
}
function checkObserver(type = 1) {
var parentElement = document.getElementsByClassName(targetClass)[0];
if (!parentElement) {
setTimeout(function () {
checkObserver(type);
}, 1000);
return;
}
parentElement.querySelectorAll(targetClassName).forEach(function (flexDiv) {
if (type === 1) {
editStyle(flexDiv);
} else {
removeStyle(flexDiv);
}
});
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (addedNode) {
var flexDivList = addedNode.querySelectorAll(targetClassName);
flexDivList.forEach(function (flexDiv) {
if (type === 1) {
editStyle(flexDiv);
} else {
removeStyle(flexDiv);
}
});
});
});
});
var config = { childList: true, subtree: true };
observer.observe(parentElement, config);
}
function run() {
checkForm();
checkObserver();
btnClickAdd();
closeSvg();
}
window.addEventListener("resize", run);
window.onload = function () {
if (window.innerWidth < desiredMinWidth) {
return;
}
showTip();
btnClick();
setTimeout(function () {
run();
}, 2000);
};
})();