Powerful cookie management tool with movable, glassmorphic UI for all browsers
Per
// ==UserScript==
// @name Cookie Manager (Cross-Browser + Movable UI)
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Powerful cookie management tool with movable, glassmorphic UI for all browsers
// @author Balta zar
// @match *://*/*
// @grant none
// @run-at document-end
// @license MIT
// ==/UserScript==
(function () {
'use strict';
function domReady(callback) {
if (document.readyState === 'complete' || document.readyState === 'interactive') callback();
else document.addEventListener('DOMContentLoaded', callback);
}
domReady(() => {
class CookieManager {
constructor() {
this.currentDomain = window.location.hostname;
this.cookies = [];
this.filteredCookies = [];
this.blurSupported = CSS.supports('backdrop-filter: blur(5px)');
this.isDragging = false;
this.offsetX = 0;
this.offsetY = 0;
this.init();
}
init() {
this.loadCookies();
this.createUI();
this.bindEvents();
}
loadCookies() {
this.cookies = [];
const cookieString = document.cookie;
if (!cookieString) return;
cookieString.split(';').forEach(pair => {
const [name, ...val] = pair.trim().split('=');
if (!name) return;
this.cookies.push({
name: decodeURIComponent(name),
value: decodeURIComponent(val.join('=')),
domain: this.currentDomain,
path: '/',
secure: location.protocol === 'https:'
});
});
this.filteredCookies = [...this.cookies];
}
createUI() {
if (document.getElementById('cookieToggleBtn')) return;
const style = document.createElement('style');
style.textContent = `
.cookie-toggle-btn {
position: fixed; top: 20px; right: 20px;
background: rgba(103,58,183,0.8);
color: white; border: none; border-radius: 50%;
width: 60px; height: 60px; font-size: 24px;
cursor: pointer; z-index: 9999;
${this.blurSupported ? 'backdrop-filter: blur(10px);' : ''}
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.cookie-manager-container {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 90%; max-width: 900px;
background: rgba(30,30,46,0.9);
color: white; border-radius: 20px;
z-index: 10000; padding: 20px;
display: none; font-family: sans-serif;
${this.blurSupported ? 'backdrop-filter: blur(10px);' : ''}
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.cookie-header {
cursor: move;
background: rgba(255,255,255,0.1);
padding: 10px;
border-radius: 10px;
text-align: center;
user-select: none;
}
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { border-bottom: 1px solid rgba(255,255,255,0.2); padding: 8px 10px; text-align: left; }
tr:hover { background: rgba(255,255,255,0.05); }
.cookie-btn {
background: rgba(255,255,255,0.15);
border: none; padding: 8px 12px; border-radius: 6px;
color: white; cursor: pointer; margin-left: 5px;
}
.cookie-btn:hover { background: rgba(255,255,255,0.25); }
.cookie-input {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
color: white; padding: 8px; border-radius: 6px; width: 100%;
}
`;
document.head.appendChild(style);
this.toggleBtn = document.createElement('button');
this.toggleBtn.id = 'cookieToggleBtn';
this.toggleBtn.className = 'cookie-toggle-btn';
this.toggleBtn.textContent = '🍪';
document.body.appendChild(this.toggleBtn);
this.container = document.createElement('div');
this.container.className = 'cookie-manager-container';
this.container.innerHTML = `
<div class="cookie-header"><h2 style="margin:0;">Cookie Manager</h2></div>
<div>
<input id="cookieSearchInput" class="cookie-input" placeholder="Search cookies...">
<button id="cookieAddBtn" class="cookie-btn">Add</button>
<button id="cookieRefreshBtn" class="cookie-btn">Refresh</button>
<button id="cookieDeleteAllBtn" class="cookie-btn">Delete All</button>
</div>
<table>
<thead><tr><th>Name</th><th>Value</th><th>Actions</th></tr></thead>
<tbody id="cookieListBody"></tbody>
</table>
`;
document.body.appendChild(this.container);
this.makeMovable(this.container.querySelector('.cookie-header'));
}
makeMovable(header) {
header.addEventListener('mousedown', (e) => this.startDrag(e));
header.addEventListener('touchstart', (e) => this.startDrag(e.touches[0]));
document.addEventListener('mousemove', (e) => this.onDrag(e));
document.addEventListener('touchmove', (e) => this.onDrag(e.touches[0]));
document.addEventListener('mouseup', () => this.endDrag());
document.addEventListener('touchend', () => this.endDrag());
}
startDrag(e) {
e.preventDefault();
this.isDragging = true;
const rect = this.container.getBoundingClientRect();
this.offsetX = e.clientX - rect.left;
this.offsetY = e.clientY - rect.top;
}
onDrag(e) {
if (!this.isDragging) return;
const x = e.clientX - this.offsetX;
const y = e.clientY - this.offsetY;
this.container.style.left = `${x}px`;
this.container.style.top = `${y}px`;
this.container.style.transform = `translate(0,0)`; // cancel center transform
}
endDrag() {
this.isDragging = false;
}
bindEvents() {
this.toggleBtn.onclick = () => this.toggleManager();
document.getElementById('cookieAddBtn').onclick = () => this.addCookiePrompt();
document.getElementById('cookieRefreshBtn').onclick = () => this.refreshCookies();
document.getElementById('cookieDeleteAllBtn').onclick = () => this.deleteAllCookies();
document.getElementById('cookieSearchInput').oninput = () => this.filterCookies();
}
toggleManager() {
const visible = this.container.style.display === 'block';
this.container.style.display = visible ? 'none' : 'block';
if (!visible) this.refreshCookies();
}
refreshCookies() {
this.loadCookies();
this.renderCookies();
}
filterCookies() {
const query = document.getElementById('cookieSearchInput').value.toLowerCase();
this.filteredCookies = this.cookies.filter(c =>
c.name.toLowerCase().includes(query) || c.value.toLowerCase().includes(query)
);
this.renderCookies();
}
renderCookies() {
const tbody = document.getElementById('cookieListBody');
tbody.innerHTML = '';
if (this.filteredCookies.length === 0) {
tbody.innerHTML = `<tr><td colspan="3" style="text-align:center;">No cookies found</td></tr>`;
return;
}
this.filteredCookies.forEach((cookie, i) => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${this.escape(cookie.name)}</td>
<td title="${this.escape(cookie.value)}">${this.escape(cookie.value).slice(0, 40)}${cookie.value.length > 40 ? '…' : ''}</td>
<td>
<button class="cookie-btn" data-i="${i}" data-action="edit">✎</button>
<button class="cookie-btn" data-i="${i}" data-action="del">×</button>
</td>
`;
tbody.appendChild(tr);
});
tbody.querySelectorAll('button').forEach(btn =>
btn.onclick = () => {
const idx = +btn.dataset.i;
const action = btn.dataset.action;
if (action === 'del') this.deleteCookie(this.filteredCookies[idx].name);
if (action === 'edit') this.editCookiePrompt(this.filteredCookies[idx]);
}
);
}
addCookiePrompt() {
const name = prompt('Cookie name:');
if (!name) return;
const value = prompt('Cookie value:') || '';
document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/`;
this.refreshCookies();
}
editCookiePrompt(cookie) {
const newVal = prompt(`Edit value for ${cookie.name}:`, cookie.value);
if (newVal === null) return;
document.cookie = `${encodeURIComponent(cookie.name)}=${encodeURIComponent(newVal)}; path=/`;
this.refreshCookies();
}
deleteCookie(name) {
document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
this.refreshCookies();
}
deleteAllCookies() {
this.cookies.forEach(c => this.deleteCookie(c.name));
}
escape(str) {
return str.replace(/[&<>"']/g, m => ({
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
}[m]));
}
}
new CookieManager();
});
})();