Customize ChatGPT with advanced background, UI styling, text controls, and presets
// ==UserScript==
// @name ChatGPT Enhanced Customizer
// @namespace https://github.com/elixirsneededx/ChatGPT-Enhanced-Customizer-TamperMonkey-
// @version 3.0
// @description Customize ChatGPT with advanced background, UI styling, text controls, and presets
// @license MIT
// @copyright 2024, elixirsneededx (https://github.com/elixirsneededx) @elixirsneededx on discord.
// @author @elixirsneededx on discord
// @match http*://chat.openai.com/*
// @match http*://chatgpt.com/*
// @connect https://greatest.deepsurf.us
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// ==/UserScript==
(function () {
'use strict';
// Custom Styles
GM_addStyle(`
#customization-gui {
position: fixed;
top: 10px;
right: 10px;
background: black;
padding: 15px;
border-radius: 10px;
z-index: 10000;
font-family: Arial, sans-serif;
color: white;
display: flex;
flex-direction: column;
gap: 10px;
}
#customization-gui h1, #customization-gui p {
margin: 0;
}
#customization-gui h1 {
font-size: 20px;
color: #ff00ff;
}
#customization-gui p {
font-size: 14px;
color: #ff00ff;
}
#customization-gui label {
margin-bottom: 5px;
}
#customization-gui select, #customization-gui input[type="color"], #customization-gui input[type="file"] {
width: 100%;
padding: 5px;
border-radius: 4px;
background-color: black;
color: white;
border: 1px solid #ffffff;
}
.custom-bg-image, .reopen-gui {
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
cursor: pointer;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 10000;
}
.reopen-gui {
display: none;
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/023/060/823/small_2x/chatgpt-concept-artificial-intelligence-chatbot-neon-logo-on-black-background-free-vector.jpg');
}
.row {
display: flex;
flex-direction: row;
gap: 10px;
}
.column {
display: flex;
flex-direction: column;
gap: 10px;
}
#close-button {
position: absolute;
top: 5px;
right: 5px;
background: red;
border: none;
color: white;
padding: 2px 6px;
border-radius: 4px;
cursor: pointer;
}
`);
// Create and append the GUI
const gui = document.createElement('div');
gui.id = 'customization-gui';
gui.innerHTML = `
<button id="close-button">X</button>
<h1>ChatGPTEnhancer3.0</h1>
<div class="column">
<div class="row">
<label for="bgColorPicker">Background Color:</label>
<input type="color" id="bgColorPicker" value="#ffffff" />
</div>
<div class="row">
<label for="headerColorPicker">Header Color:</label>
<input type="color" id="headerColorPicker" value="#f0f0f0" />
</div>
<div class="row">
<label for="sidebarColorPicker">Sidebar Color:</label>
<input type="color" id="sidebarColorPicker" value="#ffffff" />
</div>
</div>
<div class="column">
<label for="fontSelect">Font:</label>
<select id="fontSelect">
<option value="Arial">Arial</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Algerian">Algerian</option>
</select>
<label for="fileInput">Custom Background:</label>
<input type="file" id="fileInput" accept=".mp4,.mp3,.gif,.png,.jpeg,.jpg" />
</div>
<div class="column">
<label for="presetSelect">Presets:</label>
<select id="presetSelect">
<option value="default">Select a preset...</option>
<option value="Anime Style">Anime Style</option>
<option value="Slinky Style">Slinky Style</option>
<option value="Bluematrix Style">Bluematrix Style</option>
</select>
</div>
<p> @elixirsneededx on Discord - main developer</p>
<p> @jokeysalt on Discord - presets/designer</p>
<p> vital/@sacrificialmvp on Discord - motivation/design</p>
`;
document.body.appendChild(gui);
// Handle closing and reopening the GUI
const closeButton = document.getElementById('close-button');
const reopenGuiButton = document.createElement('div');
reopenGuiButton.classList.add('reopen-gui');
document.body.appendChild(reopenGuiButton);
closeButton.addEventListener('click', () => {
gui.style.display = 'none';
reopenGuiButton.style.display = 'block';
});
reopenGuiButton.addEventListener('click', () => {
gui.style.display = 'flex';
reopenGuiButton.style.display = 'none';
});
// Handle background color changes
const bgColorPicker = document.getElementById('bgColorPicker');
bgColorPicker.addEventListener('input', () => {
document.body.style.backgroundColor = bgColorPicker.value;
localStorage.setItem('bgColor', bgColorPicker.value);
});
const savedBgColor = localStorage.getItem('bgColor');
if (savedBgColor) {
bgColorPicker.value = savedBgColor;
document.body.style.backgroundColor = savedBgColor;
}
// Handle header color changes
const headerColorPicker = document.getElementById('headerColorPicker');
headerColorPicker.addEventListener('input', () => {
const header = document.querySelector('.sticky.top-0.z-10');
if (header) {
header.style.backgroundColor = headerColorPicker.value;
localStorage.setItem('headerColor', headerColorPicker.value);
}
});
const savedHeaderColor = localStorage.getItem('headerColor');
if (savedHeaderColor) {
headerColorPicker.value = savedHeaderColor;
const header = document.querySelector('.sticky.top-0.z-10');
if (header) {
header.style.backgroundColor = savedHeaderColor;
}
}
// Handle sidebar color changes
const sidebarColorPicker = document.getElementById('sidebarColorPicker');
sidebarColorPicker.addEventListener('input', () => {
const color = sidebarColorPicker.value;
GM_addStyle(`
.bg-token-sidebar-surface-primary {
background-color: ${color} !important;
}
`);
localStorage.setItem('sidebarColor', color);
});
const savedSidebarColor = localStorage.getItem('sidebarColor');
if (savedSidebarColor) {
sidebarColorPicker.value = savedSidebarColor;
GM_addStyle(`
.bg-token-sidebar-surface-primary {
background-color: ${savedSidebarColor} !important;
}
`);
}
// Handle font changes
const fontSelect = document.getElementById('fontSelect');
fontSelect.addEventListener('change', () => {
document.body.style.fontFamily = fontSelect.value;
localStorage.setItem('fontFamily', fontSelect.value);
});
const savedFontFamily = localStorage.getItem('fontFamily');
if (savedFontFamily) {
fontSelect.value = savedFontFamily;
document.body.style.fontFamily = savedFontFamily;
}
// Handle custom background uploads
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
if (file) {
applyCustomBackground(file);
localStorage.setItem('customBackground', URL.createObjectURL(file));
localStorage.setItem('customBackgroundType', file.type);
}
});
const savedCustomBackground = localStorage.getItem('customBackground');
const savedCustomBackgroundType = localStorage.getItem('customBackgroundType');
if (savedCustomBackground && savedCustomBackgroundType) {
applyCustomBackground({ type: savedCustomBackgroundType, src: savedCustomBackground });
}
function applyCustomBackground(file) {
const chatArea = document.querySelector('main');
if (!chatArea) return;
const fileURL = file.src || URL.createObjectURL(file);
if (file.type.includes('video') || file.type.includes('audio')) {
chatArea.innerHTML = `<video autoplay loop muted style="position: absolute; width: 100%; height: 100%; object-fit: cover;"><source src="${fileURL}" type="${file.type}"></video>`;
} else if (file.type.includes('image')) {
chatArea.style.backgroundImage = `url(${fileURL})`;
chatArea.style.backgroundSize = 'cover';
chatArea.style.backgroundPosition = 'center';
}
}
// Handle preset changes
const presetSelect = document.getElementById('presetSelect');
presetSelect.addEventListener('change', () => {
applyPreset(presetSelect.value);
});
function applyPreset(name) {
if (name === 'Anime Style') {
document.body.style.backgroundImage = 'url(https://raw.githubusercontent.com/elixirsneededx/ChatGPT-Enhanced-Customizer-TamperMonkey-/main/anime-preset.jpg)';
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundPosition = 'center';
bgColorPicker.value = '#ff1493';
fontSelect.value = 'Algerian';
document.body.style.fontFamily = 'Algerian';
localStorage.setItem('preset', 'Anime Style');
} else if (name === 'Slinky Style') {
document.body.style.backgroundImage = 'url(https://raw.githubusercontent.com/elixirsneededx/ChatGPT-Enhanced-Customizer-TamperMonkey-/main/slinky-preset.gif)';
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundPosition = 'center';
bgColorPicker.value = '#00ffff';
fontSelect.value = 'Comic Sans MS';
document.body.style.fontFamily = 'Comic Sans MS';
localStorage.setItem('preset', 'Slinky Style');
} else if (name === 'Bluematrix Style') {
document.body.style.backgroundImage = 'url(https://raw.githubusercontent.com/elixirsneededx/ChatGPT-Enhanced-Customizer-TamperMonkey-/main/bluematrix-preset.gif)';
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundPosition = 'center';
bgColorPicker.value = '#00008b';
fontSelect.value = 'Times New Roman';
document.body.style.fontFamily = 'Times New Roman';
localStorage.setItem('preset', 'Bluematrix Style');
} else if (name === 'default') {
localStorage.removeItem('preset');
window.location.reload();
}
}
// Load preset on page load
const savedPreset = localStorage.getItem('preset');
if (savedPreset) {
presetSelect.value = savedPreset;
applyPreset(savedPreset);
}
})();