Greasy Fork is available in English.
通用网站多账号切换工具，保存并恢复 Cookie 与存储数据
当前为
// ==UserScript==
// @name AnMe
// @author zjw
// @version 9.7.0
// @namespace https://github.com/Zhu-junwei/AnMe
// @description 通用网站多账号切换工具，保存并恢复 Cookie 与存储数据
// @description:zh 通用网站多账号切换工具，保存并恢复 Cookie 与存储数据
// @description:en Universal multi-account switching tool for websites, supporting saving and restoring of Cookies and storage data.
// @icon data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>👥</text></svg>
// @match *://*/*
// @license MIT
// @run-at document-end
// @grant GM_cookie
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_listValues
// @grant GM_deleteValue
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @grant GM_info
// @connect *
// @tag Account
// @tag Cookie
// @tag Switcher
// @tag 多账号
// ==/UserScript==
(function () {
'use strict';
if (window.self !== window.top) return;
// ========================================================================
// 1. Constants & Configuration & Styles
// ========================================================================
const CONST = {
PREFIX: 'acc_stable_',
ORDER_PREFIX: 'acc_order_',
CFG: {
LANG: 'cfg_lang',
FAB_MODE: 'cfg_fab_mode',
FAB_POS: 'cfg_fab_pos'
},
HOST: location.hostname,
META: {
NAME: GM_info.script.name,
VERSION: GM_info.script.version,
AUTHOR: GM_info.script.author,
LINKS: {
PROJECT: "https://github.com/Zhu-junwei/AnMe",
DONATE: "https://www.cnblogs.com/zjw-blog/p/19466109"
}
}
};
const I18N_DATA = {
zh: {
_name: "简体中文",
nav_switch: "账号切换", nav_mgr: "管理账号", nav_set: "高级设置", nav_notice: "使用声明", nav_about: "关于脚本",
placeholder_name: "给新账号命名...", tip_help: "切换登录失败？尝试勾选 LocalStorage 和 SessionStorage。",
tip_lock: "为保证正常读取Cookie，请在篡改猴高级模式下，设置允许脚本访问 Cookie: ALL",
btn_save: "保存当前账号", btn_clean: "切换新环境 (清空本站痕迹)",
set_fab_mode: "悬浮球显示模式", fab_auto: "智能", fab_show: "常驻", fab_hide: "隐藏",
fab_auto_title: "有账号记录时自动显示，无记录时隐藏", fab_show_title: "始终显示悬浮球",fab_hide_title: "平时不显示，仅能通过菜单唤起",
set_lang: "语言设置 / Language", set_backup: "数据备份与还原",
btn_exp_curr: "导出当前网站数据", btn_exp_all: "导出脚本全部数据", btn_imp: "导入备份文件",
donate: "支持作者", btn_clear_all: "清空脚本所有数据 (慎用)",
notice_title: "《使用声明与免责条款》", back: "← 返回上一级",
no_data: "🍃 暂无账号记录", confirm_clean: "确定清空当前网站所有痕迹并开启新环境？",
confirm_clear_all: "⚠️ 警告：这将删除本脚本保存的所有网站的所有账号数据！且无法恢复！",
import_ok: "✅ 成功导入/更新 {count} 个账号！", import_err: "❌ 导入失败：文件格式错误",
export_err: "⚠️ 没有可导出的数据", menu_open: "🚀 开启账号管理",
tag_ck: "CK", tag_ls: "LS", tag_ss: "SS",
dlg_ok: "确定", dlg_cancel: "取消",
about_desc: "本脚本旨在提供简单高效的多账号切换方案。",
notice_content: `
<h4>1. 脚本功能说明</h4>
<p>本脚本通过篡改猴插件提供的存储API，将当前网站的 Cookie、LocalStorage 和 SessionStorage 进行快照保存。当您点击切换时，脚本会清空当前痕迹并还原选中的快照数据，从而实现多账号快速登录。</p>
<h4>2. 数据存储安全</h4>
<p>所有账号数据均存储在您浏览器的篡改猴插件内部管理器中（GM_setValue），脚本没有联网权限，更不会上传任何数据到远程服务器。</p>
<h4>3. 风险提示</h4>
<p>由于浏览器环境的开放性，本脚本无法阻止同域名下的其他恶意脚本通过篡改猴 API 或存储机制尝试获取这些数据。请勿在公共电脑或不可信的设备环境中使用本脚本保存重要账号。</p>
<h4>4. 免责声明</h4>
<p>本脚本仅供学习交流使用。因使用本脚本导致的账号被封禁、数据泄露或任何形式的损失，作者不承担任何法律责任。</p>`
},
en: {
_name: "English",
nav_switch: "Accounts", nav_mgr: "Manage", nav_set: "Settings", nav_notice: "Disclaimer", nav_about: "About",
placeholder_name: "Name this account...", tip_help: "Switch failed? Try checking LS/SS.",
tip_lock: "Set 'Cookie Access' to 'ALL' in Tampermonkey settings.",
btn_save: "Save Current", btn_clean: "New Env",
set_fab_mode: "Float Button Mode", fab_auto: "Auto", fab_show: "Show", fab_hide: "Hide",
fab_auto_title: "Automatically show when accounts exist, hide when none",fab_show_title: "Always show the floating button",fab_hide_title: "Hidden by default, can only be activated via the menu",
set_lang: "Language / 语言设置", set_backup: "Backup & Restore",
btn_exp_curr: "Export Current Site", btn_exp_all: "Export All Data", btn_imp: "Import Backup",
donate: "Buy me a coffee",btn_clear_all: "Clear All App Data",
notice_title: "Disclaimer & Terms", back: "← Back",
no_data: "🍃 No accounts", confirm_clean: "Clear all local traces?",
confirm_clear_all: "⚠️ Warning: This deletes ALL data for ALL sites! Continue?",
import_ok: "✅ Imported {count} accounts!", import_err: "❌ Invalid format",
export_err: "⚠️ No data", menu_open: "🚀 Open Manager",
tag_ck: "CK", tag_ls: "LS", tag_ss: "SS",
dlg_ok: "OK", dlg_cancel: "Cancel",
about_desc: "A simple and efficient solution for account switching.",
notice_content: `
<h4>1. Function Description</h4>
<p>This script snapshots Cookies, LocalStorage, and SessionStorage via Tampermonkey's storage API. It clears current traces and restores selected snapshots for fast switching.</p>
<h4>2. Data Security</h4>
<p>All data is stored locally within Tampermonkey (GM_setValue). The script has no network permissions.</p>
<h4>3. Risk Warning</h4>
<p>The script cannot prevent other malicious scripts on the same domain from attempting to access this data. Do not use on public devices.</p>
<h4>4. Disclaimer</h4>
<p>This script is for educational purposes. The author is not responsible for any loss resulting from use.</p>`
}
};
const STYLE_CSS = `
#acc-mgr-fab { position: fixed; bottom: 100px; right: 30px; width: 44px; height: 44px; background: #2196F3; color: white; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 20px; cursor: move; z-index: 1000000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); user-select: none; border: none; touch-action: none; }
.acc-panel { position: fixed; width: 340px; background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); z-index: 1000001; display: none; flex-direction: column; font-family: system-ui, -apple-system, sans-serif; border: 1px solid #ddd; overflow: hidden; height: 480px;overscroll-behavior: none !important;}
.acc-panel.show { display: flex; }
.acc-header { height: 40px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid #eee; background: #fdfdfd; font-weight: bold; font-size: 14px; color: #333; flex-shrink: 0; justify-content: space-between; }
.acc-tab-content { flex: 1; display: none; padding: 15px; overflow: hidden; flex-direction: column; background: #fff; }
.acc-tab-content.active { display: flex; }
.acc-tabs-footer { display: flex; background: #f8f9fa; border-top: 1px solid #eee; height: 60px; padding-bottom: 6px; flex-shrink: 0; box-sizing: border-box; }
.acc-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: #666; font-weight: bold; border-top: 2px solid transparent; flex-direction: column; padding-top: 6px;}
.acc-tab-btn span { font-size: 18px; margin-bottom: 2px; }
.acc-tab-btn.active { color: #2196F3; border-top-color: #2196F3; background: white; }
.acc-scroll-area { flex: 1; overflow-y: auto; padding-right: 4px; margin-top: 2px; overscroll-behavior: contain;}
.acc-scroll-area::-webkit-scrollbar { width: 4px; }
.acc-scroll-area::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
/* --- Customized Elements --- */
.acc-backup-row { display: flex; gap: 8px; margin-bottom: 10px; justify-content: space-between; }
.acc-icon-btn { flex: 1; height: 38px; padding: 0; border-radius: 6px; border: 1px solid #eee; background: #f9f9f9; cursor: pointer; font-size: 18px; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.acc-icon-btn:hover { background: #e3f2fd; border-color: #2196F3; }
.acc-icon-btn.danger:hover { background: #ffebee; border-color: #f44336; color: #f44336; }
.acc-about-content { padding: 5px; color: #444 !important; font-size: 13px !important; line-height: 1.6 !important; text-align: left !important; }
.acc-about-header { text-align: center !important; margin-bottom: 20px !important; }
.acc-about-logo { font-size: 20px !important; margin-bottom: 5px !important; display: block !important; }
.acc-about-name { font-weight: bold !important; font-size: 16px !important; color: #333 !important; }
.acc-about-ver { color: #999 !important; font-size: 12px !important; }
.acc-about-item { display: flex !important; justify-content: space-between !important; padding: 3px 0 !important; border-bottom: 1px solid #f5f5f5 !important; }
.acc-about-label { color: #888 !important; font-weight: bold !important; }
/* Custom Dialog UI */
.acc-dialog-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2000005; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.acc-dialog-box { background: white; width: 280px; border-radius: 12px; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); animation: accPop 0.05s ease-out; display: flex; flex-direction: column; }
@keyframes accPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.acc-dialog-msg { font-size: 14px; color: #333; margin-bottom: 20px; line-height: 1.5; text-align: center; white-space: pre-wrap; font-weight: 500; }
.acc-dialog-footer { display: flex; gap: 10px; }
.acc-dialog-btn { flex: 1; padding: 8px 0; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.1s; }
.acc-dialog-btn-ok { background: #2196F3; color: white; }
.acc-dialog-btn-ok:hover { background: #1976D2; }
.acc-dialog-btn-cancel { background: #f5f5f5; color: #666; }
.acc-dialog-btn-cancel:hover { background: #e0e0e0; }
/* Others ... */
.acc-switch-card { padding: 12px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: 0.2s; position: relative; }
.acc-switch-card:hover { border-color: #2196F3; background: #f7fbff; }
.acc-card-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #333; }
.acc-card-meta { font-size: 10px; color: #999; display: flex; flex-wrap: wrap; gap: 4px; }
.acc-mini-tag { background: #f0f0f0; padding: 1px 5px; border-radius: 3px; color: #777; transition: all 0.2s; border: 1px solid transparent; }
.acc-click-tag { cursor: pointer; text-decoration: none; position: relative; }
.acc-click-tag:hover { background: #2196F3; color: white; border-color: #1976D2; z-index: 2; }
.acc-mgr-item { display: flex; align-items: center; margin-top: 2px; border-bottom: 1px solid #f9f9f9; background: white; cursor: grab; }
.acc-mgr-item.dragging { opacity: 0.4; background: #e3f2fd; border: 1px dashed #2196F3; }
.acc-mgr-handle { margin: 0 8px; color: #ccc; font-size: 14px; user-select: none; cursor: grab; }
.acc-mgr-input { flex: 1; border: 1px solid transparent; padding: 3px; font-size: 13px; outline: none; border-radius: 4px; background: transparent; }
.acc-btn-del { color: #ccc; cursor: pointer; padding: 0 12px; font-size: 20px; font-weight: 300; user-select: none; }
.acc-btn-del:hover { color: #f44336; }
.acc-action-fixed { border-top: 1px solid #eee; padding-top: 12px; flex-shrink: 0; }
.acc-row-btn { display: flex; gap: 8px; align-items: center; }
.acc-input-text { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.acc-btn { border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 5px; transition: 0.2s; }
.acc-btn-blue { flex: 1; background: #2196F3; color: white; }
.acc-btn-plus { width: 38px; height: 38px; background: #fff; color: #666; border: 1px solid #ddd; font-size: 20px; }
.acc-btn-plus:hover { border-color: #2196F3; color: #2196F3; }
.acc-help-tip, .acc-lock-tip { display: inline-block; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; line-height: 16px; text-align: center; cursor: help; margin-left: 2px; }
.acc-help-tip { background: #eee; color: #999; }
.acc-lock-tip { background: transparent; font-size: 12px; margin-left: 8px; }
.acc-set-group { margin-bottom: 10px; }
.acc-set-title { font-size: 12px; font-weight: bold; color: #999; margin-bottom: 8px; }
.acc-set-row { display: flex; gap: 10px; margin-bottom: 10px; padding: 0 3px;}
.acc-btn-light { background: #f5f5f5; color: #333; flex: 1; border: 1px solid #eee; }
.acc-btn-light:hover { background: #e0e0e0; }
.acc-btn-active { background: #2196F3 !important; color: white !important; border-color: #2196F3 !important; }
.acc-notice-content { line-height: 1.6; color: #444; font-size: 13px; }
.acc-notice-content h4 { margin: 15px 0 8px 0; color: #333; border-left: 3px solid #2196F3; padding-left: 8px; }
.acc-link-btn { color: #2196F3; cursor: pointer; text-decoration: underline; font-size: 12px; }
.acc-select-ui { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: #fff; cursor: pointer; outline: none; }
.acc-chk-label { display: inline-flex !important; align-items: center !important; cursor: pointer !important; margin-right: 8px !important; user-select: none; font-size: 12px; }
.acc-custom-chk { appearance: none !important; width: 14px !important; height: 14px !important; border: 1px solid #ccc !important; border-radius: 3px !important; margin-right: 4px !important; cursor: pointer !important; position: relative !important; }
.acc-custom-chk:checked { background-color: #2196F3 !important; border-color: #2196F3 !important; }
.acc-custom-chk:checked::after { content: ''; position: absolute !important; left: 4px !important; top: 1px !important; width: 3px !important; height: 7px !important; border: solid white !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; }
`;
// ========================================================================
// 2. Global State & Utils
// ========================================================================
let currentLang = GM_getValue(CONST.CFG.LANG, navigator.language.startsWith('zh') ? 'zh' : 'en');
if (!I18N_DATA[currentLang]) currentLang = 'en';
let currentViewingHost = CONST.HOST;
let isForcedShow = false;
let fab, panel, dialogMask;
const Utils = {
t: (key) => I18N_DATA[currentLang][key] || key,
extractName: (key) => key.split('::')[1] || key,
makeKey: (name, host = CONST.HOST) => `${CONST.PREFIX}${host}::${name}`,
listAllHosts: () => [...new Set(GM_listValues().filter(v => v.startsWith(CONST.PREFIX)).map(v => v.split('::')[0].replace(CONST.PREFIX, '')))],
getSortedKeysByHost: (host) => {
const allKeys = GM_listValues().filter(k => k.startsWith(`${CONST.PREFIX}${host}::`));
const savedOrder = GM_getValue(CONST.ORDER_PREFIX + host, []);
return allKeys.sort((a, b) => {
const nameA = Utils.extractName(a);
const nameB = Utils.extractName(b);
let idxA = savedOrder.indexOf(nameA);
let idxB = savedOrder.indexOf(nameB);
if (idxA === -1) idxA = 9999;
if (idxB === -1) idxB = 9999;
if (idxA !== idxB) return idxA - idxB;
const dataA = GM_getValue(a);
const dataB = GM_getValue(b);
return new Date(dataB.time || 0) - new Date(dataA.time || 0);
});
}
};
// ========================================================================
// 3. Core Logic (Data & Storage)
// ========================================================================
const Core = {
async saveAccount(name, options = { ck: true, ls: false, ss: false }) {
const snapshot = {
time: new Date().toLocaleString('zh-CN', { hour12: false }),
localStorage: options.ls ? { ...localStorage } : {},
sessionStorage: options.ss ? { ...sessionStorage } : {},
cookies: []
};
if (options.ck) {
snapshot.cookies = await new Promise(res => GM_cookie.list({ url: window.location.href }, res));
}
GM_setValue(Utils.makeKey(name), snapshot);
const currentOrder = GM_getValue(CONST.ORDER_PREFIX + CONST.HOST, []);
if (!currentOrder.includes(name)) {
currentOrder.push(name);
GM_setValue(CONST.ORDER_PREFIX + CONST.HOST, currentOrder);
}
},
async loadAccount(key) {
const data = GM_getValue(key);
if (!data) return;
localStorage.clear(); sessionStorage.clear();
const ck = await new Promise(res => GM_cookie.list({ url: window.location.href }, res));
for (const c of (ck || [])) await new Promise(res => GM_cookie.delete({ url: window.location.href, name: c.name }, res));
Object.entries(data.localStorage || {}).forEach(([k, v]) => localStorage.setItem(k, v));
Object.entries(data.sessionStorage || {}).forEach(([k, v]) => sessionStorage.setItem(k, v));
for (const c of (data.cookies || [])) {
const d = { ...c, url: window.location.href }; delete d.hostOnly; delete d.session;
await new Promise(res => GM_cookie.set(d, res));
}
location.reload();
},
async cleanEnvironment() {
localStorage.clear(); sessionStorage.clear();
const ck = await new Promise(res => GM_cookie.list({ url: window.location.href }, res));
for (const c of (ck || [])) await new Promise(res => GM_cookie.delete({ url: window.location.href, name: c.name }, res));
location.reload();
},
inspectData(key, type) {
const data = GM_getValue(key);
if (!data) return;
let content = null;
if (type === 'cookies') content = data.cookies;
else if (type === 'localStorage') content = data.localStorage;
else if (type === 'sessionStorage') content = data.sessionStorage;
if (content) {
const win = window.open("", "_blank");
if (win) {
win.document.write(`<html><head><title>AnMe Inspector</title><style>body{font-family:monospace;padding:20px;background:#f5f5f5}pre{white-space:pre-wrap;word-wrap:break-word;background:#fff;padding:15px;border:1px solid #ddd;border-radius:5px}</style></head><body><h3>${Utils.extractName(key)} - ${type}</h3><pre>${JSON.stringify(content, null, 2)}</pre></body></html>`);
win.document.close();
}
}
},
renameAccount(oldKey, newName, host) {
const data = GM_getValue(oldKey);
GM_deleteValue(oldKey);
GM_setValue(Utils.makeKey(newName, host), data);
const orderKey = CONST.ORDER_PREFIX + host;
let order = GM_getValue(orderKey, []);
const idx = order.indexOf(Utils.extractName(oldKey));
if(idx !== -1) { order[idx] = newName; GM_setValue(orderKey, order); }
},
deleteAccount(key, host) {
GM_deleteValue(key);
const orderKey = CONST.ORDER_PREFIX + host;
const name = Utils.extractName(key);
const order = GM_getValue(orderKey, []);
GM_setValue(orderKey, order.filter(n => n !== name));
},
updateOrder(host, nameList) { GM_setValue(CONST.ORDER_PREFIX + host, nameList); },
async exportData(scope) {
let exportObj = {};
const allKeys = GM_listValues();
const targetAccKeys = scope === 'current' ? allKeys.filter(k => k.startsWith(`${CONST.PREFIX}${CONST.HOST}::`)) : allKeys.filter(k => k.startsWith(CONST.PREFIX));
if (targetAccKeys.length === 0) { await UI.alert(Utils.t('export_err')); return; }
targetAccKeys.forEach(key => exportObj[key] = GM_getValue(key));
if (scope === 'current') {
const orderKey = CONST.ORDER_PREFIX + CONST.HOST;
const orderVal = GM_getValue(orderKey);
if (orderVal) exportObj[orderKey] = orderVal;
} else {
allKeys.filter(k => k.startsWith(CONST.ORDER_PREFIX)).forEach(k => exportObj[k] = GM_getValue(k));
}
const blob = new Blob([JSON.stringify(exportObj, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const downsite = scope === 'current' ? CONST.HOST : 'All_Sites';
const a = document.createElement('a'); a.href = url; a.download = `${CONST.META.NAME}_Backup_${downsite}_${new Date().toISOString().slice(0, 10)}.json`; a.click(); URL.revokeObjectURL(url);
},
async importData(file) {
const reader = new FileReader();
reader.onload = async (e) => {
try {
const data = JSON.parse(e.target.result);
let count = 0;
const hostsInFile = [...new Set(Object.keys(data).filter(k => k.startsWith(CONST.PREFIX)).map(k => k.replace(CONST.PREFIX, '').split('::')[0]))];
hostsInFile.forEach(host => {
const orderKey = CONST.ORDER_PREFIX + host;
const fileOrder = data[orderKey] || [];
let localOrder = GM_getValue(orderKey, []);
const namesToImport = fileOrder.length > 0 ? fileOrder : Object.keys(data).filter(k => k.startsWith(`${CONST.PREFIX}${host}::`)).map(k => k.split('::')[1]);
namesToImport.forEach(name => {
const fullKey = `${CONST.PREFIX}${host}::${name}`;
if (data[fullKey]) {
GM_setValue(fullKey, data[fullKey]);
if (!localOrder.includes(name)) localOrder.push(name);
count++;
}
});
GM_setValue(orderKey, localOrder);
});
await UI.alert(Utils.t('import_ok').replace('{count}', count));
UI.refresh();
} catch (err) {
await UI.alert(Utils.t('import_err'));
}
};
reader.readAsText(file);
},
clearAllData() {
GM_listValues().forEach(k => { if (k.startsWith(CONST.PREFIX) || k.startsWith(CONST.ORDER_PREFIX)) GM_deleteValue(k); });
}
};
// ========================================================================
// 4. UI Rendering & Templates
// ========================================================================
const Templates = {
panel: () => {
const langOptions = Object.keys(I18N_DATA).map(code => `<option value="${code}" ${currentLang === code ? 'selected' : ''}>${I18N_DATA[code]._name}</option>`).join('');
return `
<div class="acc-header">
<div class="acc-header-title" id="acc-header-text">${Utils.t('nav_switch')}</div>
<div style="cursor:pointer; color:#ccc;" id="acc-close-btn">✕</div>
</div>
<div class="acc-tab-content active" id="pg-switch"><div class="acc-scroll-area" id="switch-area"></div></div>
<div class="acc-tab-content" id="pg-mgr">
<select id="host-sel" style="width:100%; padding:6px; margin-bottom:10px; font-size:12px; border:1px solid #eee; border-radius:4px; outline:none; cursor:pointer; background:#fff;"></select>
<div class="acc-scroll-area" id="mgr-list-area"></div>
<div class="acc-action-fixed" id="mgr-fixed-actions">
<input type="text" id="acc-new-name" class="acc-input-text" placeholder="${Utils.t('placeholder_name')}" style="margin-bottom:8px; width:100%;">
<div style="display:flex; align-items:center; flex-wrap:wrap; font-size:11px; color:#666; margin-bottom:10px;">
<label class="acc-chk-label"><input type="checkbox" id="c-ck" class="acc-custom-chk"> Cookie</label>
<label class="acc-chk-label"><input type="checkbox" id="c-ls" class="acc-custom-chk"> LS</label>
<label class="acc-chk-label"><input type="checkbox" id="c-ss" class="acc-custom-chk"> SS</label>
<span class="acc-help-tip" title="${Utils.t('tip_help')}">?</span>
<span class="acc-lock-tip" title="${Utils.t('tip_lock')}">🔒</span>
</div>
<div class="acc-row-btn">
<button id="do-save" class="acc-btn acc-btn-blue"><span>💾</span> ${Utils.t('btn_save')}</button>
<button id="do-clean" class="acc-btn acc-btn-plus" title="${Utils.t('btn_clean')}">+</button>
</div>
</div>
</div>
<div class="acc-tab-content" id="pg-set">
<div class="acc-scroll-area">
<div class="acc-set-group">
<div class="acc-set-title">${Utils.t('set_fab_mode')}</div>
<div class="acc-set-row">
<button class="acc-btn acc-btn-light fab-mode-btn" data-val="auto" title="${Utils.t('fab_auto_title')}">${Utils.t('fab_auto')}</button>
<button class="acc-btn acc-btn-light fab-mode-btn" data-val="show" title="${Utils.t('fab_show_title')}">${Utils.t('fab_show')}</button>
<button class="acc-btn acc-btn-light fab-mode-btn" data-val="hide" title="${Utils.t('fab_hide_title')}">${Utils.t('fab_hide')}</button>
</div>
</div>
<div class="acc-set-group">
<div class="acc-set-title">${Utils.t('set_lang')}</div>
<div class="acc-set-row"><select id="lang-sel" class="acc-select-ui">${langOptions}</select></div>
</div>
<div class="acc-set-group">
<div class="acc-set-title">${Utils.t('set_backup')}</div>
<div class="acc-backup-row">
<button class="acc-icon-btn" id="btn-export-curr" title="${Utils.t('btn_exp_curr')}">📤</button>
<button class="acc-icon-btn" id="btn-export-all" title="${Utils.t('btn_exp_all')}">📦</button>
<button class="acc-icon-btn" id="btn-import-trigger" title="${Utils.t('btn_imp')}">📥</button>
<button class="acc-icon-btn danger" id="btn-clear-all" title="${Utils.t('btn_clear_all')}">🗑️</button>
<input type="file" id="inp-import-file" accept=".json" style="display:none">
</div>
</div>
<div class="acc-set-group">
<div class="acc-set-title">${Utils.t('nav_about')}</div>
<button class="acc-btn acc-btn-light" id="go-about" style="width:100%">${Utils.t('nav_about')}</button>
</div>
<div style="text-align: center; margin-top: 20px;">
<span class="acc-link-btn" id="go-notice">${Utils.t('notice_title')}</span>
</div>
</div>
</div>
<div class="acc-tab-content" id="pg-about">
<div style="margin-bottom: 5px; font-weight: bold; color: #2196F3; cursor: pointer;" class="back-to-set-btn">${Utils.t('back')}</div>
<div class="acc-scroll-area">
<div class="acc-about-content">
<div class="acc-about-header">
<div class="acc-about-logo">👥</div>
<div class="acc-about-name">${CONST.META.NAME}</div>
<div class="acc-about-ver">Version ${CONST.META.VERSION}</div>
<div style="margin:3px 0; color:#666;">${Utils.t('about_desc')}</div>
</div>
<div class="acc-about-item"><span class="acc-about-label">Author</span><span>${CONST.META.AUTHOR}</span></div>
<div class="acc-about-item"><span class="acc-about-label">License</span><span>MIT</span></div>
<div class="acc-about-item"><span class="acc-about-label">Github</span><a href="${CONST.META.LINKS.PROJECT}" target="_blank" style="color:#2196F3">View Repo</a></div>
<div style="text-align:center;margin-top:20px;">
<a href="${CONST.META.LINKS.DONATE}" target="_blank" class="acc-btn acc-btn-blue" style="text-decoration:none; display:inline-flex; width:80%;">☕ ${Utils.t('donate')}</a>
</div>
</div>
</div>
</div>
<div class="acc-tab-content" id="pg-notice">
<div style="margin-bottom: 5px; font-weight: bold; color: #2196F3; cursor: pointer;" class="back-to-set-btn">${Utils.t('back')}</div>
<div class="acc-scroll-area"><div class="acc-notice-content">${Utils.t('notice_content')}</div></div>
</div>
<div class="acc-tabs-footer">
<div class="acc-tab-btn active" data-pg="pg-switch" data-title="${Utils.t('nav_switch')}"><span>🔃</span>${Utils.t('nav_switch')}</div>
<div class="acc-tab-btn" data-pg="pg-mgr" data-title="${Utils.t('nav_mgr')}"><span>👥</span>${Utils.t('nav_mgr')}</div>
<div class="acc-tab-btn" data-pg="pg-set" data-title="${Utils.t('nav_set')}"><span>⚙️</span>${Utils.t('nav_set')}</div>
</div>
`},
switchCard: (key, data) => `
<div class="acc-switch-card" data-key="${key}">
<span class="acc-card-name">👤 ${Utils.extractName(key)}</span>
<div class="acc-card-meta">
<span class="acc-mini-tag">🕒 ${data.time || 'N/A'}</span>
${(data.cookies?.length || 0) ? `<span class="acc-mini-tag acc-click-tag" data-type="cookies">${Utils.t('tag_ck')}: ${data.cookies.length}</span>` : ''}
${Object.keys(data.localStorage || {}).length ? `<span class="acc-mini-tag acc-click-tag" data-type="localStorage">${Utils.t('tag_ls')}: ${Object.keys(data.localStorage).length}</span>` : ''}
${Object.keys(data.sessionStorage || {}).length ? `<span class="acc-mini-tag acc-click-tag" data-type="sessionStorage">${Utils.t('tag_ss')}: ${Object.keys(data.sessionStorage).length}</span>` : ''}
</div>
</div>
`,
mgrItem: (key) => `
<div class="acc-mgr-item" draggable="true">
<span class="acc-mgr-handle">☰</span>
<input type="text" class="acc-mgr-input" value="${Utils.extractName(key)}" data-key="${key}">
<span class="acc-btn-del" data-key="${key}">×</span>
</div>
`,
noData: () => `<div style="text-align:center;color:#ccc;margin-top:100px;font-size:13px;">${Utils.t('no_data')}</div>`
};
const UI = {
// --- Custom Dialog System ---
async alert(msg) { return this.showDialog(msg, false); },
async confirm(msg) { return this.showDialog(msg, true); },
showDialog(msg, isConfirm) {
return new Promise(resolve => {
if (!dialogMask) {
dialogMask = document.createElement('div'); dialogMask.className = 'acc-dialog-mask';
document.body.appendChild(dialogMask);
}
dialogMask.innerHTML = `
<div class="acc-dialog-box">
<div class="acc-dialog-msg">${msg}</div>
<div class="acc-dialog-footer">
${isConfirm ? `<button class="acc-dialog-btn acc-dialog-btn-cancel" id="acc-dlg-cancel">${Utils.t('dlg_cancel')}</button>` : ''}
<button class="acc-dialog-btn acc-dialog-btn-ok" id="acc-dlg-ok">${Utils.t('dlg_ok')}</button>
</div>
</div>
`;
dialogMask.style.display = 'flex';
const okBtn = dialogMask.querySelector('#acc-dlg-ok');
const cancelBtn = dialogMask.querySelector('#acc-dlg-cancel');
const close = (res) => { dialogMask.style.display = 'none'; resolve(res); };
okBtn.onclick = () => close(true);
if (cancelBtn) cancelBtn.onclick = () => close(false);
});
},
initDraggable() {
const container = document.getElementById('mgr-list-area');
if (!container) return;
let draggingEle = null;
const onDragStart = (e) => { draggingEle = e.target.closest('.acc-mgr-item'); if (draggingEle) draggingEle.classList.add('dragging'); };
const onDragEnd = (e) => {
if (draggingEle) {
draggingEle.classList.remove('dragging'); draggingEle = null;
const items = [...container.querySelectorAll('.acc-mgr-input')];
const newOrder = items.map(input => Utils.extractName(input.dataset.key));
Core.updateOrder(currentViewingHost, newOrder);
UI.renderSwitchView();
}
};
const onDragOver = (e) => {
e.preventDefault();
const afterElement = getDragAfterElement(container, e.clientY);
if (afterElement == null) container.appendChild(draggingEle); else container.insertBefore(draggingEle, afterElement);
};
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.acc-mgr-item:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) return { offset: offset, element: child }; else return closest;
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
container.removeEventListener('dragstart', container._ds); container.removeEventListener('dragend', container._de); container.removeEventListener('dragover', container._do);
container._ds = onDragStart; container._de = onDragEnd; container._do = onDragOver;
container.addEventListener('dragstart', onDragStart); container.addEventListener('dragend', onDragEnd); container.addEventListener('dragover', onDragOver);
},
renderSwitchView() {
const currentKeys = Utils.getSortedKeysByHost(CONST.HOST);
const switchArea = document.getElementById('switch-area');
if (!switchArea) return;
switchArea.innerHTML = currentKeys.length === 0 ? Templates.noData() : currentKeys.map(k => Templates.switchCard(k, GM_getValue(k))).join('');
},
renderMgrView() {
const mgrList = document.getElementById('mgr-list-area');
if (!mgrList) return;
const viewingKeys = Utils.getSortedKeysByHost(currentViewingHost);
mgrList.innerHTML = viewingKeys.map(k => Templates.mgrItem(k)).join('');
this.initDraggable();
mgrList.querySelectorAll('.acc-mgr-input').forEach(i => {
const row = i.closest('.acc-mgr-item');
i.onmouseenter = () => { if(row) row.setAttribute('draggable', 'false'); };
i.onmouseleave = () => { if(row) row.setAttribute('draggable', 'true'); };
i.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); i.blur(); } };
i.onblur = () => {
const val = i.value.trim();
if (val && val !== Utils.extractName(i.dataset.key)) { Core.renameAccount(i.dataset.key, val, currentViewingHost); UI.refresh(); }
};
});
},
refresh() {
if (!fab || !panel) return;
this.renderSwitchView();
const hosts = Utils.listAllHosts();
if (!hosts.includes(CONST.HOST)) hosts.push(CONST.HOST);
const hostSel = document.getElementById('host-sel');
if (hostSel) hostSel.innerHTML = hosts.map(h => `<option value="${h}" ${h === currentViewingHost ? 'selected' : ''}>${h === CONST.HOST ? '📌 ' : '🌐 '}${h}</option>`).join('');
this.renderMgrView();
const fixedAct = document.getElementById('mgr-fixed-actions');
if (fixedAct) fixedAct.style.display = (currentViewingHost === CONST.HOST) ? 'block' : 'none';
const fabMode = GM_getValue(CONST.CFG.FAB_MODE, 'auto');
const hasAccounts = Utils.getSortedKeysByHost(CONST.HOST).length > 0;
const isPanelOpen = panel.classList.contains('show');
panel.querySelectorAll('.fab-mode-btn').forEach(btn => btn.classList.toggle('acc-btn-active', btn.dataset.val === fabMode));
fab.style.display = (isPanelOpen || isForcedShow || (fabMode === 'show') || (fabMode === 'auto' && hasAccounts)) ? 'flex' : 'none';
},
syncPanelPos() {
if (!fab || !panel) return;
const r = fab.getBoundingClientRect();
panel.style.bottom = (window.innerHeight - r.top + 10) + 'px';
panel.style.left = Math.max(10, r.left - 290) + 'px';
},
closePanel() {
panel.classList.remove('show'); isForcedShow = false; UI.refresh();
},
createFab() {
if (document.getElementById('acc-mgr-fab')) { fab = document.getElementById('acc-mgr-fab'); return; }
fab = document.createElement('div'); fab.id = 'acc-mgr-fab'; fab.innerHTML = '👤'; document.body.appendChild(fab);
const savedPos = GM_getValue(CONST.CFG.FAB_POS);
if (savedPos && savedPos.left !== undefined) {
fab.style.left = Math.max(0, Math.min(savedPos.left, window.innerWidth - 44)) + 'px';
fab.style.top = Math.max(0, Math.min(savedPos.top, window.innerHeight - 44)) + 'px';
fab.style.bottom = 'auto'; fab.style.right = 'auto';
}
let isDrag = false;
fab.onmousedown = (e) => {
isDrag = false; let sx=e.clientX, sy=e.clientY, bx=fab.offsetLeft, by=fab.offsetTop;
const mv=(ev)=>{
isDrag=true;
let nl = Math.max(0, Math.min(bx + ev.clientX - sx, window.innerWidth - 44));
let nt = Math.max(0, Math.min(by + ev.clientY - sy, window.innerHeight - 44));
fab.style.left= nl + 'px'; fab.style.top= nt + 'px'; fab.style.bottom='auto'; fab.style.right='auto';
if(panel && panel.classList.contains('show')) UI.syncPanelPos();
};
const up=()=>{ document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up); if (isDrag) GM_setValue(CONST.CFG.FAB_POS, { left: parseInt(fab.style.left), top: parseInt(fab.style.top) }); };
document.addEventListener('mousemove', mv); document.addEventListener('mouseup', up);
};
fab.onclick = (e) => { if(!isDrag && panel) { e.stopPropagation(); if(panel.classList.toggle('show')) UI.syncPanelPos(); else isForcedShow = false; UI.refresh(); } };
},
createPanel() {
if (document.getElementById('acc-mgr-panel')) return;
panel = document.createElement('div'); panel.id = 'acc-mgr-panel'; panel.className = 'acc-panel';
panel.innerHTML = Templates.panel();
document.body.appendChild(panel);
this.bindPanelEvents(); this.updateSaveBtnState();
},
updateSaveBtnState() {
const ck = document.getElementById('c-ck').checked, ls = document.getElementById('c-ls').checked, ss = document.getElementById('c-ss').checked;
const saveBtn = document.getElementById('do-save');
const isAnyChecked = ck || ls || ss;
saveBtn.disabled = !isAnyChecked; saveBtn.style.opacity = isAnyChecked ? "1" : "0.5"; saveBtn.style.cursor = isAnyChecked ? "pointer" : "not-allowed";
},
bindPanelEvents() {
// Tab switching
panel.querySelectorAll('.acc-tab-btn').forEach(b => b.onclick = () => {
panel.querySelectorAll('.acc-tab-btn, .acc-tab-content').forEach(el => el.classList.remove('active'));
b.classList.add('active');
document.getElementById(b.dataset.pg).classList.add('active');
document.getElementById('acc-header-text').innerText = b.dataset.title;
});
// Close
document.getElementById('acc-close-btn').onclick = this.closePanel;
panel.onclick = (e) => e.stopPropagation();
// Settings: Fab Mode & Language
panel.querySelectorAll('.fab-mode-btn').forEach(btn => btn.onclick = () => { GM_setValue(CONST.CFG.FAB_MODE, btn.dataset.val); this.refresh(); });
document.getElementById('lang-sel').onchange = (e) => {
currentLang = e.target.value; GM_setValue(CONST.CFG.LANG, currentLang);
document.body.removeChild(panel); UI.init();
if (document.getElementById('acc-mgr-panel')) { const newPanel = document.getElementById('acc-mgr-panel'); newPanel.classList.add('show'); UI.syncPanelPos(); }
};
// Switch View Logic
document.getElementById('switch-area').onclick = (e) => {
const tag = e.target.closest('.acc-click-tag');
if (tag) { e.stopPropagation(); const card = tag.closest('.acc-switch-card'); Core.inspectData(card.dataset.key, tag.dataset.type); return; }
const card = e.target.closest('.acc-switch-card');
if (card) Core.loadAccount(card.dataset.key);
};
// Manager View Logic
document.getElementById('mgr-list-area').onclick = async (e) => {
if (e.target.classList.contains('acc-btn-del')) {
e.stopPropagation();
const key = e.target.dataset.key;
Core.deleteAccount(key, currentViewingHost);
this.refresh();
}
};
document.getElementById('host-sel').onchange = (e) => { currentViewingHost = e.target.value; this.refresh(); };
// Save & Clean Logic (Async Dialogs)
['c-ck', 'c-ls', 'c-ss'].forEach(id => document.getElementById(id).addEventListener('change', this.updateSaveBtnState));
document.getElementById('do-save').onclick = async () => {
const nameInp = document.getElementById('acc-new-name');
const name = nameInp.value.trim();
if (!name) return;
await Core.saveAccount(name, { ck: document.getElementById('c-ck').checked, ls: document.getElementById('c-ls').checked, ss: document.getElementById('c-ss').checked });
nameInp.value = ""; this.refresh();
};
document.getElementById('do-clean').onclick = async () => { if(await UI.confirm(Utils.t('confirm_clean'))) Core.cleanEnvironment(); };
// Backup & Restore Actions
document.getElementById('btn-export-curr').onclick = () => Core.exportData('current');
document.getElementById('btn-export-all').onclick = () => Core.exportData('all');
document.getElementById('btn-import-trigger').onclick = () => document.getElementById('inp-import-file').click();
document.getElementById('inp-import-file').onchange = (e) => { if(e.target.files.length) Core.importData(e.target.files[0]); e.target.value = ''; };
document.getElementById('btn-clear-all').onclick = async () => {
if (await UI.confirm(Utils.t('confirm_clear_all'))) { Core.clearAllData(); this.refresh(); }
};
// Sub-pages Navigation (Notice & About)
const showSubPage = (pageId, titleKey) => {
panel.querySelectorAll('.acc-tab-content').forEach(el => el.classList.remove('active'));
document.getElementById(pageId).classList.add('active');
document.getElementById('acc-header-text').innerText = Utils.t(titleKey);
};
const backToSet = () => {
panel.querySelectorAll('.acc-tab-content').forEach(el => el.classList.remove('active'));
document.getElementById('pg-set').classList.add('active');
document.getElementById('acc-header-text').innerText = Utils.t('nav_set');
};
document.getElementById('go-notice').onclick = () => showSubPage('pg-notice', 'nav_notice');
document.getElementById('go-about').onclick = () => showSubPage('pg-about', 'nav_about');
panel.querySelectorAll('.back-to-set-btn').forEach(btn => btn.onclick = backToSet);
},
init() { this.createFab(); this.createPanel(); this.refresh(); }
};
// ========================================================================
// 5. Initialization
// ========================================================================
GM_addStyle(STYLE_CSS);
const start = () => {
if (document.body) {
UI.init();
new MutationObserver(() => { if (!document.getElementById('acc-mgr-fab')) UI.init(); }).observe(document.body, { childList: true });
} else { setTimeout(start, 200); }
};
window.addEventListener('resize', () => {
if (fab && fab.style.left) {
fab.style.left = Math.min(Math.max(0, parseFloat(fab.style.left)), window.innerWidth - 44) + 'px';
fab.style.top = Math.min(Math.max(0, parseFloat(fab.style.top)), window.innerHeight - 44) + 'px';
if (panel && panel.classList.contains('show')) UI.syncPanelPos();
}
});
document.addEventListener('click', (e) => {
if (panel && panel.classList.contains('show') && !panel.contains(e.target) && e.target !== fab && !e.target.closest('.acc-dialog-mask')) UI.closePanel();
});
GM_registerMenuCommand(Utils.t('menu_open'), () => {
isForcedShow = true; UI.init();
if (fab) fab.style.display = 'flex';
if (panel && !panel.classList.contains('show')) { panel.classList.add('show'); UI.syncPanelPos(); }
UI.refresh();
});
if (document.readyState === 'complete' || document.readyState === 'interactive') start();
else window.addEventListener('DOMContentLoaded', start);
})();