Customize the chat interface with custom background images
// ==UserScript==
// @name c.ai Background Image Customizer
// @namespace c.ai Background Image Customizer
// @match https://character.ai/*
// @grant none
// @license MIT
// @version 1.0
// @description Customize the chat interface with custom background images
// @icon https://i.imgur.com/ynjBqKW.png
// ==/UserScript==
(function () {
// Function to create a button
function createButton(symbol, onClick) {
const button = document.createElement('button');
button.innerHTML = symbol;
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.width = '22px';
button.style.height = '22px';
button.style.backgroundColor = '#444';
button.style.color = 'white';
button.style.border = 'none';
button.style.borderRadius = '3px';
button.style.cursor = 'pointer';
button.style.fontFamily = 'Montserrat, sans-serif';
button.addEventListener('click', onClick);
return button;
}
// Function to create the customization panel
function createCustomizationPanel() {
const panel = document.createElement('div');
panel.id = 'customizationPanel';
panel.style.position = 'fixed';
panel.style.top = '50%';
panel.style.left = '50%';
panel.style.transform = 'translate(-50%, -50%)';
panel.style.backgroundColor = '#1e1e1e';
panel.style.color = 'white';
panel.style.borderRadius = '5px';
panel.style.padding = '20px';
panel.style.zIndex = '9999';
panel.style.fontFamily = 'Montserrat, sans-serif';
const label = document.createElement('label');
label.textContent = 'Background Image URL:';
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Enter image URL';
input.style.width = '100%';
input.style.marginBottom = '10px';
input.value = localStorage.getItem('background_image_url') || '';
input.addEventListener('input', () => {
localStorage.setItem('background_image_url', input.value);
applyBackgroundImage();
});
const okButton = document.createElement('button');
okButton.textContent = 'OK';
okButton.style.marginTop = '10px';
okButton.style.padding = '5px 10px';
okButton.style.border = 'none';
okButton.style.borderRadius = '3px';
okButton.style.backgroundColor = '#444';
okButton.style.color = 'white';
okButton.style.fontFamily = 'Montserrat, sans-serif';
okButton.addEventListener('click', () => {
panel.remove();
});
panel.appendChild(label);
panel.appendChild(input);
panel.appendChild(okButton);
document.body.appendChild(panel);
}
// Function to apply the background image
function applyBackgroundImage() {
const imageUrl = localStorage.getItem('background_image_url') || '';
const css = `
body {
background-image: url('${imageUrl}');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
`;
let styleElement = document.getElementById('customBackgroundStyle');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.id = 'customBackgroundStyle';
document.head.appendChild(styleElement);
}
styleElement.innerHTML = css;
}
// Create and insert the main button
const mainButton = createButton('🖼️', () => {
const panelExists = document.getElementById('customizationPanel');
if (!panelExists) {
createCustomizationPanel();
}
});
document.body.appendChild(mainButton);
// Apply background image on load
applyBackgroundImage();
})();