Custom Profile Background 2

Style the profile section on PixelPlace with a toggleable background tiling option

  1. // ==UserScript==
  2. // @name Custom Profile Background 2
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.1
  5. // @description Style the profile section on PixelPlace with a toggleable background tiling option
  6. // @author Ghost
  7. // @match https://pixelplace.io/*
  8. // @grant GM_addStyle
  9. // @grant GM_setValue
  10. // @grant GM_getValue
  11. // ==/UserScript==
  12.  
  13. // Retrieve stored values
  14. const lastBackgroundImage = GM_getValue('lastBackgroundImage', '');
  15. let isTiled = GM_getValue('isTiled', false);
  16.  
  17. // Add an event listener to handle Ctrl+M key press for image upload
  18. document.addEventListener('keydown', function(event) {
  19. if (event.ctrlKey && event.key === 'm') {
  20. const input = document.createElement('input');
  21. input.type = 'file';
  22. input.accept = 'image/*';
  23. input.addEventListener('change', function() {
  24. const file = input.files[0];
  25. if (file) {
  26. const reader = new FileReader();
  27. reader.onload = function() {
  28. const imageUrl = reader.result;
  29. GM_setValue('lastBackgroundImage', imageUrl);
  30. applyBackgroundImage(imageUrl, isTiled);
  31. };
  32. reader.readAsDataURL(file);
  33. }
  34. });
  35. input.click();
  36. }
  37. });
  38.  
  39. // Add an event listener to toggle tiling with Ctrl+1
  40. document.addEventListener('keydown', function(event) {
  41. if (event.ctrlKey && event.key === 'i') {
  42. isTiled = !isTiled;
  43. GM_setValue('isTiled', isTiled);
  44. applyBackgroundImage(GM_getValue('lastBackgroundImage', ''), isTiled);
  45. }
  46. });
  47.  
  48. // Function to apply the background image
  49. function applyBackgroundImage(imageUrl, tile) {
  50. GM_addStyle(`
  51. .box-x {
  52. background-image: url('${imageUrl}');
  53. background-size: ${tile ? '100px auto' : 'cover'};
  54. background-position: ${tile ? 'top left' : 'center'};
  55. background-repeat: ${tile ? 'repeat' : 'no-repeat'};
  56. background-origin: border-box;
  57. background-clip: content-box;
  58. }
  59. }
  60. `);
  61. }
  62.  
  63. // Apply the last set background image and tiling mode on page load
  64. if (lastBackgroundImage) {
  65. applyBackgroundImage(GM_getValue('lastBackgroundImage', ''), isTiled);
  66. }

QingJ © 2025

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