☰

Background Changer with Dropdown Menu

Change website background to a specified image or GIF via a dropdown menu with options to change or remove the background (preserved on refresh)

  1. // ==UserScript==
  2. // @name         Background Changer with Dropdown Menu
  3. // @namespace    https://jadalwazzan.github.io/
  4. // @version      1.0
  5. // @description  Change website background to a specified image or GIF via a dropdown menu with options to change or remove the background (preserved on refresh)
  6. // @author       Nurv[669537]
  7. // @icon         https://www.google.com/s2/favicons?sz=64&domain=torn.com
  8. // @match        https://www.torn.com/*
  9. // @grant        none
  10. // @license      Jcodes
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Function to prompt for image URL input
  17.     function promptForImageURL() {
  18.         const imageUrl = prompt('Enter the URL of the image or GIF you want to use as the background:');
  19.         if (imageUrl !== null) {
  20.             if (imageUrl === '') {
  21.                 removeBackgroundImage();
  22.             } else {
  23.                 saveImageURL(imageUrl);
  24.                 applyBackgroundImage(imageUrl);
  25.             }
  26.         }
  27.     }
  28.  
  29.     // Function to save image URL to localStorage
  30.     function saveImageURL(imageUrl) {
  31.         localStorage.setItem('customBackgroundImage', imageUrl);
  32.     }
  33.  
  34.     // Function to apply the background image using jQuery
  35.     function applyBackgroundImage(imageUrl) {
  36.         jQuery('body').css({
  37.             'background-image': `url('${imageUrl}')`,
  38.             'background-size': 'cover',
  39.             'background-repeat': 'no-repeat',
  40.             'background-attachment': 'fixed'
  41.         });
  42.     }
  43.  
  44.     // Function to remove the background image
  45.     function removeBackgroundImage() {
  46.         localStorage.removeItem('customBackgroundImage');
  47.         jQuery('body').css('background-image', 'none');
  48.     }
  49.  
  50.     // Function to create the dropdown menu
  51.     function createDropdown() {
  52.         // Create the dropdown menu
  53.         const selectMenu = document.createElement('select');
  54.         selectMenu.addEventListener('change', function() {
  55.             const selectedOption = this.value;
  56.             if (selectedOption === 'change') {
  57.                 promptForImageURL();
  58.             } else if (selectedOption === 'remove') {
  59.                 removeBackgroundImage();
  60.             }
  61.         });
  62.  
  63.         // Apply styles to the dropdown menu
  64.         selectMenu.style.width = '100%';
  65.         selectMenu.style.backgroundColor = '#333333';
  66.         selectMenu.style.color = '#FFFFFF';
  67.         selectMenu.style.fontSize = '12px';
  68.         selectMenu.style.padding = '6px';
  69.         selectMenu.style.border = '1px solid #ccc';
  70.         selectMenu.style.borderRadius = '4px';
  71.  
  72.         // Create options for changing and removing background
  73.         const defaultOption = document.createElement('option');
  74.         defaultOption.textContent = 'Background-Img';
  75.         defaultOption.value = 'default';
  76.         selectMenu.appendChild(defaultOption);
  77.  
  78.         const changeOption = document.createElement('option');
  79.         changeOption.textContent = 'Change BG';
  80.         changeOption.value = 'change';
  81.         selectMenu.appendChild(changeOption);
  82.  
  83.         const removeOption = document.createElement('option');
  84.         removeOption.textContent = 'Remove BG';
  85.         removeOption.value = 'remove';
  86.         selectMenu.appendChild(removeOption);
  87.  
  88.         return selectMenu;
  89.     }
  90.  
  91.     // Find the target element to append the dropdown menu
  92.     const sidebarBlock = document.querySelector('.sidebar-block___Ef1l1');
  93.  
  94.     if (sidebarBlock) {
  95.         const selectMenu = createDropdown();
  96.  
  97.         // Append the dropdown menu to the target element
  98.         const contentElement = sidebarBlock.querySelector('.content___wSUdj');
  99.         if (contentElement) {
  100.             contentElement.appendChild(selectMenu);
  101.         }
  102.  
  103.         // Retrieve and apply the stored background image on page load
  104.         const storedImageUrl = localStorage.getItem('customBackgroundImage');
  105.  
  106.         if (storedImageUrl) {
  107.             applyBackgroundImage(storedImageUrl);
  108.         }
  109.     } else {
  110.         console.log('Sidebar block element not found.');
  111.     }
  112. })();