☰

c.ai Background Image Customizer

Customize the chat interface with custom background images

  1. // ==UserScript==
  2. // @name        c.ai Background Image Customizer
  3. // @namespace   c.ai Background Image Customizer
  4. // @match       https://character.ai/*
  5. // @grant       none
  6. // @license     MIT
  7. // @version     1.0
  8. // @description Customize the chat interface with custom background images
  9. // @icon        https://i.imgur.com/ynjBqKW.png
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.   // Function to create a button
  14.   function createButton(symbol, onClick) {
  15.     const button = document.createElement('button');
  16.     button.innerHTML = symbol;
  17.     button.style.position = 'fixed';
  18.     button.style.top = '10px';
  19.     button.style.right = '10px';
  20.     button.style.width = '22px';
  21.     button.style.height = '22px';
  22.     button.style.backgroundColor = '#444';
  23.     button.style.color = 'white';
  24.     button.style.border = 'none';
  25.     button.style.borderRadius = '3px';
  26.     button.style.cursor = 'pointer';
  27.     button.style.fontFamily = 'Montserrat, sans-serif';
  28.     button.addEventListener('click', onClick);
  29.     return button;
  30.   }
  31.  
  32.   // Function to create the customization panel
  33.   function createCustomizationPanel() {
  34.     const panel = document.createElement('div');
  35.     panel.id = 'customizationPanel';
  36.     panel.style.position = 'fixed';
  37.     panel.style.top = '50%';
  38.     panel.style.left = '50%';
  39.     panel.style.transform = 'translate(-50%, -50%)';
  40.     panel.style.backgroundColor = '#1e1e1e';
  41.     panel.style.color = 'white';
  42.     panel.style.borderRadius = '5px';
  43.     panel.style.padding = '20px';
  44.     panel.style.zIndex = '9999';
  45.     panel.style.fontFamily = 'Montserrat, sans-serif';
  46.  
  47.     const label = document.createElement('label');
  48.     label.textContent = 'Background Image URL:';
  49.  
  50.     const input = document.createElement('input');
  51.     input.type = 'text';
  52.     input.placeholder = 'Enter image URL';
  53.     input.style.width = '100%';
  54.     input.style.marginBottom = '10px';
  55.     input.value = localStorage.getItem('background_image_url') || '';
  56.  
  57.     input.addEventListener('input', () => {
  58.       localStorage.setItem('background_image_url', input.value);
  59.       applyBackgroundImage();
  60.     });
  61.  
  62.     const okButton = document.createElement('button');
  63.     okButton.textContent = 'OK';
  64.     okButton.style.marginTop = '10px';
  65.     okButton.style.padding = '5px 10px';
  66.     okButton.style.border = 'none';
  67.     okButton.style.borderRadius = '3px';
  68.     okButton.style.backgroundColor = '#444';
  69.     okButton.style.color = 'white';
  70.     okButton.style.fontFamily = 'Montserrat, sans-serif';
  71.     okButton.addEventListener('click', () => {
  72.       panel.remove();
  73.     });
  74.  
  75.     panel.appendChild(label);
  76.     panel.appendChild(input);
  77.     panel.appendChild(okButton);
  78.     document.body.appendChild(panel);
  79.   }
  80.  
  81.   // Function to apply the background image
  82.   function applyBackgroundImage() {
  83.     const imageUrl = localStorage.getItem('background_image_url') || '';
  84.     const css = `
  85.       body {
  86.         background-image: url('${imageUrl}');
  87.         background-size: cover;
  88.         background-position: center;
  89.         background-repeat: no-repeat;
  90.       }
  91.     `;
  92.  
  93.     let styleElement = document.getElementById('customBackgroundStyle');
  94.     if (!styleElement) {
  95.       styleElement = document.createElement('style');
  96.       styleElement.id = 'customBackgroundStyle';
  97.       document.head.appendChild(styleElement);
  98.     }
  99.     styleElement.innerHTML = css;
  100.   }
  101.  
  102.   // Create and insert the main button
  103.   const mainButton = createButton('🖼️', () => {
  104.     const panelExists = document.getElementById('customizationPanel');
  105.     if (!panelExists) {
  106.       createCustomizationPanel();
  107.     }
  108.   });
  109.  
  110.   document.body.appendChild(mainButton);
  111.  
  112.   // Apply background image on load
  113.   applyBackgroundImage();
  114. })();