feat: Enhance domain management and configuration in the extension
- 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.
This commit is contained in:
becarta
@@ -1,39 +1,204 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const saveButton = document.getElementById("save");
|
||||
const trustedInput = document.getElementById("trusted");
|
||||
const blockedInput = document.getElementById("blocked");
|
||||
// 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
|
||||
chrome.storage.local.get(["trustedDomains", "blockedDomains"], function (data) {
|
||||
if (data.trustedDomains) trustedInput.value = data.trustedDomains.join("\n");
|
||||
if (data.blockedDomains) blockedInput.value = data.blockedDomains.join("\n");
|
||||
});
|
||||
loadDomains();
|
||||
|
||||
// Save button event
|
||||
saveButton.addEventListener("click", function () {
|
||||
// Retrieve domains from input fields
|
||||
const trustedDomains = trustedInput.value.split("\n").map(d => d.trim()).filter(d => d);
|
||||
const blockedDomains = blockedInput.value.split("\n").map(d => d.trim()).filter(d => d);
|
||||
// Add domain buttons
|
||||
if (addTrustedBtn) {
|
||||
addTrustedBtn.addEventListener("click", () => openAddModal('trusted'));
|
||||
}
|
||||
if (addBlockedBtn) {
|
||||
addBlockedBtn.addEventListener("click", () => openAddModal('blocked'));
|
||||
}
|
||||
|
||||
// Save to Chrome storage
|
||||
chrome.storage.local.set({ trustedDomains, blockedDomains }, function () {
|
||||
showPopup("✅ Changes saved successfully!");
|
||||
});
|
||||
});
|
||||
// Modal buttons
|
||||
if (saveDomainBtn) {
|
||||
saveDomainBtn.addEventListener("click", saveDomain);
|
||||
}
|
||||
if (cancelDomainBtn) {
|
||||
cancelDomainBtn.addEventListener("click", closeModal);
|
||||
}
|
||||
|
||||
// Function to show styled popup message
|
||||
function showPopup(message) {
|
||||
const popup = document.getElementById("popupMessage");
|
||||
const popupText = document.getElementById("popupText");
|
||||
const popupClose = document.getElementById("popupClose");
|
||||
// Search functionality
|
||||
if (trustedSearch) {
|
||||
trustedSearch.addEventListener("input", (e) => filterDomains('trusted', e.target.value));
|
||||
}
|
||||
if (blockedSearch) {
|
||||
blockedSearch.addEventListener("input", (e) => filterDomains('blocked', e.target.value));
|
||||
}
|
||||
|
||||
popupText.innerText = message;
|
||||
popup.classList.remove("hidden");
|
||||
popup.classList.add("visible");
|
||||
|
||||
popupClose.addEventListener("click", function () {
|
||||
popup.classList.remove("visible");
|
||||
popup.classList.add("hidden");
|
||||
// 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;
|
||||
});
|
||||
Reference in New Issue
Block a user