content.js

// Table to CSV Content Script
class TableToCSVExporter {
    constructor() {
        this.isSelectionMode = false;
        this.currentHighlight = null;
        this.setupMessageListener();
        
        // Add ready indicator
        console.log('TableToCSVExporter initialized');
    }
    
    setupMessageListener() {
        chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
            console.log('Content script received message:', request);
            
            if (request.action === 'startTableSelection') {
                this.startTableSelection();
                sendResponse({success: true});
            } else if (request.action === 'exportAllTables') {
                this.exportAllTables().then(result => {
                    sendResponse(result);
                }).catch(error => {
                    console.error('Error in exportAllTables:', error);
                    sendResponse({success: false, error: error.message});
                });
                return true; // Keep message channel open for async response
            }
        });
    }
    
    startTableSelection() {
        this.isSelectionMode = true;
        document.body.classList.add('table-csv-selection-active');
        
        // Add hover effects
        document.addEventListener('mouseover', this.handleMouseOver.bind(this));
        document.addEventListener('mouseout', this.handleMouseOut.bind(this));
        document.addEventListener('click', this.handleClick.bind(this));
        
        // Add escape key to exit selection mode
        document.addEventListener('keydown', this.handleKeyDown.bind(this));
        
        this.showNotification('Table selection mode active. Click on a table to export it as CSV. Press ESC to cancel.');
    }
    
    stopTableSelection() {
        this.isSelectionMode = false;
        document.body.classList.remove('table-csv-selection-active');
        
        // Remove event listeners
        document.removeEventListener('mouseover', this.handleMouseOver.bind(this));
        document.removeEventListener('mouseout', this.handleMouseOut.bind(this));
        document.removeEventListener('click', this.handleClick.bind(this));
        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
        
        // Remove any current highlight
        this.removeHighlight();
    }
    
    handleMouseOver(event) {
        if (!this.isSelectionMode) return;
        
        // Check for both regular tables and Angular Material tables
        const table = event.target.closest('table') || event.target.closest('mat-table');
        if (table && table !== this.currentHighlight) {
            this.removeHighlight();
            this.highlightTable(table);
        }
    }
    
    handleMouseOut(event) {
        if (!this.isSelectionMode) return;
        
        const table = event.target.closest('table') || event.target.closest('mat-table');
        if (table && !table.contains(event.relatedTarget)) {
            this.removeHighlight();
        }
    }
    
    handleClick(event) {
        if (!this.isSelectionMode) return;
        
        const table = event.target.closest('table') || event.target.closest('mat-table');
        if (table) {
            event.preventDefault();
            event.stopPropagation();
            
            this.exportTable(table);
            this.stopTableSelection();
        }
    }
    
    handleKeyDown(event) {
        if (this.isSelectionMode && event.key === 'Escape') {
            this.stopTableSelection();
            this.showNotification('Table selection cancelled.');
        }
    }
    
    highlightTable(table) {
        this.currentHighlight = table;
        table.classList.add('table-csv-highlight');
    }
    
    removeHighlight() {
        if (this.currentHighlight) {
            this.currentHighlight.classList.remove('table-csv-highlight');
            this.currentHighlight = null;
        }
    }
    
    async exportAllTables() {
        // Look for both regular tables and Angular Material tables
        const regularTables = document.querySelectorAll('table');
        const matTables = document.querySelectorAll('mat-table');
        const allTables = [...regularTables, ...matTables];
        
        let exportedCount = 0;
        
        console.log('Found', regularTables.length, 'regular tables and', matTables.length, 'Angular Material tables');
        
        for (let i = 0; i < allTables.length; i++) {
            const table = allTables[i];
            const csvData = this.tableToCSV(table);
            
            if (csvData.trim()) {
                const tableType = table.tagName.toLowerCase() === 'mat-table' ? 'mat' : 'html';
                const filename = `table_${tableType}_${i + 1}_${this.getPageTitle()}.csv`;
                try {
                    await this.downloadCSV(csvData, filename);
                    exportedCount++;
                    console.log('Exported', tableType, 'table', i + 1);
                } catch (error) {
                    console.error('Error downloading table', i + 1, ':', error);
                }
            }
        }
        
        if (exportedCount > 0) {
            this.showNotification(`Successfully exported ${exportedCount} table(s)! Check your Downloads folder.`);
        }
        
        return {
            success: true,
            count: exportedCount
        };
    }
    
    async exportTable(table) {
        try {
            const csvData = this.tableToCSV(table);
            
            if (!csvData.trim()) {
                this.showNotification('Error: Table appears to be empty or could not be processed.');
                return;
            }
            
            const filename = `table_${this.getPageTitle()}.csv`;
            
            console.log('Exporting table with', csvData.split('\n').length, 'rows');
            
            await this.downloadCSV(csvData, filename);
            
            this.showNotification('Table exported successfully! Check your Downloads folder.');
            
            // Notify popup
            try {
                chrome.runtime.sendMessage({
                    action: 'tableExported'
                });
            } catch (e) {
                // Popup might be closed, which is fine
                console.log('Could not notify popup (probably closed)');
            }
            
        } catch (error) {
            console.error('Error exporting table:', error);
            this.showNotification('Error exporting table: ' + error.message);
            
            try {
                chrome.runtime.sendMessage({
                    action: 'exportError'
                });
            } catch (e) {
                // Popup might be closed, which is fine
                console.log('Could not notify popup (probably closed)');
            }
        }
    }
    
    tableToCSV(table) {
        const rows = [];
        let tableRows;
        
        // Determine table type and get rows accordingly
        if (table.tagName.toLowerCase() === 'mat-table') {
            // Angular Material table
            tableRows = this.getMatTableRows(table);
        } else {
            // Regular HTML table
            tableRows = table.querySelectorAll('tr');
        }
        
        for (let i = 0; i < tableRows.length; i++) {
            const row = tableRows[i];
            const cells = this.getTableCells(row, table.tagName.toLowerCase() === 'mat-table');
            const csvRow = [];
            
            for (let j = 0; j < cells.length; j++) {
                const cell = cells[j];
                let cellText = cell.textContent || cell.innerText || '';
                
                // Clean up the text
                cellText = cellText.trim();
                cellText = cellText.replace(/\s+/g, ' '); // Replace multiple spaces with single space
                
                // Handle CSV escaping
                if (cellText.includes(',') || cellText.includes('"') || cellText.includes('\n')) {
                    cellText = '"' + cellText.replace(/"/g, '""') + '"';
                }
                
                csvRow.push(cellText);
            }
            
            if (csvRow.length > 0) {
                rows.push(csvRow.join(','));
            }
        }
        
        return rows.join('\n');
    }
    
    getMatTableRows(matTable) {
        const rows = [];
        
        // Get header row
        const headerRow = matTable.querySelector('mat-header-row');
        if (headerRow) {
            rows.push(headerRow);
        }
        
        // Get data rows
        const dataRows = matTable.querySelectorAll('mat-row');
        for (let i = 0; i < dataRows.length; i++) {
            rows.push(dataRows[i]);
        }
        
        return rows;
    }
    
    getTableCells(row, isMatTable) {
        if (isMatTable) {
            // Angular Material cells
            const headerCells = row.querySelectorAll('mat-header-cell');
            const dataCells = row.querySelectorAll('mat-cell');
            
            // Return header cells if available, otherwise data cells
            return headerCells.length > 0 ? headerCells : dataCells;
        } else {
            // Regular HTML table cells
            return row.querySelectorAll('td, th');
        }
    }
    
    downloadCSV(csvData, filename) {
        return new Promise((resolve, reject) => {
            console.log('Sending download request for:', filename);
            
            chrome.runtime.sendMessage({
                action: 'downloadCSV',
                csvData: csvData,
                filename: filename
            }, (response) => {
                if (chrome.runtime.lastError) {
                    console.error('Chrome runtime error:', chrome.runtime.lastError);
                    reject(new Error(chrome.runtime.lastError.message));
                } else if (response && response.success) {
                    console.log('Download successful:', response);
                    resolve(response);
                } else {
                    const errorMsg = response ? response.error : 'Unknown download error';
                    console.error('Download failed:', errorMsg);
                    reject(new Error(errorMsg));
                }
            });
        });
    }
    
    getPageTitle() {
        const title = document.title || 'webpage';
        return title.replace(/[^a-zA-Z0-9]/g, '_').substring(0, 50);
    }
    
    showNotification(message) {
        // Create a temporary notification
        const notification = document.createElement('div');
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: #0078d4;
            color: white;
            padding: 12px 16px;
            border-radius: 6px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: 14px;
            z-index: 10000;
            max-width: 300px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        `;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }
}

// Initialize the exporter
let tableExporter;

// Make sure we don't initialize multiple times
if (!window.tableExporterInitialized) {
    tableExporter = new TableToCSVExporter();
    window.tableExporterInitialized = true;
    console.log('Table exporter ready');
}