- Introduce default configuration settings for API key, domains database URL, update interval, and warning message template in background.js and options.js. - Update domains database URL to a new source for improved reliability. - Refactor domain management UI in domains_management.js to support adding, editing, and removing trusted and blocked domains with enhanced user experience. - Implement search functionality for filtering domains in the management interface. - Improve status messaging for user feedback during domain operations.
204 lines
7.5 KiB
JavaScript
204 lines
7.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
// Get UI elements
|
|
const addTrustedBtn = document.getElementById("addTrustedDomain");
|
|
const addBlockedBtn = document.getElementById("addBlockedDomain");
|
|
const domainModal = document.getElementById("domainModal");
|
|
const modalTitle = document.getElementById("modalTitle");
|
|
const domainNameInput = document.getElementById("domainName");
|
|
const domainTypeSelect = document.getElementById("domainType");
|
|
const saveDomainBtn = document.getElementById("saveDomain");
|
|
const cancelDomainBtn = document.getElementById("cancelDomain");
|
|
const trustedSearch = document.getElementById("trustedSearch");
|
|
const blockedSearch = document.getElementById("blockedSearch");
|
|
const trustedDomainsList = document.getElementById("trustedDomainsList");
|
|
const blockedDomainsList = document.getElementById("blockedDomainsList");
|
|
const statusMessage = document.getElementById("statusMessage");
|
|
|
|
let currentDomainType = 'trusted';
|
|
let editingDomain = null;
|
|
|
|
// Load saved domains
|
|
loadDomains();
|
|
|
|
// Add domain buttons
|
|
if (addTrustedBtn) {
|
|
addTrustedBtn.addEventListener("click", () => openAddModal('trusted'));
|
|
}
|
|
if (addBlockedBtn) {
|
|
addBlockedBtn.addEventListener("click", () => openAddModal('blocked'));
|
|
}
|
|
|
|
// Modal buttons
|
|
if (saveDomainBtn) {
|
|
saveDomainBtn.addEventListener("click", saveDomain);
|
|
}
|
|
if (cancelDomainBtn) {
|
|
cancelDomainBtn.addEventListener("click", closeModal);
|
|
}
|
|
|
|
// Search functionality
|
|
if (trustedSearch) {
|
|
trustedSearch.addEventListener("input", (e) => filterDomains('trusted', e.target.value));
|
|
}
|
|
if (blockedSearch) {
|
|
blockedSearch.addEventListener("input", (e) => filterDomains('blocked', e.target.value));
|
|
}
|
|
|
|
// Functions
|
|
function loadDomains() {
|
|
chrome.storage.local.get(["trustedDomains", "blockedDomains"], function (data) {
|
|
renderDomainList('trusted', data.trustedDomains || []);
|
|
renderDomainList('blocked', data.blockedDomains || []);
|
|
});
|
|
}
|
|
|
|
function renderDomainList(type, domains) {
|
|
const list = type === 'trusted' ? trustedDomainsList : blockedDomainsList;
|
|
if (!list) return;
|
|
|
|
list.innerHTML = '';
|
|
domains.forEach(domain => {
|
|
const item = createDomainItem(domain, type);
|
|
list.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function createDomainItem(domain, type) {
|
|
const div = document.createElement('div');
|
|
div.className = 'domain-item';
|
|
div.innerHTML = `
|
|
<div class="domain-info">
|
|
<span class="domain-name">${domain}</span>
|
|
<span class="domain-type">${type}</span>
|
|
</div>
|
|
<div class="domain-actions">
|
|
<button class="edit-btn" onclick="editDomain('${domain}', '${type}')">
|
|
<span>✏️</span>
|
|
<span>Edit</span>
|
|
</button>
|
|
<button class="remove-btn" onclick="removeDomain('${domain}', '${type}')">
|
|
<span>🗑️</span>
|
|
<span>Remove</span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
return div;
|
|
}
|
|
|
|
function openAddModal(type) {
|
|
currentDomainType = type;
|
|
editingDomain = null;
|
|
modalTitle.textContent = `Add ${type === 'trusted' ? 'Trusted' : 'Blocked'} Domain`;
|
|
domainNameInput.value = '';
|
|
domainTypeSelect.value = type;
|
|
domainModal.classList.add('active');
|
|
}
|
|
|
|
function closeModal() {
|
|
domainModal.classList.remove('active');
|
|
editingDomain = null;
|
|
}
|
|
|
|
function saveDomain() {
|
|
const domain = domainNameInput.value.trim();
|
|
if (!domain) {
|
|
showStatus('Please enter a domain name', 'error');
|
|
return;
|
|
}
|
|
|
|
chrome.storage.local.get(["trustedDomains", "blockedDomains"], function (data) {
|
|
const trustedDomains = data.trustedDomains || [];
|
|
const blockedDomains = data.blockedDomains || [];
|
|
const type = domainTypeSelect.value;
|
|
|
|
// Remove from both lists if editing
|
|
if (editingDomain) {
|
|
const oldType = currentDomainType;
|
|
if (oldType === 'trusted') {
|
|
const index = trustedDomains.indexOf(editingDomain);
|
|
if (index > -1) trustedDomains.splice(index, 1);
|
|
} else {
|
|
const index = blockedDomains.indexOf(editingDomain);
|
|
if (index > -1) blockedDomains.splice(index, 1);
|
|
}
|
|
}
|
|
|
|
// Add to appropriate list
|
|
if (type === 'trusted' && !trustedDomains.includes(domain)) {
|
|
trustedDomains.push(domain);
|
|
} else if (type === 'blocked' && !blockedDomains.includes(domain)) {
|
|
blockedDomains.push(domain);
|
|
}
|
|
|
|
// Save to storage
|
|
chrome.storage.local.set({
|
|
trustedDomains: trustedDomains,
|
|
blockedDomains: blockedDomains
|
|
}, function () {
|
|
loadDomains();
|
|
closeModal();
|
|
showStatus(`Domain ${editingDomain ? 'updated' : 'added'} successfully`, 'success');
|
|
});
|
|
});
|
|
}
|
|
|
|
function editDomain(domain, type) {
|
|
currentDomainType = type;
|
|
editingDomain = domain;
|
|
modalTitle.textContent = `Edit ${type === 'trusted' ? 'Trusted' : 'Blocked'} Domain`;
|
|
domainNameInput.value = domain;
|
|
domainTypeSelect.value = type;
|
|
domainModal.classList.add('active');
|
|
}
|
|
|
|
function removeDomain(domain, type) {
|
|
if (confirm(`Are you sure you want to remove ${domain}?`)) {
|
|
chrome.storage.local.get(["trustedDomains", "blockedDomains"], function (data) {
|
|
const trustedDomains = data.trustedDomains || [];
|
|
const blockedDomains = data.blockedDomains || [];
|
|
|
|
if (type === 'trusted') {
|
|
const index = trustedDomains.indexOf(domain);
|
|
if (index > -1) trustedDomains.splice(index, 1);
|
|
} else {
|
|
const index = blockedDomains.indexOf(domain);
|
|
if (index > -1) blockedDomains.splice(index, 1);
|
|
}
|
|
|
|
chrome.storage.local.set({
|
|
trustedDomains: trustedDomains,
|
|
blockedDomains: blockedDomains
|
|
}, function () {
|
|
loadDomains();
|
|
showStatus('Domain removed successfully', 'success');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function filterDomains(type, searchTerm) {
|
|
const list = type === 'trusted' ? trustedDomainsList : blockedDomainsList;
|
|
if (!list) return;
|
|
|
|
const items = list.getElementsByClassName('domain-item');
|
|
searchTerm = searchTerm.toLowerCase();
|
|
|
|
Array.from(items).forEach(item => {
|
|
const domainName = item.querySelector('.domain-name').textContent.toLowerCase();
|
|
item.style.display = domainName.includes(searchTerm) ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
function showStatus(message, type) {
|
|
statusMessage.textContent = message;
|
|
statusMessage.className = `status-message ${type}`;
|
|
statusMessage.style.display = 'block';
|
|
setTimeout(() => {
|
|
statusMessage.style.display = 'none';
|
|
}, 3000);
|
|
}
|
|
|
|
// Make functions available globally for onclick handlers
|
|
window.editDomain = editDomain;
|
|
window.removeDomain = removeDomain;
|
|
}); |