quality_recticel/py_app/chrome_extension/content.js

// Content script for Quality Recticel Print Helper
console.log('Quality Recticel Print Helper - Content script loaded');

// Check if we're on the print module page
if (window.location.pathname.includes('print_module')) {
  console.log('Print module page detected, initializing extension features');
  
  // Wait for DOM to be ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializePrintExtension);
  } else {
    initializePrintExtension();
  }
}

function initializePrintExtension() {
  console.log('Initializing print extension features');
  
  // Add extension status indicator
  addExtensionStatusIndicator();
  
  // Override the print button functionality
  overridePrintButton();
  
  // Add printer selection dropdown
  addPrinterSelection();
  
  // Check extension status
  checkExtensionStatus();
}

function addExtensionStatusIndicator() {
  // Create status indicator element
  const statusIndicator = document.createElement('div');
  statusIndicator.id = 'extension-status';
  statusIndicator.style.cssText = `
    position: fixed;
    top: 10px;
    right: 10px;
    background: #28a745;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  `;
  statusIndicator.textContent = '🖨️ Print Extension Active';
  
  document.body.appendChild(statusIndicator);
  
  // Hide after 3 seconds
  setTimeout(() => {
    statusIndicator.style.opacity = '0';
    statusIndicator.style.transition = 'opacity 0.5s';
    setTimeout(() => statusIndicator.remove(), 500);
  }, 3000);
}

function overridePrintButton() {
  // Find the print button
  const printButton = document.getElementById('print-label-btn');
  
  if (printButton) {
    console.log('Found print button, overriding functionality');
    
    // Remove existing event listeners by cloning the element
    const newPrintButton = printButton.cloneNode(true);
    printButton.parentNode.replaceChild(newPrintButton, printButton);
    
    // Add new event listener for extension printing
    newPrintButton.addEventListener('click', handleExtensionPrint);
    
    // Update button text to indicate direct printing
    newPrintButton.innerHTML = '🖨️ Print Direct';
    newPrintButton.title = 'Print directly to default printer (Chrome Extension)';
    
    console.log('Print button override complete');
  } else {
    console.log('Print button not found, will retry...');
    // Retry after 1 second if button not found yet
    setTimeout(overridePrintButton, 1000);
  }
}

function handleExtensionPrint(event) {
  event.preventDefault();
  event.stopPropagation();
  
  console.log('Extension print button clicked');
  
  // Get the label preview element
  const labelPreview = document.getElementById('label-preview');
  
  if (!labelPreview) {
    alert('Label preview not found. Please select an order first.');
    return;
  }
  
  // Show printing status
  showPrintStatus('Preparing to print...', 'info');
  
  // Create complete HTML for printing
  const printHTML = createPrintableHTML(labelPreview);
  
  // Try direct printing first, then fallback
  chrome.runtime.sendMessage({
    action: 'print_label',
    data: {
      html: printHTML,
      timestamp: Date.now()
    }
  }, (response) => {
    if (response && response.success) {
      handlePrintResponse(response);
    } else {
      console.log('Direct printing failed, trying fallback method');
      showPrintStatus('Direct printing unavailable, using browser print...', 'info');
      
      // Try fallback method
      chrome.runtime.sendMessage({
        action: 'fallback_print',
        data: {
          html: printHTML,
          timestamp: Date.now()
        }
      }, handlePrintResponse);
    }
  });
}

function createPrintableHTML(labelElement) {
  // Get the computed styles and create a complete HTML document
  const styles = `
    <style>
      body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
      .print-container { width: 210mm; height: 297mm; margin: 0 auto; }
      .label-wrapper { transform: scale(1); transform-origin: top left; }
    </style>
  `;
  
  const bodyContent = `
    <div class="print-container">
      <div class="label-wrapper">
        ${labelElement.outerHTML}
      </div>
    </div>
  `;
  
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Quality Recticel Label</title>
      ${styles}
    </head>
    <body>
      ${bodyContent}
    </body>
    </html>
  `;
}

function handlePrintResponse(response) {
  console.log('Print response:', response);
  
  if (response && response.success) {
    showPrintStatus('✅ Label sent to printer successfully!', 'success');
    
    // Update the order status in the table if possible
    updateOrderPrintStatus();
    
  } else {
    const errorMsg = response?.error || 'Unknown error occurred';
    showPrintStatus(`❌ Print failed: ${errorMsg}`, 'error');
    
    // Fallback to browser print dialog
    setTimeout(() => {
      if (confirm('Direct printing failed. Open browser print dialog?')) {
        window.print();
      }
    }, 2000);
  }
}

function showPrintStatus(message, type) {
  // Remove existing status messages
  const existingStatus = document.getElementById('print-status-message');
  if (existingStatus) {
    existingStatus.remove();
  }
  
  // Create status message
  const statusDiv = document.createElement('div');
  statusDiv.id = 'print-status-message';
  statusDiv.style.cssText = `
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#17a2b8'};
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    text-align: center;
    min-width: 300px;
  `;
  statusDiv.textContent = message;
  
  document.body.appendChild(statusDiv);
  
  // Auto-remove after 3 seconds for success/info, 5 seconds for errors
  const timeout = type === 'error' ? 5000 : 3000;
  setTimeout(() => {
    statusDiv.style.opacity = '0';
    statusDiv.style.transition = 'opacity 0.5s';
    setTimeout(() => statusDiv.remove(), 500);
  }, timeout);
}

function addPrinterSelection() {
  // Get available printers and add selection dropdown
  chrome.runtime.sendMessage({action: 'get_printers'}, (response) => {
    if (response && response.success && response.printers.length > 0) {
      console.log('Available printers:', response.printers);
      // Could add printer selection UI here if needed
    }
  });
}

function updateOrderPrintStatus() {
  // Find selected row in table and update print status
  const selectedRow = document.querySelector('.print-module-table tbody tr.selected');
  if (selectedRow) {
    const printStatusCell = selectedRow.querySelector('td:nth-last-child(2)'); // Second to last column
    if (printStatusCell) {
      printStatusCell.innerHTML = '<span style="color: #28a745; font-weight: bold;">✓ Yes</span>';
    }
  }
}

function checkExtensionStatus() {
  // Verify extension is working
  chrome.runtime.sendMessage({action: 'check_extension'}, (response) => {
    if (response) {
      console.log('Extension status:', response);
    } else {
      console.error('Extension communication failed');
    }
  });
}

// Add CSS for extension-specific styling
const extensionStyles = document.createElement('style');
extensionStyles.textContent = `
  #print-label-btn {
    background: linear-gradient(45deg, #28a745, #20c997) !important;
    border: none !important;
    transition: all 0.3s ease !important;
  }
  
  #print-label-btn:hover {
    background: linear-gradient(45deg, #218838, #1ea97c) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
  }
`;
document.head.appendChild(extensionStyles);