☰

KoGaMa Avatar Change with Custom Image (Persistent)

Change KoGaMa avatar with a custom image from file input (supports SVG structure and persists across refreshes)

  1. // ==UserScript== K O K U S H I B O
  2. // @name         KoGaMa Avatar Change with Custom Image (Persistent)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Change KoGaMa avatar with a custom image from file input (supports SVG structure and persists across refreshes)
  6. // @author       K O K U S H I B O
  7. // @match        https://www.kogama.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Function to create the avatar change panel
  15.     function createAvatarChangePanel() {
  16.         // Check if the panel already exists
  17.         if (document.getElementById('avatarChangePanel')) return;
  18.  
  19.         // Create the panel element
  20.         const panel = document.createElement('div');
  21.         panel.id = 'avatarChangePanel';
  22.         panel.style.position = 'fixed';
  23.         panel.style.top = '20px';
  24.         panel.style.right = '20px';
  25.         panel.style.backgroundColor = '#ffffff';
  26.         panel.style.border = '1px solid #ccc';
  27.         panel.style.padding = '20px';
  28.         panel.style.boxShadow = '0 4px 6px rgba(0,0,0,0.2)';
  29.         panel.style.zIndex = '9999';
  30.         panel.style.fontFamily = 'Arial, sans-serif';
  31.         panel.style.width = '250px';
  32.         panel.style.borderRadius = '5px';
  33.  
  34.         // Title of the panel
  35.         const title = document.createElement('h3');
  36.         title.innerText = 'Change Avatar';
  37.         title.style.marginBottom = '10px';
  38.         panel.appendChild(title);
  39.  
  40.         // Add the file input element inside the panel
  41.         const input = document.createElement('input');
  42.         input.type = 'file';
  43.         input.accept = 'image/*'; // Only accept images
  44.         input.id = 'avatarUploadInput';
  45.         input.style.marginBottom = '10px';
  46.         input.style.display = 'block';
  47.  
  48.         // Add a label for the input
  49.         const label = document.createElement('label');
  50.         label.innerText = 'Upload Custom Avatar';
  51.         label.style.color = '#007bff';
  52.         label.style.textDecoration = 'underline';
  53.         label.style.cursor = 'pointer';
  54.         label.setAttribute('for', 'avatarUploadInput');
  55.  
  56.         // Append input and label to the panel
  57.         panel.appendChild(label);
  58.         panel.appendChild(input);
  59.         document.body.appendChild(panel);
  60.  
  61.         // Add an event listener for file input change
  62.         input.addEventListener('change', function(event) {
  63.             const file = event.target.files[0];
  64.             if (file) {
  65.                 const reader = new FileReader();
  66.  
  67.                 reader.onload = function(e) {
  68.                     // Find the SVG element and locate the <image> element within it
  69.                     const avatarSvg = document.querySelector('div._2bUqU svg');
  70.                     const avatarImage = avatarSvg ? avatarSvg.querySelector('image._3tYRU') : null;
  71.  
  72.                     console.log("Avatar element found:", avatarImage);
  73.  
  74.                     if (avatarImage) {
  75.                         // Change the avatar image source to the selected file
  76.                         avatarImage.setAttribute('xlink:href', e.target.result);
  77.                         console.log("Avatar updated with new image source:", e.target.result);
  78.  
  79.                         // Save the new avatar image in localStorage
  80.                         localStorage.setItem('kogama_avatar', e.target.result);
  81.  
  82.                         alert("Avatar updated successfully!");
  83.                     } else {
  84.                         console.log("Avatar image not found! Please check the page structure.");
  85.                         alert("Avatar element not found! Please check the page structure.");
  86.                     }
  87.                 };
  88.  
  89.                 reader.onerror = function() {
  90.                     alert("Failed to read the file. Please try again.");
  91.                 };
  92.  
  93.                 reader.readAsDataURL(file); // Read the file as a data URL
  94.             }
  95.         });
  96.     }
  97.  
  98.     // Function to restore the avatar image from localStorage
  99.     function restoreAvatar() {
  100.         const storedAvatar = localStorage.getItem('kogama_avatar');
  101.         if (storedAvatar) {
  102.             const avatarSvg = document.querySelector('div._2bUqU svg');
  103.             const avatarImage = avatarSvg ? avatarSvg.querySelector('image._3tYRU') : null;
  104.  
  105.             if (avatarImage) {
  106.                 avatarImage.setAttribute('xlink:href', storedAvatar);
  107.                 console.log("Restored avatar from localStorage:", storedAvatar);
  108.             }
  109.         }
  110.     }
  111.  
  112.     // Wait for the page to fully load and display the panel
  113.     window.addEventListener('load', function() {
  114.         createAvatarChangePanel();
  115.         restoreAvatar(); // Restore the avatar from localStorage if it exists
  116.     });
  117. })();