ideogram-handler.js

// Content script specifically for the Ideogram model page
// This handles receiving images and uploading them to the model

(function() {
  // Prevent multiple injections
  if (window.ideogramHandlerLoaded) return;
  window.ideogramHandlerLoaded = true;

  console.log('[Ideogram Ext] Handler loaded on:', window.location.href);

  // Listen for upload requests
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log('[Ideogram Ext] Received message:', message.action);
    
    if (message.action === 'uploadImage') {
      handleImageUpload(message.imageData, message.imageUrl, message.imageSrc)
        .then(result => {
          console.log('[Ideogram Ext] Upload result:', result);
          sendResponse(result);
        })
        .catch(error => {
          console.error('[Ideogram Ext] Upload error:', error);
          sendResponse({ success: false, error: error.message });
        });
      return true; // Keep channel open for async response
    }
    
    if (message.action === 'ping') {
      sendResponse({ success: true, message: 'Handler is ready' });
      return true;
    }
  });

  // Handle uploading an image to the model
  async function handleImageUpload(imageData, imageUrl, fallbackSrc) {
    console.log('[Ideogram Ext] Starting upload...', { hasImageData: !!imageData, imageUrl });
    
    try {
      let file;
      
      // If we received image data (base64), convert it to a file
      if (imageData) {
        console.log('[Ideogram Ext] Converting base64 to file...');
        const blob = base64ToBlob(imageData.data, imageData.type);
        const fileName = `image_${Date.now()}.${imageData.type.split('/')[1] || 'jpg'}`;
        file = new File([blob], fileName, { type: imageData.type });
        console.log('[Ideogram Ext] Created file:', fileName, 'size:', file.size);
      } else {
        // Try to fetch directly (might work for same-origin or CORS-enabled images)
        console.log('[Ideogram Ext] No image data, trying direct fetch...');
        const urlToFetch = imageUrl || fallbackSrc;
        
        try {
          const response = await fetch(urlToFetch, { mode: 'cors', credentials: 'omit' });
          if (!response.ok) throw new Error('Fetch failed: ' + response.status);
          const blob = await response.blob();
          const fileName = `image_${Date.now()}.${blob.type.split('/')[1] || 'jpg'}`;
          file = new File([blob], fileName, { type: blob.type });
        } catch (fetchError) {
          console.error('[Ideogram Ext] Direct fetch failed:', fetchError);
          // Fall back to copying URL to clipboard
          return copyUrlFallback(imageUrl || fallbackSrc);
        }
      }

      // Now try to upload the file
      const uploadResult = await uploadFileToIdeogram(file);
      return uploadResult;

    } catch (error) {
      console.error('[Ideogram Ext] Upload error:', error);
      return { success: false, error: error.message };
    }
  }

  // Convert base64 to blob
  function base64ToBlob(base64, mimeType) {
    const byteCharacters = atob(base64);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    return new Blob([byteArray], { type: mimeType });
  }

  // Upload file to Ideogram
  async function uploadFileToIdeogram(file) {
    console.log('[Ideogram Ext] Looking for upload mechanism...');
    
    // Method 1: Find file input
    const fileInput = findFileInput();
    if (fileInput) {
      console.log('[Ideogram Ext] Found file input:', fileInput);
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(file);
      fileInput.files = dataTransfer.files;
      
      // Dispatch multiple events to ensure React/Vue picks it up
      fileInput.dispatchEvent(new Event('change', { bubbles: true }));
      fileInput.dispatchEvent(new Event('input', { bubbles: true }));
      
      // Also try to trigger React's synthetic event
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'files').set;
      if (nativeInputValueSetter) {
        nativeInputValueSetter.call(fileInput, dataTransfer.files);
        fileInput.dispatchEvent(new Event('input', { bubbles: true }));
      }
      
      showNotification('Image added!', 'success');
      return { success: true, message: 'Image added to upload queue' };
    }

    // Method 2: Find drop zone and simulate drop
    const dropZone = findDropZone();
    if (dropZone) {
      console.log('[Ideogram Ext] Found drop zone:', dropZone);
      const success = simulateDrop(dropZone, file);
      if (success) {
        showNotification('Image dropped!', 'success');
        return { success: true, message: 'Image dropped on upload area' };
      }
    }

    // Method 3: Try to find and click an upload button
    const clickResult = await tryClickUpload(file);
    if (clickResult.success) {
      showNotification('Image uploaded!', 'success');
      return clickResult;
    }

    // Fallback: Copy URL
    console.log('[Ideogram Ext] No upload mechanism found, falling back to notification');
    showNotification('Could not auto-upload. Please drag the image manually.', 'info');
    return { success: false, error: 'No upload mechanism found. Try dragging the image manually.' };
  }

  // Find file input element
  function findFileInput() {
    const selectors = [
      'input[type="file"]',
      'input[accept*="image"]',
      'input[accept*=".png"]',
      'input[accept*=".jpg"]',
      '[data-testid*="file"]',
      '[data-testid*="upload"]'
    ];

    for (const selector of selectors) {
      const inputs = document.querySelectorAll(selector);
      for (const input of inputs) {
        // Prefer visible inputs
        const style = window.getComputedStyle(input);
        if (style.display !== 'none' || input.offsetParent !== null) {
          return input;
        }
      }
      // Return hidden one if that's all we have
      if (inputs.length > 0) return inputs[0];
    }

    return null;
  }

  // Find drop zone
  function findDropZone() {
    // Look for common drop zone patterns
    const selectors = [
      '[class*="dropzone"]',
      '[class*="drop-zone"]',
      '[class*="upload-area"]',
      '[class*="upload-zone"]',
      '[data-testid*="drop"]',
      '[data-testid*="upload"]'
    ];

    for (const selector of selectors) {
      const el = document.querySelector(selector);
      if (el) return el;
    }

    // Look for elements that mention "drop" or "drag" in their text
    const allElements = document.querySelectorAll('div, section, label');
    for (const el of allElements) {
      const text = el.textContent?.toLowerCase() || '';
      if ((text.includes('drop') || text.includes('drag')) && text.includes('image')) {
        return el;
      }
    }

    return null;
  }

  // Simulate drag and drop
  function simulateDrop(dropZone, file) {
    try {
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(file);

      // Create and dispatch drag events
      const events = ['dragenter', 'dragover', 'drop'];
      for (const eventType of events) {
        const event = new DragEvent(eventType, {
          bubbles: true,
          cancelable: true,
          dataTransfer: dataTransfer
        });
        dropZone.dispatchEvent(event);
      }
      return true;
    } catch (e) {
      console.error('[Ideogram Ext] Drop simulation failed:', e);
      return false;
    }
  }

  // Try to click upload button
  async function tryClickUpload(file) {
    const buttons = document.querySelectorAll('button, [role="button"], label');
    
    for (const btn of buttons) {
      const text = (btn.textContent || '').toLowerCase();
      const ariaLabel = (btn.getAttribute('aria-label') || '').toLowerCase();
      
      if (text.includes('upload') || text.includes('add image') || 
          ariaLabel.includes('upload') || ariaLabel.includes('add')) {
        console.log('[Ideogram Ext] Clicking upload button:', btn);
        btn.click();
        
        // Wait for file input to appear
        await new Promise(r => setTimeout(r, 300));
        
        const fileInput = findFileInput();
        if (fileInput) {
          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(file);
          fileInput.files = dataTransfer.files;
          fileInput.dispatchEvent(new Event('change', { bubbles: true }));
          return { success: true, message: 'Image uploaded via button' };
        }
      }
    }
    
    return { success: false };
  }

  // Fallback: copy URL to clipboard
  async function copyUrlFallback(url) {
    try {
      await navigator.clipboard.writeText(url);
      showNotification('Image URL copied to clipboard!', 'info');
      return { success: true, message: 'Image URL copied to clipboard - paste manually' };
    } catch (e) {
      showNotification('Could not process image', 'error');
      return { success: false, error: 'Could not fetch or copy image' };
    }
  }

  // Show a notification on the page
  function showNotification(message, type = 'success') {
    // Remove existing notifications
    document.querySelectorAll('.ideogram-ext-notification').forEach(n => n.remove());
    
    const notification = document.createElement('div');
    notification.className = 'ideogram-ext-notification';
    notification.textContent = message;
    
    const colors = {
      success: '#10b981',
      error: '#ef4444',
      info: '#6366f1'
    };
    
    notification.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 12px 24px;
      background: ${colors[type] || colors.info};
      color: white;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      z-index: 999999;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      animation: ideogramSlideIn 0.3s ease;
    `;

    // Add animation keyframes if not already added
    if (!document.getElementById('ideogram-ext-styles')) {
      const style = document.createElement('style');
      style.id = 'ideogram-ext-styles';
      style.textContent = `
        @keyframes ideogramSlideIn {
          from { transform: translateX(100%); opacity: 0; }
          to { transform: translateX(0); opacity: 1; }
        }
      `;
      document.head.appendChild(style);
    }

    document.body.appendChild(notification);

    // Remove after 3 seconds
    setTimeout(() => {
      notification.style.opacity = '0';
      notification.style.transform = 'translateX(100%)';
      notification.style.transition = 'all 0.3s ease';
      setTimeout(() => notification.remove(), 300);
    }, 3000);
  }

  console.log('[Ideogram Ext] Handler ready and listening');
})();