Initial commit: popup.js
This commit is contained in:
233
popup.js
Normal file
233
popup.js
Normal file
@@ -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 = `
|
||||||
|
<div class="empty-state">
|
||||||
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||||
|
<line x1="9" y1="9" x2="15" y2="15"></line>
|
||||||
|
<line x1="15" y1="9" x2="9" y2="15"></line>
|
||||||
|
</svg>
|
||||||
|
<span>暂无账号配置，点击上方 "+" 添加</span>
|
||||||
|
</div>`;
|
||||||
|
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 = `
|
||||||
|
<div class="drag-handle" title="拖拽排序">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9h8M8 15h8" /></svg>
|
||||||
|
</div>
|
||||||
|
<div class="rule-info">
|
||||||
|
<div class="rule-domain" title="${rule.clientName}">
|
||||||
|
${rule.clientName}
|
||||||
|
<span class="rule-env">${rule.env}</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-acc" title="${rule.username}">帐号: ${rule.username}</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-actions">
|
||||||
|
<button class="icon-btn btn-execute" data-id="${rule.id}" title="清理数据并自动登录">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="icon-btn btn-delete" data-id="${rule.id}" title="删除此配置">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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 = `<svg class="loading" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/></svg>`;
|
||||||
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user