☰

Custom Background Changer

Change the background of a website and replace it with your own custom image!

  1. // ==UserScript==
  2. // @name         Custom Background Changer
  3. // @version      1.0
  4. // @description  Change the background of a website and replace it with your own custom image!
  5. // @namespace    https://discord.gg/Mw2XjW99K7
  6. // @author       P3ngwen
  7. // @match        *://*/*
  8. // @grant        GM_setValue
  9. // @grant        GM_getValue
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Create GUI container
  17.     let gui = document.createElement("div");
  18.     gui.style.position = "fixed";
  19.     gui.style.top = "50px";
  20.     gui.style.right = "20px";
  21.     gui.style.width = "220px";
  22.     gui.style.padding = "10px";
  23.     gui.style.background = "rgba(0, 0, 0, 0.8)";
  24.     gui.style.color = "#fff";
  25.     gui.style.border = "1px solid #ccc";
  26.     gui.style.borderRadius = "8px";
  27.     gui.style.zIndex = "10000";
  28.     gui.style.userSelect = "none";
  29.     gui.style.cursor = "grab";
  30.     gui.style.boxShadow = "0 4px 6px rgba(0,0,0,0.3)";
  31.     document.body.appendChild(gui);
  32.  
  33.     // Create title bar for dragging and buttons
  34.     let titleBar = document.createElement("div");
  35.     titleBar.style.background = "#444";
  36.     titleBar.style.padding = "8px";
  37.     titleBar.style.display = "flex";
  38.     titleBar.style.justifyContent = "space-between";
  39.     titleBar.style.alignItems = "center";
  40.     titleBar.style.fontWeight = "bold";
  41.     titleBar.style.cursor = "grab";
  42.     gui.appendChild(titleBar);
  43.  
  44.     let titleText = document.createElement("span");
  45.     titleText.innerText = "Background Changer";
  46.     titleBar.appendChild(titleText);
  47.  
  48.     // Create minimize button
  49.     let minimizeButton = document.createElement("button");
  50.     minimizeButton.innerText = "-";
  51.     minimizeButton.style.marginLeft = "5px";
  52.     minimizeButton.style.padding = "3px 6px";
  53.     minimizeButton.style.background = "#777";
  54.     minimizeButton.style.color = "white";
  55.     minimizeButton.style.border = "none";
  56.     minimizeButton.style.cursor = "pointer";
  57.     minimizeButton.style.borderRadius = "4px";
  58.     titleBar.appendChild(minimizeButton);
  59.  
  60.     // Create close button
  61.     let closeButton = document.createElement("button");
  62.     closeButton.innerText = "X";
  63.     closeButton.style.marginLeft = "5px";
  64.     closeButton.style.padding = "3px 6px";
  65.     closeButton.style.background = "red";
  66.     closeButton.style.color = "white";
  67.     closeButton.style.border = "none";
  68.     closeButton.style.cursor = "pointer";
  69.     closeButton.style.borderRadius = "4px";
  70.     titleBar.appendChild(closeButton);
  71.  
  72.     // Create content container
  73.     let content = document.createElement("div");
  74.     gui.appendChild(content);
  75.  
  76.     // Create upload button
  77.     let uploadLabel = document.createElement("label");
  78.     uploadLabel.innerText = "Upload Image";
  79.     uploadLabel.style.display = "block";
  80.     uploadLabel.style.textAlign = "center";
  81.     uploadLabel.style.background = "#008CBA";
  82.     uploadLabel.style.padding = "6px";
  83.     uploadLabel.style.marginTop = "10px";
  84.     uploadLabel.style.cursor = "pointer";
  85.     uploadLabel.style.borderRadius = "4px";
  86.     content.appendChild(uploadLabel);
  87.  
  88.     // Create file input (hidden)
  89.     let fileInput = document.createElement("input");
  90.     fileInput.type = "file";
  91.     fileInput.accept = "image/*";
  92.     fileInput.style.display = "none";
  93.     uploadLabel.appendChild(fileInput);
  94.  
  95.     // Create remove button
  96.     let removeButton = document.createElement("button");
  97.     removeButton.innerText = "Remove Background";
  98.     removeButton.style.display = "block";
  99.     removeButton.style.width = "100%";
  100.     removeButton.style.marginTop = "10px";
  101.     removeButton.style.padding = "6px";
  102.     removeButton.style.background = "#ff4444";
  103.     removeButton.style.color = "#fff";
  104.     removeButton.style.border = "none";
  105.     removeButton.style.cursor = "pointer";
  106.     removeButton.style.borderRadius = "4px";
  107.     content.appendChild(removeButton);
  108.  
  109.     // Handle file upload
  110.     fileInput.addEventListener("change", (event) => {
  111.         let file = event.target.files[0];
  112.         if (file) {
  113.             let reader = new FileReader();
  114.             reader.onload = function(e) {
  115.                 let imageUrl = e.target.result;
  116.                 GM_setValue("customBackground", imageUrl);
  117.                 applyBackground(imageUrl);
  118.             };
  119.             reader.readAsDataURL(file);
  120.         }
  121.     });
  122.  
  123.     // Remove background
  124.     removeButton.addEventListener("click", () => {
  125.         GM_setValue("customBackground", "");
  126.         document.body.style.backgroundImage = "none";
  127.     });
  128.  
  129.     // Function to apply background
  130.     function applyBackground(imageUrl) {
  131.         document.body.style.backgroundImage = `url('${imageUrl}')`;
  132.         document.body.style.backgroundSize = "cover";
  133.         document.body.style.backgroundPosition = "center";
  134.         document.body.style.backgroundAttachment = "fixed";
  135.     }
  136.  
  137.     // Load saved background
  138.     let savedImage = GM_getValue("customBackground", null);
  139.     if (savedImage) {
  140.         applyBackground(savedImage);
  141.     }
  142.  
  143.     // Drag functionality
  144.     let isDragging = false, offsetX, offsetY;
  145.     titleBar.addEventListener("mousedown", (e) => {
  146.         isDragging = true;
  147.         offsetX = e.clientX - gui.getBoundingClientRect().left;
  148.         offsetY = e.clientY - gui.getBoundingClientRect().top;
  149.         gui.style.cursor = "grabbing";
  150.     });
  151.  
  152.     document.addEventListener("mousemove", (e) => {
  153.         if (isDragging) {
  154.             gui.style.left = (e.clientX - offsetX) + "px";
  155.             gui.style.top = (e.clientY - offsetY) + "px";
  156.         }
  157.     });
  158.  
  159.     document.addEventListener("mouseup", () => {
  160.         isDragging = false;
  161.         gui.style.cursor = "grab";
  162.     });
  163.  
  164.     // Minimize functionality
  165.     minimizeButton.addEventListener("click", () => {
  166.         if (content.style.display === "none") {
  167.             content.style.display = "block";
  168.             minimizeButton.innerText = "-";
  169.         } else {
  170.             content.style.display = "none";
  171.             minimizeButton.innerText = "+";
  172.         }
  173.     });
  174.  
  175.     // Close GUI event
  176.     closeButton.addEventListener("click", () => gui.style.display = "none");
  177.  
  178. })();