Combined Background Changer and Color Customizer for Character.AI
// ==UserScript==
// @name Character.ai Changer
// @namespace http://tampermonkey
// @version 1.00.1V3
// @description Combined Background Changer and Color Customizer for Character.AI
// @author NotYou
// @match https://character.ai/*
// @match https://*.character.ai/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// ==========================================
// SCRIPT 1: Character.AI Background Changer
// ==========================================
(function() {
'use strict';
// Initialize logging
console.log('Character.AI Background Changer initialized');
function log(message) {
console.log(`[BG Changer]: ${message}`);
}
// Create UI elements
const controlPanel = document.createElement('div');
const btnToggle = document.createElement('button');
const statusIndicator = document.createElement('div');
// Set up control panel
function setupControlPanel() {
controlPanel.id = 'cai-bg-control-panel';
controlPanel.style.position = 'fixed';
controlPanel.style.bottom = '60px';
controlPanel.style.right = '20px';
controlPanel.style.width = '250px';
controlPanel.style.backgroundColor = 'rgba(30, 30, 30, 0.9)';
controlPanel.style.color = 'white';
controlPanel.style.padding = '15px';
controlPanel.style.borderRadius = '8px';
controlPanel.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
controlPanel.style.zIndex = '9999999';
controlPanel.style.fontFamily = 'Arial, sans-serif';
controlPanel.style.fontSize = '14px';
controlPanel.style.display = 'none';
controlPanel.innerHTML = `
<div id="panel-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
<h3 style="margin: 0; font-size: 16px;">Background Changer</h3>
<button id="close-panel" style="background: none; border: none; color: white; cursor: pointer; font-size: 18px;">×</button>
</div>
<div id="panel-content">
<div style="margin-bottom: 15px;">
<label for="bg-url" style="display: block; margin-bottom: 5px;">Image URL:</label>
<input type="text" id="bg-url" placeholder="https://example.com/image.jpg" style="width: 100%; padding: 5px; box-sizing: border-box; margin-bottom: 5px;">
<button id="apply-url" style="padding: 5px 10px; background: #4a4a4a; border: none; color: white; cursor: pointer; border-radius: 3px;">Apply URL</button>
</div>
<div style="margin-bottom: 15px;">
<label for="bg-upload" style="display: block; margin-bottom: 5px;">Upload Image:</label>
<input type="file" id="bg-upload" accept="image/*" style="width: 100%; margin-bottom: 5px;">
</div>
<div style="margin-bottom: 15px;">
<label for="bg-color" style="display: block; margin-bottom: 5px;">Background Color:</label>
<div style="display: flex; align-items: center;">
<input type="color" id="bg-color" value="#1a1a1a" style="margin-right: 10px;">
<button id="apply-color" style="padding: 5px 10px; background: #4a4a4a; border: none; color: white; cursor: pointer; border-radius: 3px;">Apply Color</button>
</div>
</div>
<div style="text-align: center; margin-top: 20px;">
<button id="reset-bg" style="padding: 8px 15px; background: #cc3333; border: none; color: white; cursor: pointer; border-radius: 3px;">Reset Background</button>
</div>
</div>
`;
}
// Set up toggle button
function setupToggleButton() {
btnToggle.id = 'cai-bg-toggle';
btnToggle.textContent = 'Change BG';
btnToggle.style.position = 'fixed';
btnToggle.style.bottom = '20px';
btnToggle.style.right = '20px';
btnToggle.style.padding = '8px 12px';
btnToggle.style.backgroundColor = '#3a3';
btnToggle.style.color = 'white';
btnToggle.style.border = 'none';
btnToggle.style.borderRadius = '5px';
btnToggle.style.fontSize = '14px';
btnToggle.style.fontWeight = 'bold';
btnToggle.style.cursor = 'pointer';
btnToggle.style.zIndex = '9999997';
btnToggle.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
}
// Set up status indicator
function setupStatusIndicator() {
statusIndicator.id = 'cai-bg-status';
statusIndicator.style.position = 'fixed';
statusIndicator.style.bottom = '20px';
statusIndicator.style.left = '20px';
statusIndicator.style.padding = '8px 12px';
statusIndicator.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
statusIndicator.style.color = 'white';
statusIndicator.style.borderRadius = '4px';
statusIndicator.style.fontSize = '14px';
statusIndicator.style.zIndex = '9999998';
statusIndicator.style.opacity = '0';
statusIndicator.style.transition = 'opacity 0.5s';
statusIndicator.textContent = 'Background changer ready';
}
// Toggle panel visibility
function togglePanel() {
const isVisible = controlPanel.style.display === 'block';
if (isVisible) {
controlPanel.style.display = 'none';
btnToggle.style.backgroundColor = '#3a3';
} else {
controlPanel.style.display = 'block';
btnToggle.style.backgroundColor = '#555';
}
}
// Show status message
function showStatus(message, duration = 2000) {
statusIndicator.textContent = message;
statusIndicator.style.opacity = '1';
setTimeout(() => {
statusIndicator.style.opacity = '0';
}, duration);
}
// Apply background from URL
function applyUrlBackground() {
const url = document.getElementById('bg-url').value.trim();
if (!url) {
showStatus('Please enter a valid URL');
return;
}
applyBackground(`url(${url}) no-repeat center center fixed`, 'cover');
showStatus('Background applied from URL');
}
// Apply background from color picker
function applyColorBackground() {
const color = document.getElementById('bg-color').value;
applyBackground(color);
showStatus('Background color applied');
}
// Apply background image from file upload
function handleImageUpload(event) {
const file = event.target.files[0];
if (!file) return;
// Check if file is an image
if (!file.type.startsWith('image/')) {
showStatus('Please select an image file');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const imageUrl = e.target.result;
applyBackground(`url(${imageUrl}) no-repeat center center fixed`, 'cover');
showStatus('Background image applied');
// Save the image data to GM storage
GM_setValue('bgImageData', imageUrl);
};
reader.readAsDataURL(file);
}
// Apply background
function applyBackground(style, size = null) {
document.body.style.background = style;
if (size) {
document.body.style.backgroundSize = size;
}
// Save settings
GM_setValue('bgStyle', style);
GM_setValue('bgSize', size || '');
}
// Reset background
function resetBackground() {
document.body.style.background = '';
document.body.style.backgroundSize = '';
// Clear saved values
GM_setValue('bgStyle', '');
GM_setValue('bgSize', '');
GM_setValue('bgImageData', '');
// Reset form inputs
const urlInput = document.getElementById('bg-url');
const uploadInput = document.getElementById('bg-upload');
if (urlInput) urlInput.value = '';
if (uploadInput) uploadInput.value = '';
showStatus('Background reset to default');
}
// Restore saved background
function restoreBackground() {
const bgStyle = GM_getValue('bgStyle', '');
const bgSize = GM_getValue('bgSize', '');
if (bgStyle) {
document.body.style.background = bgStyle;
if (bgSize) {
document.body.style.backgroundSize = bgSize;
}
log('Restored saved background');
}
}
// Setup event listeners
function setupEventListeners() {
// Toggle button
btnToggle.addEventListener('click', togglePanel);
// Close panel button
document.getElementById('close-panel')?.addEventListener('click', () => {
togglePanel();
});
// Apply URL background
document.getElementById('apply-url')?.addEventListener('click', applyUrlBackground);
// Apply color background
document.getElementById('apply-color')?.addEventListener('click', applyColorBackground);
// Handle file upload
document.getElementById('bg-upload')?.addEventListener('change', handleImageUpload);
// Reset background
document.getElementById('reset-bg')?.addEventListener('click', resetBackground);
log('Event listeners set up');
}
// DOM Ready helper function
function domReady(callback) {
if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(callback, 1);
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
// Initialize everything when DOM is ready
function init() {
if (!document.body) {
setTimeout(init, 100);
return;
}
try {
// Setup UI elements
setupControlPanel();
setupToggleButton();
setupStatusIndicator();
// Add elements to the page
document.body.appendChild(controlPanel);
document.body.appendChild(btnToggle);
document.body.appendChild(statusIndicator);
// Setup event listeners
setupEventListeners();
// Restore saved background
restoreBackground();
// Show initial status
showStatus('Background changer ready');
log('Initialization complete');
} catch (error) {
console.error('[BG Changer Error]:', error);
}
}
// Run initialization when DOM is ready
domReady(() => {
init();
// Additional safety check
setTimeout(() => {
if (!document.getElementById('cai-bg-control-panel')) {
log('Panel not found, retrying initialization');
init();
}
}, 3000);
});
// Backup initialization on window load
window.addEventListener('load', () => {
if (!document.getElementById('cai-bg-control-panel')) {
log('Panel not found on window load, reinitializing');
init();
}
});
})();
// ==========================================
// SCRIPT 2: Enhanced Color Customizer
// ==========================================
(function() {
'use strict';
// Helper function to get the current theme
function getCurrentTheme() {
return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}
// Default colors based on theme
function getDefaultColors(theme) {
const darkColors = {
'italic': '#E0DF7F',
'quotationmarks': '#FFFFFF',
'plaintext': '#A2A2AC',
'custom': '#E0DF7F',
'charbubble': '#26272B',
'userbubble': '#303136',
'guide': '#131316',
'input': '#202024',
'body': '#18181B',
'accent': '#26272B'
};
const lightColors = {
'italic': '#4F7AA6',
'quotationmarks': '#000000',
'plaintext': '#374151',
'custom': '#4F7AA6',
'charbubble': '#E4E4E7',
'userbubble': '#D9D9DF',
'guide': '#FAFAFA',
'input': '#F4F4F5',
'body': '#ECECEE',
'accent': '#26272B'
};
return theme === 'dark' ? darkColors : lightColors;
}
// Load Comic Sans MS and other web fonts
function loadWebFonts() {
// Add Comic Sans MS
GM_addStyle(`
@import url('https://fonts.cdnfonts.com/css/comic-sans');
@font-face {
font-family: 'Comic Sans MS';
src: local('Comic Sans MS'),
url('https://fonts.cdnfonts.com/s/11177/comici.woff') format('woff'),
url('https://fonts.cdnfonts.com/s/11177/comicbd.woff') format('woff');
font-display: swap;
}
`);
// Add Google Fonts
const googleFontsLink = document.createElement('link');
googleFontsLink.rel = 'stylesheet';
googleFontsLink.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&display=swap';
document.head.appendChild(googleFontsLink);
}
// Create main customization menu
function createCustomizationMenu() {
const theme = getCurrentTheme();
const menuContainer = document.createElement('div');
menuContainer.id = 'cai-color-customizer';
menuContainer.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
background-color: ${theme === 'dark' ? 'rgba(19, 19, 22, 0.95)' : 'rgba(214, 214, 221, 0.95)'};
border-radius: 10px;
padding: 20px;
z-index: 9999;
display: none;
`;
// Tabs container
const tabContainer = document.createElement('div');
tabContainer.style.cssText = `
display: flex;
margin-bottom: 15px;
`;
// Content container
const contentContainer = document.createElement('div');
// Create tabs
const tabs = [
{ name: 'Colors', id: 'colors' },
{ name: 'Typography', id: 'typography' },
{ name: 'Layout', id: 'layout' }
];
tabs.forEach(tab => {
const tabButton = document.createElement('button');
tabButton.textContent = tab.name;
tabButton.style.cssText = `
flex-grow: 1;
padding: 10px;
background-color: ${theme === 'dark' ? '#26272B' : '#E4E4E7'};
border: none;
margin-right: 5px;
cursor: pointer;
`;
tabButton.addEventListener('click', () => {
// Hide all content
contentContainer.innerHTML = '';
// Show specific tab content
switch(tab.id) {
case 'colors':
renderColorTab(contentContainer);
break;
case 'typography':
renderTypographyTab(contentContainer);
break;
case 'layout':
renderLayoutTab(contentContainer);
break;
}
});
tabContainer.appendChild(tabButton);
});
// Add close button
const closeButton = document.createElement('button');
closeButton.textContent = '×';
closeButton.style.cssText = `
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
`;
closeButton.addEventListener('click', () => {
menuContainer.style.display = 'none';
});
menuContainer.appendChild(closeButton);
menuContainer.appendChild(tabContainer);
menuContainer.appendChild(contentContainer);
document.body.appendChild(menuContainer);
// Auto-select the first tab on creation
tabContainer.firstChild.click();
return menuContainer;
}
// Render color customization tab
function renderColorTab(container) {
const theme = getCurrentTheme();
const categories = ['italic', 'quotationmarks', 'plaintext', 'custom', 'charbubble', 'userbubble', 'guide', 'input', 'body', 'accent'];
categories.forEach(category => {
const colorWrapper = document.createElement('div');
colorWrapper.style.cssText = `
display: flex;
align-items: center;
margin-bottom: 10px;
`;
const label = document.createElement('label');
label.textContent = category.charAt(0).toUpperCase() + category.slice(1);
label.style.marginRight = '10px';
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = GM_getValue(`${category}_color`, getDefaultColors(theme)[category]);
colorPicker.addEventListener('input', () => {
GM_setValue(`${category}_color`, colorPicker.value);
applyCustomColors();
});
colorWrapper.appendChild(label);
colorWrapper.appendChild(colorPicker);
container.appendChild(colorWrapper);
});
}
// Render typography tab
function renderTypographyTab(container) {
// Typography container
const typographyContainer = document.createElement('div');
typographyContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 15px;
`;
// Font selector
const fontSelectContainer = document.createElement('div');
fontSelectContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 5px;
`;
const fontSelectLabel = document.createElement('label');
fontSelectLabel.textContent = 'Font Family:';
const fontSelect = document.createElement('select');
fontSelect.style.width = '100%';
// Common fonts including Comic Sans MS
const fonts = [
'Comic Sans MS', 'Inter', 'Arial', 'Helvetica', 'Verdana', 'Tahoma',
'Times New Roman', 'Georgia', 'Garamond',
'Courier New', 'Consolas', 'Monaco',
'Roboto', 'Open Sans', 'Lato', 'Montserrat'
];
// Add default option
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Default';
fontSelect.appendChild(defaultOption);
// Add font options
fonts.forEach(font => {
const option = document.createElement('option');
option.value = font;
option.textContent = font;
option.style.fontFamily = font;
fontSelect.appendChild(option);
});
// Set selected value from saved preference
fontSelect.value = GM_getValue('selected_font', '');
fontSelect.addEventListener('change', () => {
GM_setValue('selected_font', fontSelect.value);
applyTypographySettings();
});
fontSelectContainer.appendChild(fontSelectLabel);
fontSelectContainer.appendChild(fontSelect);
typographyContainer.appendChild(fontSelectContainer);
// Font Style
const fontStyleContainer = document.createElement('div');
fontStyleContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 10px;
`;
const fontStyleLabel = document.createElement('label');
fontStyleLabel.textContent = 'Font Style:';
const fontStyleOptions = document.createElement('div');
fontStyleOptions.style.cssText = `
display: flex;
gap: 10px;
`;
// Bold checkbox
const boldContainer = document.createElement('div');
const boldCheckbox = document.createElement('input');
boldCheckbox.type = 'checkbox';
boldCheckbox.id = 'font-bold';
boldCheckbox.checked = GM_getValue('fontBold', false);
const boldLabel = document.createElement('label');
boldLabel.textContent = 'Bold';
boldLabel.htmlFor = 'font-bold';
boldCheckbox.addEventListener('change', () => {
GM_setValue('fontBold', boldCheckbox.checked);
applyTypographySettings();
});
boldContainer.appendChild(boldCheckbox);
boldContainer.appendChild(boldLabel);
// Italic checkbox
const italicContainer = document.createElement('div');
const italicCheckbox = document.createElement('input');
italicCheckbox.type = 'checkbox';
italicCheckbox.id = 'font-italic';
italicCheckbox.checked = GM_getValue('fontItalic', false);
const italicLabel = document.createElement('label');
italicLabel.textContent = 'Italic';
italicLabel.htmlFor = 'font-italic';
italicCheckbox.addEventListener('change', () => {
GM_setValue('fontItalic', italicCheckbox.checked);
applyTypographySettings();
});
italicContainer.appendChild(italicCheckbox);
italicContainer.appendChild(italicLabel);
fontStyleOptions.appendChild(boldContainer);
fontStyleOptions.appendChild(italicContainer);
fontStyleContainer.appendChild(fontStyleLabel);
fontStyleContainer.appendChild(fontStyleOptions);
typographyContainer.appendChild(fontStyleContainer);
// Font Size Slider
const fontSizeContainer = document.createElement('div');
fontSizeContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 5px;
`;
const fontSizeLabel = document.createElement('label');
fontSizeLabel.textContent = 'Font Size: ' + GM_getValue('fontSize', 16) + 'px';
const fontSizeSlider = document.createElement('input');
fontSizeSlider.type = 'range';
fontSizeSlider.min = 10;
fontSizeSlider.max = 30;
fontSizeSlider.value = GM_getValue('fontSize', 16);
fontSizeSlider.style.width = '100%';
fontSizeSlider.addEventListener('input', () => {
const newSize = fontSizeSlider.value;
fontSizeLabel.textContent = 'Font Size: ' + newSize + 'px';
GM_setValue('fontSize', newSize);
applyTypographySettings();
});
fontSizeContainer.appendChild(fontSizeLabel);
fontSizeContainer.appendChild(fontSizeSlider);
typographyContainer.appendChild(fontSizeContainer);
container.appendChild(typographyContainer);
}
// Render layout tab
function renderLayoutTab(container) {
const layoutContainer = document.createElement('div');
layoutContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 15px;
`;
// Avatar size control
const avatarSizeContainer = document.createElement('div');
avatarSizeContainer.style.cssText = `
display: flex;
align-items: center;
gap: 10px;
`;
const sizeLabel = document.createElement('label');
sizeLabel.textContent = 'Avatar Image Size (px):';
const sizeInput = document.createElement('input');
sizeInput.type = 'number';
sizeInput.value = GM_getValue('image_size', '24');
sizeInput.min = '16';
sizeInput.max = '64';
sizeInput.style.width = '60px';
sizeInput.addEventListener('change', () => {
GM_setValue('image_size', sizeInput.value);
applyLayoutSettings();
});
avatarSizeContainer.appendChild(sizeLabel);
avatarSizeContainer.appendChild(sizeInput);
layoutContainer.appendChild(avatarSizeContainer);
// Chat bubble spacing control
const spacingContainer = document.createElement('div');
spacingContainer.style.cssText = `
display: flex;
align-items: center;
gap: 10px;
`;
const spacingLabel = document.createElement('label');
spacingLabel.textContent = 'Message Spacing (px):';
const spacingInput = document.createElement('input');
spacingInput.type = 'number';
spacingInput.value = GM_getValue('message_spacing', '10');
spacingInput.min = '0';
spacingInput.max = '30';
spacingInput.style.width = '60px';
spacingInput.addEventListener('change', () => {
GM_setValue('message_spacing', spacingInput.value);
applyLayoutSettings();
});
spacingContainer.appendChild(spacingLabel);
spacingContainer.appendChild(spacingInput);
layoutContainer.appendChild(spacingContainer);
container.appendChild(layoutContainer);
}
// Apply color customizations dynamically
function applyCustomColors() {
const theme = getCurrentTheme();
const defaultColors = getDefaultColors(theme);
const categories = ['italic', 'quotationmarks', 'plaintext', 'custom', 'charbubble', 'userbubble', 'guide', 'input', 'body', 'accent'];
// Remove any existing style element
const existingStyle = document.getElementById('cai-custom-colors');
if (existingStyle) {
existingStyle.remove();
}
const styleElement = document.createElement('style');
styleElement.id = 'cai-custom-colors';
let css = '';
categories.forEach(category => {
const color = GM_getValue(`${category}_color`, defaultColors[category]);
switch(category) {
case 'italic':
css += `em { color: ${color} !important; } `;
break;
case 'quotationmarks':
css += `blockquote { color: ${color} !important; } `;
break;
case 'plaintext':
css += `p[node='[object Object]'] { color: ${color} !important; } `;
break;
case 'charbubble':
css += `.mt-1.bg-surface-elevation-2 { background-color: ${color} !important; } `;
break;
case 'userbubble':
css += `.mt-1.bg-surface-elevation-3 { background-color: ${color} !important; } `;
break;
case 'guide':
css += `.overflow-y-auto { background-color: ${color} !important; } `;
break;
case 'input':
css += `.w-full.border-none.bg-surface-elevation-1 { background-color: ${color} !important; } `;
break;
case 'body':
css += `body { background-color: ${color} !important; } `;
break;
case 'accent':
css += `.text-primary-600 { color: ${color} !important; } `;
break;
case 'custom':
css += `code, pre { color: ${color} !important; } `;
break;
}
});
styleElement.textContent = css;
document.head.appendChild(styleElement);
}
// Apply typography settings
function applyTypographySettings() {
// Remove any existing style element
const existingStyle = document.getElementById('cai-custom-typography');
if (existingStyle) {
existingStyle.remove();
}
const font = GM_getValue('selected_font', '');
const fontSize = GM_getValue('fontSize', 16) + 'px';
const isBold = GM_getValue('fontBold', false);
const isItalic = GM_getValue('fontItalic', false);
const fontWeight = isBold ? 'bold' : 'normal';
const fontStyle = isItalic ? 'italic' : 'normal';
const styleElement = document.createElement('style');
styleElement.id = 'cai-custom-typography';
// Make sure we properly handle Comic Sans MS and other fonts with spaces
const fontFamily = font ? `'${font}', ` : '';
styleElement.textContent = `
p, textarea, button, div.text-sm, .markdown-content, .message-content,
div[class*="text-base"], div[class*="text-md"], div[class*="text-lg"],
span[class*="text-base"], span[class*="text-md"], span[class*="text-lg"] {
font-family: ${fontFamily}'Noto Sans', sans-serif !important;
font-size: ${fontSize} !important;
font-weight: ${fontWeight} !important;
font-style: ${fontStyle} !important;
}
`;
document.head.appendChild(styleElement);
}
// Apply layout settings
function applyLayoutSettings() {
// Remove any existing style element
const existingStyle = document.getElementById('cai-custom-layout');
if (existingStyle) {
existingStyle.remove();
}
const imageSize = GM_getValue('image_size', '24') + 'px';
const messageSpacing = GM_getValue('message_spacing', '10') + 'px';
const styleElement = document.createElement('style');
styleElement.id = 'cai-custom-layout';
styleElement.textContent = `
.mt-0.hidden.md\\:flex.flex-col.gap-3.items-center img {
width: ${imageSize} !important;
height: ${imageSize} !important;
}
.mt-1.flex.w-full {
margin-bottom: ${messageSpacing} !important;
}
`;
document.head.appendChild(styleElement);
}
// Apply all settings at once
function applySettings() {
applyCustomColors();
applyTypographySettings();
applyLayoutSettings();
}
// Create global customization button
function createCustomizationButton() {
// Check if button already exists
if (document.getElementById('cai-customizer-button')) {
return;
}
const button = document.createElement('button');
button.id = 'cai-customizer-button';
button.style.cssText = `
position: fixed;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background-image: url('https://i.imgur.com/yBgJ3za.png');
background-size: cover;
z-index: 9998;
border: none;
cursor: pointer;
border-radius: 4px;
`;
// Create menu only if it doesn't exist
let menu = document.getElementById('cai-color-customizer');
if (!menu) {
menu = createCustomizationMenu();
}
button.addEventListener('click', () => {
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});
document.body.appendChild(button);
}
// Global keyboard shortcut handler
function handleKeyboardShortcut(event) {
if (event.key === '`' && event.ctrlKey) {
event.preventDefault();
const menu = document.getElementById('cai-color-customizer');
if (menu) {
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
}
}
}
// Wait for page to load before initialization
function waitForPageLoad() {
// Load web fonts first
loadWebFonts();
// Check if we're on Character.AI or Discord
if (window.location.hostname.includes('character.ai')) {
// For Character.AI
if (document.readyState === 'complete' || document.readyState === 'interactive') {
initializeForCAI();
} else {
window.addEventListener('DOMContentLoaded', initializeForCAI);
}
} else if (window.location.hostname.includes('discord.com')) {
// For Discord
const checkInterval = setInterval(() => {
if (document.querySelector('#app-mount')) {
clearInterval(checkInterval);
initializeForDiscord();
}
}, 500);
}
}
// Initialize for Character.AI
function initializeForCAI() {
// Ensure the button is created
createCustomizationButton();
// Apply settings
applySettings();
// Add keyboard shortcut listener
document.addEventListener('keydown', handleKeyboardShortcut);
// Re-apply settings when theme changes
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class' &&
mutation.target === document.documentElement) {
applySettings();
}
});
});
observer.observe(document.documentElement, { attributes: true });
// Make sure button stays visible with periodic check
setInterval(() => {
if (!document.getElementById('cai-customizer-button')) {
createCustomizationButton();
}
}, 5000);
}
// Initialize for Discord
function initializeForDiscord() {
// Apply font settings if exists
const savedFont = GM_getValue('discordFont', GM_getValue('selected_font', ''));
const fontSize = GM_getValue('discordFontSize', GM_getValue('fontSize', 16));
const fontWeight = GM_getValue('discordFontWeight', GM_getValue('fontBold', false) ? 'bold' : 'normal');
const fontStyle = GM_getValue('fontItalic', false) ? 'italic' : 'normal';
const fontColor = GM_getValue('discordFontColor', '#ffffff');
// Create style for Discord font customization
const styleElement = document.createElement('style');
styleElement.id = 'discord-font-customizer';
styleElement.textContent = `
.markup-eYLPri, .contents-2MsGLg, [class*="messageContent-"], [class*="channelName-"] {
font-family: ${savedFont ? `'${savedFont}',` : ''} 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: ${fontSize}px !important;
font-weight: ${fontWeight} !important;
font-style: ${fontStyle} !important;
color: ${fontColor} !important;
}
`;
document.head.appendChild(styleElement);
// Create customization button for Discord
createCustomizationButton();
// Add keyboard shortcut listener for Discord
document.addEventListener('keydown', handleKeyboardShortcut);
// Make sure button stays visible with periodic check
setInterval(() => {
if (!document.getElementById('cai-customizer-button')) {
createCustomizationButton();
}
}, 5000);
}
// Start initialization
waitForPageLoad();
// Fallback initialization to ensure script runs
setTimeout(() => {
if (!document.getElementById('cai-customizer-button')) {
loadWebFonts();
createCustomizationButton();
applySettings();
document.addEventListener('keydown', handleKeyboardShortcut);
}
}, 3000);
})();
// ==========================================
// SHARED INITIALIZATION
// ==========================================
function initializeAll() {
// Call the initialization functions from both scripts if they exist
// For example:
// if (typeof initBackgroundChanger === 'function') {
// initBackgroundChanger();
// }
//
// if (typeof initColorCustomizer === 'function') {
// initColorCustomizer();
// }
}
// Run on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeAll);
} else {
initializeAll();
}
})();