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

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址