☰

c.ai Background Image Customizer

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();
})();