Appearance
Functionality
Keyword Filter
`;
const modal = document.createElement('div');
modal.id = 'des-modal';
modal.className = 'des-modal';
modal.innerHTML = modalHTML;
document.body.appendChild(modal);
// --- Event Listeners & UI Logic ---
const themeSelect = modal.querySelector('#des-theme-select');
const squarifyToggle = modal.querySelector('#des-squarify-toggle');
const sidebarToggle = modal.querySelector('#des-sidebar-toggle');
const keywordInput = modal.querySelector('#des-keyword-input');
const addKeywordBtn = modal.querySelector('#des-add-keyword-btn');
const keywordListDiv = modal.querySelector('#des-keyword-list');
const renderKeywords = () => {
const keywords = GM_getValue('des_keywords', []);
keywordListDiv.innerHTML = '';
keywords.forEach(keyword => {
const tag = document.createElement('span');
tag.className = 'des-keyword-tag';
tag.textContent = keyword;
const removeBtn = document.createElement('button');
removeBtn.innerHTML = '×';
removeBtn.title = `Remove "${keyword}"`;
removeBtn.onclick = () => {
const currentKeywords = GM_getValue('des_keywords', []);
const newKeywords = currentKeywords.filter(k => k !== keyword);
GM_setValue('des_keywords', newKeywords);
renderKeywords();
};
tag.appendChild(removeBtn);
keywordListDiv.appendChild(tag);
});
};
const addKeyword = () => {
const newKeyword = keywordInput.value.trim();
if (newKeyword) {
const keywords = GM_getValue('des_keywords', []);
if (!keywords.includes(newKeyword)) {
keywords.push(newKeyword);
GM_setValue('des_keywords', keywords);
renderKeywords();
}
keywordInput.value = '';
}
};
addKeywordBtn.addEventListener('click', addKeyword);
keywordInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') addKeyword(); });
themeSelect.addEventListener('change', () => {
GM_setValue('des_theme', themeSelect.value);
applyFeatures();
});
squarifyToggle.addEventListener('change', () => {
GM_setValue('des_squarify', squarifyToggle.checked);
applyFeatures();
});
sidebarToggle.addEventListener('change', () => {
GM_setValue('des_sidebar', sidebarToggle.checked);
applyFeatures();
});
const openModal = () => {
themeSelect.value = GM_getValue('des_theme', 'light');
squarifyToggle.checked = GM_getValue('des_squarify', false);
sidebarToggle.checked = GM_getValue('des_sidebar', false);
renderKeywords();
modal.style.display = 'block';
};
const closeModal = () => {
applyKeywordFilter();
modal.style.display = 'none';
};
settingsCog.addEventListener('click', openModal);
modal.querySelector('.des-close-button').addEventListener('click', closeModal);
window.addEventListener('click', (event) => { if (event.target == modal) closeModal(); });
}
// --- 4. MAIN EXECUTION ---
function run() {
addSettingsUI();
applyFeatures();
applyKeywordFilter();
}
// Run on page load and observe for dynamic content changes
const observer = new MutationObserver(run);
observer.observe(document.body, { childList: true, subtree: true });
// A fallback run in case the observer is slow to fire
if (document.readyState === 'loading') {
window.addEventListener('DOMContentLoaded', run);
} else {
run();
}
})();