diff --git a/popup.js b/popup.js new file mode 100644 index 0000000..12b59d8 --- /dev/null +++ b/popup.js @@ -0,0 +1,233 @@ +document.addEventListener('DOMContentLoaded', () => { + const addBtn = document.getElementById('add-btn'); + const addForm = document.getElementById('add-form'); + const cancelBtn = document.getElementById('cancel-btn'); + const saveBtn = document.getElementById('save-btn'); + + const envSelect = document.getElementById('env-select'); + const clientInput = document.getElementById('client-input'); + const usernameInput = document.getElementById('username-input'); + const passwordInput = document.getElementById('password-input'); + const rulesList = document.getElementById('rules-list'); + + const ENV_CONFIG = { + PP: { + domain: 'app135148.dingtalkoxm.com', + url: 'https://app135148.dingtalkoxm.com/user/login' + }, + ATS: { + domain: 'app135149.dingtalkoxm.com', + url: 'https://app135149.dingtalkoxm.com/login' + } + }; + + let rules = []; + let dragStartIndex = -1; + + // Load rules from chrome.storage + function loadRules() { + if (typeof chrome !== 'undefined' && chrome.storage) { + chrome.storage.local.get(['quickPurgeAccounts'], (result) => { + rules = result.quickPurgeAccounts || []; + renderRules(); + }); + } else { + renderRules(); + } + } + + function saveRules() { + if (typeof chrome !== 'undefined' && chrome.storage) { + chrome.storage.local.set({ quickPurgeAccounts: rules }, () => { + renderRules(); + }); + } else { + renderRules(); + } + } + + function toggleAddForm() { + addForm.classList.toggle('hidden'); + if (!addForm.classList.contains('hidden')) { + clientInput.focus(); + } + } + + addBtn.addEventListener('click', toggleAddForm); + + cancelBtn.addEventListener('click', () => { + addForm.classList.add('hidden'); + resetForm(); + }); + + function resetForm() { + envSelect.value = 'PP'; + clientInput.value = ''; + usernameInput.value = ''; + passwordInput.value = ''; + } + + saveBtn.addEventListener('click', () => { + const env = envSelect.value; + const clientName = clientInput.value.trim(); + const username = usernameInput.value.trim(); + const password = passwordInput.value; + + if (!clientName || !username || !password) { + alert('请填写完整的客户名称、账号和密码！'); + return; + } + + rules.push({ + id: Date.now().toString(), + env: env, + clientName: clientName, + username: username, + password: password + }); + + saveRules(); + addForm.classList.add('hidden'); + resetForm(); + }); + + function renderRules() { + rulesList.innerHTML = ''; + + if (rules.length === 0) { + rulesList.innerHTML = ` +
+ + + + + + 暂无账号配置，点击上方 "+" 添加 +
`; + return; + } + + rules.forEach((rule, index) => { + const li = document.createElement('li'); + li.className = 'rule-item'; + li.setAttribute('draggable', 'true'); + li.setAttribute('data-index', index.toString()); + + li.innerHTML = ` +
+ +
+
+
+ ${rule.clientName} + ${rule.env} +
+
帐号: ${rule.username}
+
+
+ + +
+ `; + + addDragEvents(li); + rulesList.appendChild(li); + }); + + document.querySelectorAll('.btn-delete').forEach(btn => { + btn.addEventListener('click', (e) => { + const id = e.currentTarget.getAttribute('data-id'); + rules = rules.filter(r => r.id !== id); + saveRules(); + }); + }); + + document.querySelectorAll('.btn-execute').forEach(btn => { + btn.addEventListener('click', (e) => { + const button = e.currentTarget; + const id = button.getAttribute('data-id'); + const rule = rules.find(r => r.id === id); + if (rule) { + executePurgeAndLogin(rule, button); + } + }); + }); + } + + // --- Drag and Drop functionality --- + function addDragEvents(item) { + item.addEventListener('dragstart', (e) => { + dragStartIndex = parseInt(e.currentTarget.getAttribute('data-index')); + e.currentTarget.classList.add('dragging'); + // Set empty ghost image + if (e.dataTransfer) { + e.dataTransfer.effectAllowed = 'move'; + // Need to set data to allow dragging in Firefox + e.dataTransfer.setData('text/plain', dragStartIndex); + } + }); + + item.addEventListener('dragend', (e) => { + e.currentTarget.classList.remove('dragging'); + }); + + item.addEventListener('dragover', (e) => { + e.preventDefault(); + // Allow drop + return false; + }); + + item.addEventListener('dragenter', (e) => { + e.preventDefault(); + }); + + item.addEventListener('drop', (e) => { + e.stopPropagation(); + const dragEndIndex = parseInt(e.currentTarget.closest('.rule-item').getAttribute('data-index')); + + if (dragStartIndex !== dragEndIndex) { + swapItems(dragStartIndex, dragEndIndex); + } + return false; + }); + } + + function swapItems(fromIndex, toIndex) { + // Array manipulation for drag sorting + const itemOne = rules[fromIndex]; + rules.splice(fromIndex, 1); + rules.splice(toIndex, 0, itemOne); + saveRules(); + } + + function executePurgeAndLogin(rule, buttonElement) { + const svg = buttonElement.querySelector('svg'); + const originalSvg = svg.outerHTML; + buttonElement.innerHTML = ``; + + if (typeof chrome !== 'undefined' && chrome.runtime) { + const config = ENV_CONFIG[rule.env]; + chrome.runtime.sendMessage({ + action: "purgeAndRedirect", + domain: config.domain, + targetUrl: config.url, + username: rule.username, + password: rule.password + }, (response) => { + // Will visually reset only if popup is somehow still open after redirect (unlikely as active tab changes) + buttonElement.innerHTML = originalSvg; + }); + } else { + setTimeout(() => { + console.log(`Mock: Purging ${rule.env} and filling ${rule.username}`); + buttonElement.innerHTML = originalSvg; + }, 1000); + } + } + + loadRules(); +});