Auto login for Webtoon.xyz with userscript settings
// ==UserScript==
// @name Webtoon.xyz+
// @namespace github.com/longkidkoolstar
// @version 0.1
// @description Auto login for Webtoon.xyz with userscript settings
// @author longkidkoolstar
// @homepage github.com/longkidkoolstar
// @icon https://www.google.com/s2/favicons?sz=64&domain=webtoon.xyz
// @license MIT
// @match https://www.webtoon.xyz/*
// @grant GM.getValue
// @grant GM.setValue
// ==/UserScript==
(async function() {
console.log("User-Script Started");
// Check if on the user settings page
if (window.location.href.startsWith("https://www.webtoon.xyz/user-settings/")) {
const navTabsWrap = document.querySelector(".nav-tabs-wrap ul.nav-tabs");
const contentArea = document.querySelector("#post-7 > div.entry-content > div > div > div.col-md-9.col-sm-9");
if (navTabsWrap && contentArea) {
// Create Userscript Settings tab
const settingsTab = document.createElement("li");
settingsTab.innerHTML = `
<a href="#" id="userscript-settings-tab"><i class="icon ion-md-settings"></i>Userscript Settings</a>
`;
navTabsWrap.appendChild(settingsTab);
// Create Userscript Settings content section
const settingsContent = document.createElement("div");
settingsContent.id = "userscript-settings-content";
settingsContent.innerHTML = `
<h2 style="font-size: 24px; color: #333;">Webtoon.xyz+ Settings</h2>
<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;">
<label style="font-size: 16px; color: #333; margin-bottom: 8px; display: block;">
<input type="checkbox" id="enable-auto-login" style="margin-right: 10px;">
Enable Auto Login
</label><br><br>
<label for="username-input" style="font-size: 14px; color: #555;">Username or Email:</label>
<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>
<label for="password-input" style="font-size: 14px; color: #555;">Password:</label>
<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>
<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;">
Save Credentials
</button>
</div>
`;
settingsContent.style.display = "none";
// Add the settings content to the main content area
contentArea.appendChild(settingsContent);
// Add hover and click effects using CSS
const saveButton = document.getElementById("save-credentials");
// Hover effect: change background color and scale the button slightly
saveButton.addEventListener("mouseover", () => {
saveButton.style.backgroundColor = "#45a049";
saveButton.style.transform = "scale(1.05)";
});
// Revert the hover effect when mouse leaves
saveButton.addEventListener("mouseout", () => {
saveButton.style.backgroundColor = "#4CAF50";
saveButton.style.transform = "scale(1)";
});
// Click effect: add a slight "pressed" effect and change to red temporarily
saveButton.addEventListener("mousedown", () => {
saveButton.style.backgroundColor = "red"; // Change to red during click
saveButton.style.transform = "scale(0.98)";
});
// Revert the click effect after a short delay
saveButton.addEventListener("mouseup", () => {
setTimeout(() => {
saveButton.style.backgroundColor = "#4CAF50"; // Change back to green after the click
}, 150); // Wait for 150ms before returning to green
saveButton.style.transform = "scale(1)";
});
// Event listener for Userscript Settings tab click
document.getElementById("userscript-settings-tab").addEventListener("click", (e) => {
e.preventDefault();
// Clear any existing active classes from tabs
navTabsWrap.querySelectorAll("li").forEach(tab => tab.classList.remove("active"));
// Set the clicked tab to active
settingsTab.classList.add("active");
// Hide other content and show settings content
contentArea.innerHTML = ''; // Clear existing content
contentArea.appendChild(settingsContent); // Display settings
settingsContent.style.display = "block";
});
// Load and apply existing settings
const autoLoginEnabled = await GM.getValue("autoLoginEnabled", true);
document.getElementById("enable-auto-login").checked = autoLoginEnabled;
const savedUsername = await GM.getValue("username", "");
const savedPassword = await GM.getValue("password", "");
document.getElementById("username-input").value = savedUsername;
document.getElementById("password-input").value = savedPassword;
// Toggle auto-login setting
document.getElementById("enable-auto-login").addEventListener("change", async (e) => {
await GM.setValue("autoLoginEnabled", e.target.checked);
//alert(`Auto-login ${e.target.checked ? "enabled" : "disabled"}`);
});
// Save credentials when the "Save Credentials" button is clicked
document.getElementById("save-credentials").addEventListener("click", async () => {
const username = document.getElementById("username-input").value;
const password = document.getElementById("password-input").value;
if (username && password) {
await GM.setValue("username", username);
await GM.setValue("password", password);
alert("Credentials saved successfully!");
} else {
alert("Please enter both username and password.");
}
});
}
}
// Auto-login logic
const autoLoginEnabled = await GM.getValue("autoLoginEnabled", true);
if (autoLoginEnabled) {
let username = await GM.getValue("username", null);
let password = await GM.getValue("password", null);
if (!username || !password) {
console.log("Username or password not provided. Exiting script.");
return;
}
const signInButton = document.querySelector('a[data-toggle="modal"][data-target="#form-login"].btn-active-modal');
if (signInButton) {
signInButton.click();
console.log("Clicked Sign In button");
const formCheckInterval = setInterval(() => {
const loginForm = document.querySelector('form#loginform');
if (loginForm) {
clearInterval(formCheckInterval);
loginForm.querySelector('input[name="log"]').value = username;
loginForm.querySelector('input[name="pwd"]').value = password;
loginForm.querySelector('input[name="rememberme"]').checked = true;
loginForm.querySelector('input[type="submit"]').click();
console.log("Form submitted with user credentials");
}
}, 500);
} else {
console.log("Sign In button not found");
}
}
})();