diff --git a/LeetCode-Token-Viewer/icons/dropdown-arrow.svg b/LeetCode-Token-Viewer/icons/dropdown-arrow.svg new file mode 100644 index 0000000..985dc5f --- /dev/null +++ b/LeetCode-Token-Viewer/icons/dropdown-arrow.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/LeetCode-Token-Viewer/manifest.json b/LeetCode-Token-Viewer/manifest.json index 449e986..809620f 100644 --- a/LeetCode-Token-Viewer/manifest.json +++ b/LeetCode-Token-Viewer/manifest.json @@ -3,7 +3,7 @@ "description": "Merge your LeetCode session and CSRF token", "version": "1.0", "manifest_version": 3, - "permissions": ["cookies", "activeTab", "scripting"], + "permissions": ["cookies", "activeTab", "scripting","storage"], "host_permissions": ["https://leetcode.com/*"], "action": { "default_popup": "popup.html", diff --git a/LeetCode-Token-Viewer/popup.html b/LeetCode-Token-Viewer/popup.html index 1270efc..41d9dc8 100644 --- a/LeetCode-Token-Viewer/popup.html +++ b/LeetCode-Token-Viewer/popup.html @@ -1,73 +1,211 @@ - + LeetCode Token Viewer -

🔐 LeetCode Token Viewer

+
+

LeetCode Token Viewer

+
+ + 🌙 Dark +
+
+
Fetching tokens...
- + + +
+ +
+
+ + diff --git a/LeetCode-Token-Viewer/popup.js b/LeetCode-Token-Viewer/popup.js index 2333b9e..e2ecaa2 100644 --- a/LeetCode-Token-Viewer/popup.js +++ b/LeetCode-Token-Viewer/popup.js @@ -1,38 +1,63 @@ async function getLeetCodeTokens() { try { - const cookies = await chrome.cookies.getAll({ domain: "leetcode.com" }); - const session = cookies.find(c => c.name === "LEETCODE_SESSION"); - const csrftoken = cookies.find(c => c.name === "csrftoken"); - const tokenBox = document.getElementById("token"); const status = document.getElementById("status"); const copyBtn = document.getElementById("copy"); + const buttonRow = document.querySelector(".button-row"); // flex container for buttons - if (session && csrftoken) { - const encode = (str) => { - const lenStr = str.length.toString().padStart(4, '0'); - return lenStr + str; - }; + const cookies = await chrome.cookies.getAll({ domain: "leetcode.com" }); + const session = cookies.find(c => c.name === "LEETCODE_SESSION"); + const csrftoken = cookies.find(c => c.name === "csrftoken"); + if (session && csrftoken) { + const encode = (str) => str.length.toString().padStart(4, "0") + str; const combinedToken = encode(session.value) + encode(csrftoken.value); - const formatted = ` -
Merge Token: ${combinedToken}
- `; - tokenBox.innerHTML = formatted; + // Remove loading effect smoothly + tokenBox.classList.remove("loading"); + tokenBox.style.opacity = "0"; + tokenBox.textContent = `Merge Token: ${combinedToken}`; + setTimeout(() => (tokenBox.style.opacity = "1"), 50); + + // Apply truncation + tokenBox.style.display = "-webkit-box"; + tokenBox.style.webkitLineClamp = "5"; + tokenBox.style.webkitBoxOrient = "vertical"; + tokenBox.style.overflow = "hidden"; + + // Add Show More button only if token is long + if (combinedToken.length > 200) { + const toggleBtn = document.createElement("button"); + toggleBtn.id = "toggleBtn"; + toggleBtn.innerHTML = 'Show More ▾'; // ▼ symbol + // Append it to the button row (flex row) + if (buttonRow) buttonRow.insertBefore(toggleBtn, copyBtn); + + let expanded = false; + toggleBtn.addEventListener("click", () => { + expanded = !expanded; + tokenBox.style.webkitLineClamp = expanded ? "unset" : "5"; + toggleBtn.innerHTML = expanded ? "Show Less ▴" : "Show More ▾"; // ▲ symbol + }); + } + + // Copy handler copyBtn.onclick = () => { navigator.clipboard.writeText(combinedToken); status.textContent = "✅ Merge token copied!"; - setTimeout(() => status.textContent = "", 2000); + setTimeout(() => (status.textContent = ""), 2000); }; } else { + tokenBox.classList.remove("loading"); tokenBox.textContent = "⚠️ Please log in to leetcode.com first."; copyBtn.disabled = true; } } catch (err) { console.error("Error fetching cookies:", err); - document.getElementById("token").textContent = "Error fetching tokens."; + const tokenBox = document.getElementById("token"); + tokenBox.classList.remove("loading"); + tokenBox.textContent = "Error fetching tokens."; } } diff --git a/LeetCode-Token-Viewer/theme.js b/LeetCode-Token-Viewer/theme.js new file mode 100644 index 0000000..d4f9514 --- /dev/null +++ b/LeetCode-Token-Viewer/theme.js @@ -0,0 +1,21 @@ +const themeToggle = document.getElementById("themeToggle"); +const themeLabel = document.getElementById("themeLabel"); + +// Load saved theme or default to dark +document.body.classList.add(localStorage.getItem("theme") || "dark"); +themeToggle.checked = document.body.classList.contains("light"); +themeLabel.textContent = themeToggle.checked ? "Light" : "Dark"; + +themeToggle.addEventListener("change", () => { + if (themeToggle.checked) { + document.body.classList.remove("dark"); + document.body.classList.add("light"); + themeLabel.textContent = "Light"; + localStorage.setItem("theme", "light"); + } else { + document.body.classList.remove("light"); + document.body.classList.add("dark"); + themeLabel.textContent = "Dark"; + localStorage.setItem("theme", "dark"); + } +});