☰

Webtoon.xyz+

Auto login for Webtoon.xyz with userscript settings

  1. // ==UserScript==
  2. // @name         Webtoon.xyz+
  3. // @namespace    github.com/longkidkoolstar
  4. // @version      0.1
  5. // @description  Auto login for Webtoon.xyz with userscript settings
  6. // @author       longkidkoolstar
  7. // @homepage     github.com/longkidkoolstar
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=webtoon.xyz
  9. // @license      MIT
  10. // @match        https://www.webtoon.xyz/*
  11. // @grant        GM.getValue
  12. // @grant        GM.setValue
  13. // ==/UserScript==
  14.  
  15. (async function() {
  16.     console.log("User-Script Started");
  17.  
  18.     // Check if on the user settings page
  19.     if (window.location.href.startsWith("https://www.webtoon.xyz/user-settings/")) {
  20.         const navTabsWrap = document.querySelector(".nav-tabs-wrap ul.nav-tabs");
  21.         const contentArea = document.querySelector("#post-7 > div.entry-content > div > div > div.col-md-9.col-sm-9");
  22.  
  23.         if (navTabsWrap && contentArea) {
  24.             // Create Userscript Settings tab
  25.             const settingsTab = document.createElement("li");
  26.             settingsTab.innerHTML = `
  27.                 <a href="#" id="userscript-settings-tab"><i class="icon ion-md-settings"></i>Userscript Settings</a>
  28.             `;
  29.             navTabsWrap.appendChild(settingsTab);
  30.  
  31.     // Create Userscript Settings content section
  32.     const settingsContent = document.createElement("div");
  33.     settingsContent.id = "userscript-settings-content";
  34.     settingsContent.innerHTML = `
  35.         <h2 style="font-size: 24px; color: #333;">Webtoon.xyz+ Settings</h2>
  36.         <div style="background: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); max-width: 400px; margin: 20px auto;">
  37.             <label style="font-size: 16px; color: #333; margin-bottom: 8px; display: block;">
  38.                 <input type="checkbox" id="enable-auto-login" style="margin-right: 10px;">
  39.                 Enable Auto Login
  40.             </label><br><br>
  41.  
  42.             <label for="username-input" style="font-size: 14px; color: #555;">Username or Email:</label>
  43.             <input type="text" id="username-input" placeholder="Enter Username or Email" style="width: 100%; padding: 10px; margin: 5px 0; border-radius: 6px; border: 1px solid #ccc; font-size: 14px;"><br><br>
  44.             
  45.             <label for="password-input" style="font-size: 14px; color: #555;">Password:</label>
  46.             <input type="password" id="password-input" placeholder="Enter Password" style="width: 100%; padding: 10px; margin: 5px 0; border-radius: 6px; border: 1px solid #ccc; font-size: 14px;"><br><br>
  47.             
  48.             <button id="save-credentials" style="background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; width: 100%; transition: all 0.3s ease;">
  49.                 Save Credentials
  50.             </button>
  51.         </div>
  52.     `;
  53.     settingsContent.style.display = "none";
  54.  
  55.     // Add the settings content to the main content area
  56.     contentArea.appendChild(settingsContent);
  57.  
  58.     // Add hover and click effects using CSS
  59.     const saveButton = document.getElementById("save-credentials");
  60.  
  61.     // Hover effect: change background color and scale the button slightly
  62.     saveButton.addEventListener("mouseover", () => {
  63.         saveButton.style.backgroundColor = "#45a049";
  64.         saveButton.style.transform = "scale(1.05)";
  65.     });
  66.  
  67.     // Revert the hover effect when mouse leaves
  68.     saveButton.addEventListener("mouseout", () => {
  69.         saveButton.style.backgroundColor = "#4CAF50";
  70.         saveButton.style.transform = "scale(1)";
  71.     });
  72.  
  73.     // Click effect: add a slight "pressed" effect and change to red temporarily
  74.     saveButton.addEventListener("mousedown", () => {
  75.         saveButton.style.backgroundColor = "red"; // Change to red during click
  76.         saveButton.style.transform = "scale(0.98)";
  77.     });
  78.  
  79.     // Revert the click effect after a short delay
  80.     saveButton.addEventListener("mouseup", () => {
  81.         setTimeout(() => {
  82.             saveButton.style.backgroundColor = "#4CAF50"; // Change back to green after the click
  83.         }, 150); // Wait for 150ms before returning to green
  84.         saveButton.style.transform = "scale(1)";
  85.     });
  86.  
  87.  
  88.  
  89.             // Event listener for Userscript Settings tab click
  90.             document.getElementById("userscript-settings-tab").addEventListener("click", (e) => {
  91.                 e.preventDefault();
  92.  
  93.                 // Clear any existing active classes from tabs
  94.                 navTabsWrap.querySelectorAll("li").forEach(tab => tab.classList.remove("active"));
  95.                 // Set the clicked tab to active
  96.                 settingsTab.classList.add("active");
  97.  
  98.                 // Hide other content and show settings content
  99.                 contentArea.innerHTML = ''; // Clear existing content
  100.                 contentArea.appendChild(settingsContent); // Display settings
  101.                 settingsContent.style.display = "block";
  102.             });
  103.  
  104.             // Load and apply existing settings
  105.             const autoLoginEnabled = await GM.getValue("autoLoginEnabled", true);
  106.             document.getElementById("enable-auto-login").checked = autoLoginEnabled;
  107.  
  108.             const savedUsername = await GM.getValue("username", "");
  109.             const savedPassword = await GM.getValue("password", "");
  110.             document.getElementById("username-input").value = savedUsername;
  111.             document.getElementById("password-input").value = savedPassword;
  112.  
  113.             // Toggle auto-login setting
  114.             document.getElementById("enable-auto-login").addEventListener("change", async (e) => {
  115.                 await GM.setValue("autoLoginEnabled", e.target.checked);
  116.                 //alert(`Auto-login ${e.target.checked ? "enabled" : "disabled"}`);
  117.             });
  118.  
  119.             // Save credentials when the "Save Credentials" button is clicked
  120.             document.getElementById("save-credentials").addEventListener("click", async () => {
  121.                 const username = document.getElementById("username-input").value;
  122.                 const password = document.getElementById("password-input").value;
  123.                 if (username && password) {
  124.                     await GM.setValue("username", username);
  125.                     await GM.setValue("password", password);
  126.                     alert("Credentials saved successfully!");
  127.                 } else {
  128.                     alert("Please enter both username and password.");
  129.                 }
  130.             });
  131.         }
  132.     }
  133.  
  134.     // Auto-login logic
  135.     const autoLoginEnabled = await GM.getValue("autoLoginEnabled", true);
  136.     if (autoLoginEnabled) {
  137.         let username = await GM.getValue("username", null);
  138.         let password = await GM.getValue("password", null);
  139.  
  140.         if (!username || !password) {
  141.             console.log("Username or password not provided. Exiting script.");
  142.             return;
  143.         }
  144.  
  145.         const signInButton = document.querySelector('a[data-toggle="modal"][data-target="#form-login"].btn-active-modal');
  146.         if (signInButton) {
  147.             signInButton.click();
  148.             console.log("Clicked Sign In button");
  149.  
  150.             const formCheckInterval = setInterval(() => {
  151.                 const loginForm = document.querySelector('form#loginform');
  152.                 if (loginForm) {
  153.                     clearInterval(formCheckInterval);
  154.                     loginForm.querySelector('input[name="log"]').value = username;
  155.                     loginForm.querySelector('input[name="pwd"]').value = password;
  156.                     loginForm.querySelector('input[name="rememberme"]').checked = true;
  157.                     loginForm.querySelector('input[type="submit"]').click();
  158.                     console.log("Form submitted with user credentials");
  159.                 }
  160.             }, 500);
  161.         } else {
  162.             console.log("Sign In button not found");
  163.         }
  164.     }
  165. })();