Agar.io Custom Skin with Border Color (Corrected Layout)

Allows uploading a custom skin and choosing border color in Agar.io with correct layout

  1. // ==UserScript==
  2. // @name Agar.io Custom Skin with Border Color (Corrected Layout)
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.3
  5. // @description Allows uploading a custom skin and choosing border color in Agar.io with correct layout
  6. // @author You
  7. // @match https://agar.io/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // Wait for the page to fully load
  15. window.addEventListener('load', function() {
  16. // Wait until the game's skin settings appear in the UI
  17. const interval = setInterval(() => {
  18. const controls = document.querySelector('.control-panel');
  19. if (controls) {
  20. clearInterval(interval);
  21.  
  22. // Create an input for uploading the image
  23. const uploadButton = document.createElement('input');
  24. uploadButton.type = 'file';
  25. uploadButton.accept = 'image/*';
  26. uploadButton.id = 'uploadImageButton';
  27. uploadButton.style.marginLeft = '10px';
  28. uploadButton.style.marginRight = '10px';
  29.  
  30. // Create a select dropdown for choosing the border color
  31. const colorSelector = document.createElement('select');
  32. colorSelector.innerHTML = `
  33. <option value="1">White Border</option>
  34. <option value="2">Black Border</option>
  35. <option value="3">Red Border</option>
  36. `;
  37.  
  38. // Create a div to contain the upload button and color selector
  39. const skinControlDiv = document.createElement('div');
  40. skinControlDiv.style.display = 'flex';
  41. skinControlDiv.style.alignItems = 'center';
  42. skinControlDiv.appendChild(uploadButton);
  43. skinControlDiv.appendChild(colorSelector);
  44.  
  45. // Insert the skin control div into the control panel
  46. controls.appendChild(skinControlDiv);
  47.  
  48. // Function to handle the image upload and convert it to dataURL
  49. uploadButton.addEventListener('change', function(e) {
  50. const file = e.target.files[0];
  51. if (file) {
  52. const reader = new FileReader();
  53. reader.onload = function(event) {
  54. const imageDataURL = event.target.result;
  55.  
  56. // Set the skin with the uploaded image
  57. const skin = document.getElementById('skin');
  58. if (skin) {
  59. skin.src = imageDataURL;
  60. }
  61. };
  62. reader.readAsDataURL(file);
  63. }
  64. });
  65.  
  66. // Function to handle applying the border color in the game
  67. colorSelector.addEventListener('change', function(e) {
  68. const selectedColor = e.target.value;
  69. let borderColor = '';
  70.  
  71. // Map the selected color to the corresponding color code
  72. switch (selectedColor) {
  73. case '1':
  74. borderColor = 'white';
  75. break;
  76. case '2':
  77. borderColor = 'black';
  78. break;
  79. case '3':
  80. borderColor = 'red';
  81. break;
  82. default:
  83. borderColor = 'white';
  84. }
  85.  
  86. // Apply the border color to the skin (this is handled by Agar.io in the game)
  87. if (window.player) {
  88. window.player.setSkinBorderColor(borderColor);
  89. }
  90. });
  91. }
  92. }, 100); // Check every 100ms for the control panel
  93. });
  94. })();

QingJ © 2025

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