隐藏侧边栏快捷键、输入框大小、窗口宽度自定义调整
// ==UserScript==
// @name ChatGPT 界面优化
// @version 2023.6.3
// @description 隐藏侧边栏快捷键、输入框大小、窗口宽度自定义调整
// @match https://chat.openai.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @namespace your-unique-namespace
// @license MIT
// ==/UserScript==
(async () => {
// #region >>>>>- 页面设置 -<<<<<
let height = GM_getValue('height', 0); // 文本框高度
let width = GM_getValue('width', 0); // 输入框宽度
let windowWidth = GM_getValue('windowWidth', 0); // 对话窗口宽度
let HideTheBottomSisclaimer = GM_getValue('HideTheBottomSisclaimer', true); // 隐藏底部免责声明
let ThumbsUpFeedback = GM_getValue('ThumbsUpFeedback', true); // 隐藏赞、踩反馈按钮
// 快捷键
let keyModifier = GM_getValue('keyModifier', 'ctrl'); // 键修饰符
let keyLetter = GM_getValue('keyLetter', 'b'); // 键字母
function openDialog() {
let dialog = document.createElement('div');
dialog.id = 'Tampermonkey_setting_Box'
dialog.innerHTML = `
<div id="qwerSettingBox">
<h2 id="qwerSettingBox_title">设置</h2>
<h6 id="qwerSettingBox_hint">注意: 0 为官方默认宽度, 100 宽度将占满整个浏览器视口(以全屏为基准), 具体显示效果会因设备的屏幕大小和分辨率而有所差异</h6>
<label class="qwerSettingBox_label">
文本框高度(0-100):
<input class="input" min="0" max="100" id="dialogHeight" type="number" value="${height}">
</label>
<label class="qwerSettingBox_label">
输入框宽度(0-100):
<input class="input" min="0" max="100" id="dialogWidth" type="number" value="${width}">
</label>
<label class="qwerSettingBox_label">
对话窗口宽(0-100):
<input class="input" min="0" max="100" id="dialogWindowWidth" type="number" value="${windowWidth}">
</label>
<label id="shortcutSetting" class="qwerSettingBox_label">
隐藏侧边栏快捷键(a-z):
<div class="FullScreenModeShortcutKeys">
<select id="keyModifier">
<option value="ctrl" ${keyModifier === 'ctrl' ? 'selected' : ''}>ctrl</option>
<option value="alt" ${keyModifier === 'alt' ? 'selected' : ''}>alt</option>
<option value="shift" ${keyModifier === 'shift' ? 'selected' : ''}>shift</option>
<option value="null" ${keyModifier === 'null' ? 'selected' : ''}>关闭</option>
</select>
+
<input class="input" id="keyLetter" type="text" value="${keyLetter}">
</div>
</label>
<label class="qwerSettingBox_label">
隐藏底部免责声明:
<input id="HideTheBottomSisclaimer" type="checkbox" ${HideTheBottomSisclaimer ? 'checked' : ''}>
</label>
<label class="qwerSettingBox_label">
隐藏赞、踩反馈按钮:
<input id="ThumbsUpFeedback" type="checkbox" ${ThumbsUpFeedback ? 'checked' : ''}>
</label>
<div id="qwerSettingBox_button">
<button id="dialogCancel" style="background-color: #EA4335;">取消</button>
<button id="dialogOK" style="background-color: #4285F4;">确定</button>
</div>
</div>`;
document.body.appendChild(dialog); // 添加到页面中
// 点击确定按钮
document.getElementById('dialogOK').onclick = function () {
let newHeight = document.getElementById('dialogHeight').value;
let newWidth = document.getElementById('dialogWidth').value;
let newWindowWidth = document.getElementById('dialogWindowWidth').value;
let newHideTheBottomSisclaimer = document.getElementById('HideTheBottomSisclaimer').checked;
let newThumbsUpFeedback = document.getElementById('ThumbsUpFeedback').checked;
let newKeyModifier = document.getElementById('keyModifier').value;
let newKeyLetter = document.getElementById('keyLetter').value;
GM_setValue('height', Number(newHeight));
GM_setValue('width', Number(newWidth));
GM_setValue('windowWidth', Number(newWindowWidth));
GM_setValue('HideTheBottomSisclaimer', newHideTheBottomSisclaimer);
GM_setValue('ThumbsUpFeedback', newThumbsUpFeedback);
GM_setValue('keyModifier', newKeyModifier);
GM_setValue('keyLetter', newKeyLetter);
location.reload();
};
// 点击取消按钮
document.getElementById('dialogCancel').onclick = function () {
document.body.removeChild(dialog);
};
}
GM_registerMenuCommand('设置', openDialog);
// #endregion
// >>>>>- 隐藏侧边栏快捷键 -<<<<<
if (keyModifier) {
const DOMSidebarButtons = 'a[class="flex p-3 gap-3 transition-colors duration-200 text-white cursor-pointer text-sm rounded-md border border-white/20 hover:bg-gray-500/10 h-11 w-11 flex-shrink-0 items-center justify-center"]';
// 等待 chatgpt 加载完毕
await isLoaded();
function isLoaded() {
return new Promise(resolve => {
var intervalId = setInterval(() => {
if (document.querySelector(DOMSidebarButtons)) {
clearInterval(intervalId);
resolve();
}
}, 100);
});
}
// 侧边栏按钮
let sidebarButtons = document.querySelector(DOMSidebarButtons);
// 监听页面的 DOM 变化，当新元素添加到页面时，重新插入全屏按钮
var navObserver = new MutationObserver(([{ addedNodes, type }]) => {
if (type === 'childList' && addedNodes.length) {
setTimeout(() => {
sidebarButtons = document.querySelector(DOMSidebarButtons); // 重新获取侧边栏按钮
}, 20);
}
})
// 开始监听整个页面的 DOM 变化
navObserver.observe(document.documentElement, { childList: true, subtree: true })
// 快捷键
window.addEventListener('keydown', (event) => {
if (event[`${keyModifier}Key`] && event.key.toLowerCase() === keyLetter.toLowerCase()) {
sidebarButtons.click();
}
});
}
// >>>>>- style -<<<<<
GM_addStyle(`
/* 文本框高度 */
#prompt-textarea {
max-height: ${20.6 + (0.659 * Number(height))}vh !important;
}
/* 输入宽度 */
.stretch {
max-width: ${48 + (0.72 * Number(width))}rem !important;
}
/* 对话框宽度 */
.text-base {
max-width: ${48 + (0.72 * Number(windowWidth))}rem !important
}
/* 全屏按钮样式 */
#fullWindow-button {
right: 3rem !important;
cursor: pointer !important;
transition: 0.2s all !important;
}
#fullWindow-button:hover {
background-color: #ECECF1 !important;
}
/* Tampermonkey 设置 Box */
#Tampermonkey_setting_Box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
z-index: 9999;
}
/* 设置 */
#qwerSettingBox {
padding: 20px;
border-radius: 5px;
width: 367px;
height: 490px;
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(25px);
margin-top: 100px;
}
/* 设置标题 */
#qwerSettingBox_title {
margin-top: 0;
color: #5F6368;
text-align: center;
margin-bottom: 20px;
}
/* 设置提示内容 */
#qwerSettingBox_hint {
margin-top: 0;
color: #ff9916;
text-align: center;
margin-bottom: 10px;
font-size: 14px;
}
/* label */
.qwerSettingBox_label {
display: block;
margin-bottom: 10px;
color: #5F6368;
display: flex;
align-items: center;
justify-content: space-between;
}
.qwerSettingBox_label .input {
width: 118px;
height: 31px;
border-radius: 8px;
}
/* 按钮开关 */
.qwerSettingBox_label #fullScreenMode,
.qwerSettingBox_label #HideTheBottomSisclaimer,
.qwerSettingBox_label #ThumbsUpFeedback,
.qwerSettingBox_label #HoverDisplay_ {
margin-right: 76px;
border-radius: 20px;
width: 40px;
height: 20px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
/* 快捷键 */
.qwerSettingBox_label #keyLetter {
width: 25px;
height: 31px;
border-radius: 8px;
padding: 0px 5px;
}
.qwerSettingBox_label #keyModifier {
width: 69px;
height: 31px;
border-radius: 8px;
padding: 0px 5px;
}
.qwerSettingBox_label .FullScreenModeShortcutKeys {
display: flex;
align-items: center;
width: 118px;
justify-content: space-between;
}
/* 按钮 */
#qwerSettingBox_button {
margin-top: 30px;
display: flex;
justify-content: space-evenly;
}
#qwerSettingBox_button button {
transition: all 0.2s;
color: white;
border: none;
width: 67px;
height: 38px;
cursor: pointer;
border-radius: 4px;
}
/* 隐藏底部免责声明 */
${HideTheBottomSisclaimer ? `div[class="px-3 pb-3 pt-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-4 md:pb-6 md:pt-3"] {
display: none !important;
}
div[class="relative flex h-full flex-1 items-stretch md:flex-col"] {
margin-bottom: 45px !important;
}
` : ''
}
/* 隐藏点赞反馈按钮 */
${ThumbsUpFeedback ? `div [class='flex gap-1'] {
display: none !important;
}
` : ''
}
@media (min-width: 1280px) {
.text-base {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media (min-width: 1024px) {
.text-base {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media (min-width: 1280px) {
.stretch {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media (min-width: 1024px) {
.stretch {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
#dialogCancel:hover {
box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 28%);
transform: translateY(-2px);
}
#dialogOK:hover {
box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 28%);
transform: translateY(-2px);
}`)
})()