☰

Mobile Character.AI Full-Screen Toggle

Adds a full-screen toggle button with an icon to the Character.AI website for Firefox mobile users, with further adjusted position and size.

  1. // ==UserScript==
  2. // @name         Mobile Character.AI Full-Screen Toggle
  3. // @namespace    https://github.com/LuxTallis
  4. // @version      1.0.4
  5. // @description  Adds a full-screen toggle button with an icon to the Character.AI website for Firefox mobile users, with further adjusted position and size.
  6. // @author       LuxTallis
  7. // @license      MIT
  8. // @match        https://character.ai/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     // Create the button
  16.     const fullScreenButton = document.createElement('button');
  17.     fullScreenButton.innerHTML = '⛶'; // Full-screen icon
  18.     fullScreenButton.id = 'fullScreenToggle';
  19.     fullScreenButton.style.position = 'fixed';
  20.     fullScreenButton.style.bottom = '30px'; // Raised 20px higher
  21.     fullScreenButton.style.right = '30px'; // Moved farther to the right
  22.     fullScreenButton.style.zIndex = '9999';
  23.     fullScreenButton.style.padding = '10px 20px'; // Slightly wider
  24.     fullScreenButton.style.fontSize = '20px';
  25.     fullScreenButton.style.border = 'none';
  26.     fullScreenButton.style.borderRadius = '5px';
  27.     fullScreenButton.style.backgroundColor = '#343a40'; // Dark gray color
  28.     fullScreenButton.style.color = '#FFF';
  29.     fullScreenButton.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
  30.     fullScreenButton.style.cursor = 'pointer';
  31.  
  32.     // Append button to the body
  33.     document.body.appendChild(fullScreenButton);
  34.  
  35.     // Toggle full-screen mode
  36.     fullScreenButton.addEventListener('click', () => {
  37.         if (!document.fullscreenElement) {
  38.             document.documentElement.requestFullscreen().catch(err => {
  39.                 console.error(`Error attempting to enable full-screen mode: ${err.message}`);
  40.             });
  41.         } else {
  42.             document.exitFullscreen().catch(err => {
  43.                 console.error(`Error attempting to exit full-screen mode: ${err.message}`);
  44.             });
  45.         }
  46.     });
  47. })();