Tampermonkey Gmail Filter Starterkit

// ==UserScript==
// @name         Gmail Filter Manager
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Enhanced Gmail Filter Management
// @match        https://mail.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    console.log('Gmail Filter Manager script started');

    function createElementSafe(tag, attributes = {}, children = []) {
        const element = document.createElement(tag);
        Object.entries(attributes).forEach(([key, value]) => {
            if (key === 'textContent') {
                element.textContent = value;
            } else {
                element.setAttribute(key, value);
            }
        });
        children.forEach(child => element.appendChild(child));
        return element;
    }

    function injectStyles() {
        console.log('Injecting styles');
        const style = createElementSafe('style', {
            textContent: `
                #customFilterManager {
                    margin-top: 20px;
                    padding: 20px;
                    border: 1px solid #ccc;
                    background-color: #f9f9f9;
                }
                .filter-item {
                    margin-bottom: 10px;
                    padding: 10px;
                    border: 1px solid #ddd;
                    background-color: #fff;
                }
                .filter-title {
                    font-weight: bold;
                    cursor: pointer;
                }
                .filter-content {
                    display: none;
                    margin-top: 10px;
                }
                .filter-content.expanded {
                    display: block;
                }
            `
        });
        document.head.appendChild(style);
    }

    function createFilterManager() {
        console.log('Creating filter manager');
        return createElementSafe('div', { id: 'customFilterManager' }, [
            createElementSafe('h2', { textContent: 'Custom Filter Manager' }),
            createElementSafe('div', { id: 'filterList' })
        ]);
    }

    function injectFilterManager() {
        console.log('Attempting to inject filter manager');
        const settingsContainer = document.querySelector('div[role="main"]');
        if (settingsContainer && !document.getElementById('customFilterManager')) {
            console.log('Injecting filter manager');
            settingsContainer.appendChild(createFilterManager());
            loadFilters();
        } else {
            console.log('Settings container not found or filter manager already exists');
        }
    }

    function loadFilters() {
        console.log('Loading filters');
        const dummyFilters = [
            { id: 1, name: 'Important emails', criteria: 'from:[email protected]' },
            { id: 2, name: 'Newsletters', criteria: 'subject:newsletter' }
        ];
        renderFilters(dummyFilters);
    }

    function renderFilters(filters) {
        console.log('Rendering filters');
        const filterList = document.getElementById('filterList');
        if (filterList) {
            const fragment = document.createDocumentFragment();
            filters.forEach(filter => {
                const filterItem = createElementSafe('div', { class: 'filter-item' }, [
                    createElementSafe('div', {
                        class: 'filter-title',
                        textContent: filter.name,
                        'data-id': filter.id
                    }),
                    createElementSafe('div', { id: `filter-content-${filter.id}`, class: 'filter-content' }, [
                        createElementSafe('p', { textContent: `Criteria: ${filter.criteria}` }),
                        createElementSafe('button', {
                            textContent: 'Edit',
                            class: 'edit-filter',
                            'data-id': filter.id
                        }),
                        createElementSafe('button', {
                            textContent: 'Delete',
                            class: 'delete-filter',
                            'data-id': filter.id
                        })
                    ])
                ]);
                fragment.appendChild(filterItem);
            });
            filterList.appendChild(fragment);
            attachEventListeners();
        } else {
            console.log('Filter list element not found');
        }
    }

    function attachEventListeners() {
        document.querySelectorAll('.filter-title').forEach(title => {
            title.addEventListener('click', () => toggleFilter(title.dataset.id));
        });
        document.querySelectorAll('.edit-filter').forEach(button => {
            button.addEventListener('click', () => editFilter(button.dataset.id));
        });
        document.querySelectorAll('.delete-filter').forEach(button => {
            button.addEventListener('click', () => deleteFilter(button.dataset.id));
        });
    }

    function toggleFilter(id) {
        console.log(`Toggling filter ${id}`);
        const content = document.getElementById(`filter-content-${id}`);
        if (content) {
            content.classList.toggle('expanded');
        }
    }

    function editFilter(id) {
        console.log(`Editing filter ${id}`);
        // Implement edit functionality
    }

    function deleteFilter(id) {
        console.log(`Deleting filter ${id}`);
        // Implement delete functionality
    }

    function isFilterPage() {
        const isFilterPage = window.location.hash.includes('#settings/filters');
        console.log(`Is filter page: ${isFilterPage}`);
        return isFilterPage;
    }

    function init() {
        console.log('Initializing script');
        if (isFilterPage()) {
            injectStyles();
            injectFilterManager();
        } else {
            console.log('Not on filter page, skipping injection');
        }
    }

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'href') {
                console.log('URL changed, reinitializing');
                init();
            }
        });
    });

    observer.observe(document.body, {
        attributes: true,
        childList: true,
        subtree: true
    });

    console.log('Setting up MutationObserver');

    // Run initialization when the DOM is fully loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();