thesymbian.net collector's extension. Enables selecting collected devices, stores the selection locally and adds a button for generating and printing selected devices list.

thesymbian.net.js

// 1. Use JavaScript injection extension for your browser (good one for Chrome: https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld)
// 2. Open thesymbian.net. Copy and paste the entire code in this gist into the extension's javascript code injection area.
// 3. Refresh page.

(function () {
    // Function to get data from local storage
    function getSelectedPhones() {
        return JSON.parse(localStorage.getItem('selectedPhones') || '[]');
    }

    // Function to save data to local storage
    function saveSelectedPhones(phones) {
        localStorage.setItem('selectedPhones', JSON.stringify(phones));
    }

     // Function to load checkboxes based on local storage
    function loadCheckboxes() {
        const selectedPhones = getSelectedPhones();
        document.querySelectorAll('.phone-checkbox').forEach((checkbox) => {
            if (selectedPhones.includes(checkbox.dataset.phone)) {
                checkbox.checked = true;
            }
        });
    }

    // Add checkboxes to the parent div of each devdesc
    function addCheckboxes() {
        document.querySelectorAll('.devdesc').forEach((devdescElement) => {
            const phoneName = devdescElement.innerText.trim();

            // Ensure the parent div exists
            const parentDiv = devdescElement.parentElement;
            if (!parentDiv || parentDiv.tagName.toLowerCase() !== 'div') return;
            if (phoneName == "") return;

            // Create a checkbox element
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.className = 'phone-checkbox';
            checkbox.dataset.phone = phoneName;

            // Style the checkbox to double its size
            checkbox.style.width = '18px';
            checkbox.style.height = '18px';
            checkbox.style.marginRight = '10px';

            // Event listener to handle checkbox state changes
            checkbox.addEventListener('change', () => {
                const selectedPhones = getSelectedPhones();
                if (checkbox.checked) {
                    if (!selectedPhones.includes(phoneName)) {
                        selectedPhones.push(phoneName);
                    }
                } else {
                    const index = selectedPhones.indexOf(phoneName);
                    if (index > -1) {
                        selectedPhones.splice(index, 1);
                    }
                }
                saveSelectedPhones(selectedPhones);
            });

            // Prepend the checkbox to the parent div
            parentDiv.insertBefore(checkbox, parentDiv.firstChild);
        });
    }

    // Add a floating button
    function addFloatingButton() {
        const button = document.createElement('button');
        button.textContent = 'Generate List & Print';
        button.style.position = 'fixed';
        button.style.bottom = '20px';
        button.style.right = '20px';
        button.style.padding = '10px 20px';
        button.style.backgroundColor = '#007bff';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.zIndex = 1000;

        button.addEventListener('click', () => {
            const selectedPhones = getSelectedPhones();
            if (selectedPhones.length === 0) {
                alert('No phones selected!');
                return;
            }

            // Create a printable list
            const printContent = `
                <h2>Collected Symbian Devices:</h2>
                <ul>
                    ${selectedPhones.map(phone => `<li>${phone}</li>`).join('')}
                </ul>
                <hr>
                <p>Total Collected: ${selectedPhones.length}</p>
            `;
            const printWindow = window.open('', '_blank');
            printWindow.document.open();
            printWindow.document.write(`
                <html>
                    <head>
                        <title>Collected Symbian Devices</title>
                    </head>
                    <body>
                        ${printContent}
                    </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.print();
        });

        document.body.appendChild(button);
    }

    // Execute the functions
    const interval = setInterval(() => {
        if (document.readyState === 'complete') {
            clearInterval(interval); // Stop checking once the document is ready
            addCheckboxes();
            loadCheckboxes();
            addFloatingButton();
        }
    }, 100); // Check every 100ms
})();