@rashidazarang/airtable-mcp 1.6.0 → 2.1.0

package/airtable-clipper/test-extension/popup.js

@@ -0,0 +1,729 @@
+// Airtable Clipper - Simple Popup Controller
+import { AirtableClient, AirtableError } from './lib/airtable-client.js';
+
+class PopupController {
+  constructor() {
+    this.client = null;
+    this.currentTab = null;
+    this.isConnected = false;
+    this.init();
+  }
+
+  async init() {
+    try {
+      // Get current tab
+      const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+      this.currentTab = tabs[0];
+
+      // Check connection status
+      await this.checkConnection();
+      
+      // Update UI for current page
+      this.updateUIForCurrentPage();
+      
+      // Bind all event listeners
+      this.bindEvents();
+    } catch (error) {
+      console.error('Init failed:', error);
+      this.showToast('Failed to initialize extension', 'error');
+    }
+  }
+
+  async checkConnection() {
+    try {
+      const result = await chrome.storage.local.get(['airtableToken', 'baseId']);
+      
+      if (result.airtableToken && result.baseId) {
+        // Test the connection
+        this.client = new AirtableClient(result.airtableToken, result.baseId);
+        const testResult = await this.client.testConnection();
+        
+        if (testResult.success) {
+          this.isConnected = true;
+          this.showConnectedView();
+        } else {
+          this.showSetupView();
+        }
+      } else {
+        this.showSetupView();
+      }
+    } catch (error) {
+      console.error('Connection check failed:', error);
+      this.showSetupView();
+    }
+  }
+
+  showSetupView() {
+    document.getElementById('setupContainer').style.display = 'block';
+    document.getElementById('connectedContainer').style.display = 'none';
+    this.isConnected = false;
+  }
+
+  showConnectedView() {
+    document.getElementById('setupContainer').style.display = 'none';
+    document.getElementById('connectedContainer').style.display = 'block';
+    this.isConnected = true;
+  }
+
+  updateUIForCurrentPage() {
+    if (!this.currentTab || !this.isConnected) return;
+
+    try {
+      const url = new URL(this.currentTab.url);
+      const domain = url.hostname.replace('www.', '');
+      
+      // Update page info
+      document.getElementById('pageTitle').textContent = this.currentTab.title || 'Current Page';
+      document.getElementById('pageUrl').textContent = domain;
+      
+      // Set page icon based on domain
+      let icon = '🌐';
+      if (domain.includes('linkedin.com')) {
+        icon = '💼';
+        document.getElementById('linkedinBtn').style.display = 'block';
+        document.getElementById('saveTarget').textContent = 'to Contacts';
+      } else {
+        document.getElementById('linkedinBtn').style.display = 'none';
+        document.getElementById('saveTarget').textContent = 'to Web Clips';
+      }
+      
+      document.getElementById('pageIcon').textContent = icon;
+    } catch (error) {
+      console.error('Failed to update UI for page:', error);
+    }
+  }
+
+  bindEvents() {
+    console.log('Binding events...');
+    
+    // Setup view events
+    const oauthBtn = document.getElementById('oauthBtn');
+    const manualBtn = document.getElementById('manualConnectBtn');
+    const confirmBtn = document.getElementById('confirmBaseBtn');
+    const setupBtn = document.getElementById('setupBtn');
+    
+    console.log('Found buttons:', {
+      oauth: !!oauthBtn,
+      manual: !!manualBtn,
+      confirm: !!confirmBtn,
+      setup: !!setupBtn
+    });
+    
+    oauthBtn?.addEventListener('click', () => {
+      console.log('OAuth button clicked');
+      this.handleOAuthConnect();
+    });
+    
+    manualBtn?.addEventListener('click', () => {
+      console.log('Manual connect button clicked');
+      this.handleManualConnect();
+    });
+    
+    confirmBtn?.addEventListener('click', () => {
+      console.log('Confirm base button clicked');
+      this.handleConfirmBase();
+    });
+    
+    setupBtn?.addEventListener('click', () => {
+      console.log('Setup button clicked');
+      this.handleSetupDatabase();
+    });
+    
+    // Connected view events  
+    document.getElementById('saveBtn')?.addEventListener('click', () => this.handleQuickSave());
+    document.getElementById('linkedinBtn')?.addEventListener('click', () => this.handleLinkedInSave());
+    document.getElementById('bulkBtn')?.addEventListener('click', () => this.handleBulkMode());
+    document.getElementById('settingsBtn')?.addEventListener('click', () => this.showSettings());
+    
+    // Settings events
+    document.getElementById('closeSettings')?.addEventListener('click', () => this.hideSettings());
+    document.getElementById('disconnectBtn')?.addEventListener('click', () => this.handleDisconnect());
+    
+    // Auto-save settings
+    document.getElementById('autoSave')?.addEventListener('change', () => this.saveSettings());
+    document.getElementById('notifications')?.addEventListener('change', () => this.saveSettings());
+  }
+
+  async handleConnect() {
+    const connectBtn = document.getElementById('connectBtn');
+    const btnText = connectBtn.querySelector('.btn-text');
+    const btnSpinner = document.getElementById('connectSpinner');
+    
+    const token = document.getElementById('airtableToken').value.trim();
+    const baseId = document.getElementById('baseId').value.trim();
+
+    if (!token || !baseId) {
+      this.showToast('Please enter both token and base ID', 'error');
+      return;
+    }
+
+    // Show loading state
+    connectBtn.disabled = true;
+    btnText.textContent = 'Connecting...';
+    btnSpinner.style.display = 'block';
+
+    try {
+      // Test connection
+      const testClient = new AirtableClient(token, baseId);
+      const result = await testClient.testConnection();
+
+      if (result.success) {
+        // Save credentials
+        await chrome.storage.local.set({
+          airtableToken: token,
+          baseId: baseId
+        });
+
+        this.client = testClient;
+        this.isConnected = true;
+        this.showConnectedView();
+        this.updateUIForCurrentPage();
+        this.showToast('Connected successfully!', 'success');
+      } else {
+        throw new Error(result.error || 'Connection test failed');
+      }
+    } catch (error) {
+      console.error('Connection failed:', error);
+      let errorMessage = 'Connection failed';
+      
+      if (error instanceof AirtableError) {
+        if (error.message.includes('401')) {
+          errorMessage = 'Invalid token. Please check your Personal Access Token.';
+        } else if (error.message.includes('404')) {
+          errorMessage = 'Base not found. Please check your Base ID.';
+        } else {
+          errorMessage = error.message;
+        }
+      } else if (error.message) {
+        errorMessage = error.message;
+      }
+      
+      this.showToast(errorMessage, 'error');
+    } finally {
+      // Reset button state
+      connectBtn.disabled = false;
+      btnText.textContent = 'Connect to Airtable';
+      btnSpinner.style.display = 'none';
+    }
+  }
+
+  async handleOAuthConnect() {
+    const connectBtn = document.getElementById('oauthBtn');
+    const btnText = connectBtn.querySelector('.btn-text');
+    const btnSpinner = document.getElementById('oauthSpinner');
+    
+    // Show loading state
+    connectBtn.disabled = true;
+    btnText.textContent = 'Connecting...';
+    btnSpinner.style.display = 'block';
+
+    try {
+      // Import and use OAuth
+      const { AirtableOAuth } = await import('./lib/airtable-oauth.js');
+      const oauth = new AirtableOAuth();
+      
+      // Check if OAuth is available
+      if (!chrome.identity || !chrome.identity.launchWebAuthFlow) {
+        throw new Error('OAuth not available in this context. Please use manual connection.');
+      }
+
+      // Authenticate
+      const tokens = await oauth.authenticate();
+      
+      // Get user's bases
+      const basesData = await oauth.getUserBases();
+      
+      if (basesData && basesData.bases && basesData.bases.length > 0) {
+        // Show base selector
+        this.populateBaseOptions(basesData.bases);
+        document.getElementById('baseSelector').style.display = 'block';
+        this.showToast('Authentication successful! Please select a base.', 'success');
+      } else {
+        throw new Error('No Airtable bases found');
+      }
+      
+    } catch (error) {
+      console.error('OAuth failed:', error);
+      this.showToast(`OAuth failed: ${error.message}. Try manual connection below.`, 'error');
+      
+      // Expand manual auth section
+      const manualAuth = document.querySelector('.manual-auth');
+      if (manualAuth) {
+        manualAuth.open = true;
+      }
+      
+      // Focus on token input
+      setTimeout(() => {
+        document.getElementById('tokenInput')?.focus();
+      }, 500);
+      
+    } finally {
+      // Reset button state
+      connectBtn.disabled = false;
+      btnText.textContent = 'Connect with Airtable';
+      btnSpinner.style.display = 'none';
+    }
+  }
+
+  populateBaseOptions(bases) {
+    const baseSelect = document.getElementById('baseSelect');
+    baseSelect.innerHTML = '<option value="">Choose a base...</option>';
+    
+    bases.forEach(base => {
+      const option = document.createElement('option');
+      option.value = base.id;
+      option.textContent = base.name;
+      baseSelect.appendChild(option);
+    });
+
+    // Store bases for later use
+    this.availableBases = bases;
+  }
+
+  async handleConfirmBase() {
+    const baseSelect = document.getElementById('baseSelect');
+    const selectedBaseId = baseSelect.value;
+    
+    if (!selectedBaseId) {
+      this.showToast('Please select a base', 'error');
+      return;
+    }
+
+    const selectedBase = this.availableBases.find(base => base.id === selectedBaseId);
+    
+    try {
+      // Save base selection
+      await chrome.storage.local.set({
+        selectedBaseId: selectedBaseId,
+        selectedBaseName: selectedBase.name,
+        useOAuth: true
+      });
+
+      // Create client with OAuth token
+      const { AirtableOAuth } = await import('./lib/airtable-oauth.js');
+      const oauth = new AirtableOAuth();
+      const token = await oauth.getAccessToken();
+      this.client = new AirtableClient(token, selectedBaseId);
+
+      // Switch to connected view
+      this.isConnected = true;
+      this.showConnectedView();
+      this.updateUIForCurrentPage();
+      this.showToast(`Connected to ${selectedBase.name}!`, 'success');
+    } catch (error) {
+      console.error('Base confirmation failed:', error);
+      this.showToast(`Failed to connect: ${error.message}`, 'error');
+    }
+  }
+
+  async handleManualConnect() {
+    const connectBtn = document.getElementById('manualConnectBtn');
+    const btnText = connectBtn.querySelector('.btn-text');
+    const btnSpinner = document.getElementById('manualSpinner');
+    
+    const token = document.getElementById('tokenInput').value.trim();
+    const baseId = document.getElementById('baseInput').value.trim();
+
+    if (!token || !baseId) {
+      this.showToast('Please enter both token and base ID', 'error');
+      return;
+    }
+
+    // Show loading state
+    connectBtn.disabled = true;
+    btnText.textContent = 'Connecting...';
+    btnSpinner.style.display = 'block';
+
+    try {
+      console.log('Testing connection with token:', token.substring(0, 10) + '...', 'and base:', baseId);
+      
+      // Test connection
+      const testClient = new AirtableClient(token, baseId);
+      const result = await testClient.testConnection();
+      
+      console.log('Connection test result:', result);
+
+      if (result && result.success) {
+        // Save credentials
+        await chrome.storage.local.set({
+          airtableToken: token,
+          baseId: baseId
+        });
+
+        this.client = testClient;
+        this.isConnected = true;
+        this.showConnectedView();
+        this.updateUIForCurrentPage();
+        this.showToast('Connected successfully!', 'success');
+      } else {
+        const errorMsg = result?.message || result?.error || 'Connection test failed';
+        throw new Error(errorMsg);
+      }
+    } catch (error) {
+      console.error('Connection failed:', error);
+      let errorMessage = 'Connection failed: ';
+      
+      if (error.message) {
+        if (error.message.includes('401')) {
+          errorMessage += 'Invalid token. Please check your Personal Access Token.';
+        } else if (error.message.includes('404')) {
+          errorMessage += 'Base not found. Please check your Base ID.';
+        } else {
+          errorMessage += error.message;
+        }
+      } else {
+        errorMessage += 'Unknown error occurred';
+      }
+      
+      this.showToast(errorMessage, 'error');
+    } finally {
+      // Reset button state
+      connectBtn.disabled = false;
+      btnText.textContent = 'Connect';
+      btnSpinner.style.display = 'none';
+    }
+  }
+
+  async handleQuickSave() {
+    if (!this.isConnected || !this.currentTab) {
+      this.showToast('Not connected to Airtable', 'error');
+      return;
+    }
+
+    const saveBtn = document.getElementById('saveBtn');
+    const originalText = saveBtn.querySelector('.btn-text').textContent;
+    
+    saveBtn.disabled = true;
+    saveBtn.querySelector('.btn-text').textContent = 'Saving...';
+
+    try {
+      let saveData;
+      let tableName;
+
+      // Handle LinkedIn pages specially
+      if (this.currentTab.url.includes('linkedin.com') && this.currentTab.url.includes('/in/')) {
+        console.log('LinkedIn profile detected, extracting profile data...');
+        
+        try {
+          // Try to inject content script if needed
+          if (chrome.scripting && chrome.scripting.executeScript) {
+            await chrome.scripting.executeScript({
+              target: { tabId: this.currentTab.id },
+              files: ['content.js']
+            });
+          }
+
+          // Extract LinkedIn profile data
+          const response = await chrome.tabs.sendMessage(this.currentTab.id, {
+            action: 'extractLinkedInProfile'
+          });
+
+          if (response && response.success && response.data) {
+            saveData = response.data;
+            tableName = 'Contacts';
+            console.log('LinkedIn profile data extracted:', saveData);
+          } else {
+            throw new Error('Failed to extract LinkedIn profile data');
+          }
+        } catch (error) {
+          console.log('Content script injection failed, using fallback extraction');
+          // Use fallback extraction method
+          const fallbackData = await this.extractLinkedInDataFallback();
+          if (fallbackData) {
+            saveData = fallbackData;
+            tableName = 'Contacts';
+          } else {
+            throw new Error('Failed to extract LinkedIn profile data');
+          }
+        }
+      } else {
+        // Regular web page
+        saveData = {
+          'Title': this.currentTab.title || 'Untitled',
+          'Website URL': this.currentTab.url,
+          'Domain': new URL(this.currentTab.url).hostname,
+          'Saved At': new Date().toISOString().split('T')[0]
+        };
+        tableName = 'Web Clips';
+      }
+      
+      console.log('Saving to table:', tableName, 'with data:', saveData);
+      
+      // Save to Airtable with duplicate detection
+      const result = await this.client.createRecord(tableName, saveData);
+      
+      if (result.success) {
+        if (result.action === 'updated') {
+          this.showToast(`Already exists in ${tableName} - no duplicate created`, 'warning');
+        } else {
+          this.showToast(`Saved to ${tableName}!`, 'success');
+        }
+      } else {
+        throw new Error(result.error || 'Failed to save');
+      }
+    } catch (error) {
+      console.error('Quick save failed:', error);
+      this.showToast(`Failed to save: ${error.message}`, 'error');
+    } finally {
+      saveBtn.disabled = false;
+      saveBtn.querySelector('.btn-text').textContent = originalText;
+    }
+  }
+
+  async handleLinkedInSave() {
+    if (!this.isConnected || !this.currentTab) {
+      this.showToast('Not connected to Airtable', 'error');
+      return;
+    }
+
+    if (!this.currentTab.url.includes('linkedin.com')) {
+      this.showToast('This only works on LinkedIn profiles', 'error');
+      return;
+    }
+
+    const linkedinBtn = document.getElementById('linkedinBtn');
+    const originalText = linkedinBtn.querySelector('.action-title').textContent;
+    
+    linkedinBtn.disabled = true;
+    linkedinBtn.querySelector('.action-title').textContent = 'Saving...';
+
+    try {
+      // Try to extract profile data via content script
+      let response;
+      
+      try {
+        // First try sending message in case content script is already injected
+        response = await chrome.tabs.sendMessage(this.currentTab.id, {
+          action: 'extractLinkedInProfile'
+        });
+      } catch (error) {
+        console.log('Content script not found, injecting...', error);
+        
+        try {
+          // Check if chrome.scripting is available
+          if (!chrome.scripting || !chrome.scripting.executeScript) {
+            throw new Error('Chrome scripting API not available');
+          }
+          
+          // Inject content script if needed
+          await chrome.scripting.executeScript({
+            target: { tabId: this.currentTab.id },
+            files: ['content.js']
+          });
+          
+          // Wait for script to load then try again
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          
+          response = await chrome.tabs.sendMessage(this.currentTab.id, {
+            action: 'extractLinkedInProfile'
+          });
+        } catch (scriptError) {
+          console.error('Failed to inject content script:', scriptError);
+          
+          // Fallback: extract data directly in popup (basic extraction)
+          const fallbackData = await this.extractLinkedInDataFallback();
+          if (fallbackData) {
+            response = { success: true, data: fallbackData };
+          } else {
+            throw new Error('Could not extract LinkedIn profile data. Please try refreshing the page.');
+          }
+        }
+      }
+
+      if (response && response.success && response.data) {
+        const profileData = response.data;
+        
+        // Save to Contacts table with duplicate detection
+        const saveResult = await this.client.createRecord('Contacts', profileData);
+        
+        if (saveResult.success) {
+          if (saveResult.action === 'updated') {
+            this.showToast('LinkedIn profile already exists - no duplicate created', 'warning');
+          } else {
+            this.showToast('LinkedIn profile saved!', 'success');
+          }
+        } else {
+          throw new Error(saveResult.error || 'Failed to save profile');
+        }
+      } else {
+        throw new Error('Failed to extract profile data');
+      }
+    } catch (error) {
+      console.error('LinkedIn save failed:', error);
+      this.showToast(`Failed to save profile: ${error.message}`, 'error');
+    } finally {
+      linkedinBtn.disabled = false;
+      linkedinBtn.querySelector('.action-title').textContent = originalText;
+    }
+  }
+
+  // Fallback method to extract basic LinkedIn data from page URL and title
+  async extractLinkedInDataFallback() {
+    try {
+      if (!this.currentTab.url.includes('linkedin.com/in/')) {
+        return null;
+      }
+
+      // Extract name from URL or page title
+      let name = '';
+      const urlMatch = this.currentTab.url.match(/linkedin\.com\/in\/([^/?]+)/);
+      if (urlMatch) {
+        name = urlMatch[1].replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+      }
+
+      // Try to get name from page title
+      if (this.currentTab.title) {
+        const titleMatch = this.currentTab.title.match(/^([^|]+)/);
+        if (titleMatch) {
+          const titleName = titleMatch[1].trim();
+          if (titleName && titleName !== 'LinkedIn') {
+            name = titleName;
+          }
+        }
+      }
+
+      if (!name) {
+        return null;
+      }
+
+      return {
+        'Name': name,
+        'LinkedIn URL': this.currentTab.url,
+        'Date Added': new Date().toISOString().split('T')[0],
+        'Source': 'LinkedIn',
+        'Notes': 'Extracted via fallback method - please update manually'
+      };
+    } catch (error) {
+      console.error('Fallback extraction failed:', error);
+      return null;
+    }
+  }
+
+  async handleBulkMode() {
+    if (!this.isConnected || !this.currentTab) {
+      this.showToast('Not connected to Airtable', 'error');
+      return;
+    }
+
+    try {
+      // Inject content script for bulk selection
+      await chrome.scripting.executeScript({
+        target: { tabId: this.currentTab.id },
+        files: ['content.js']
+      });
+
+      // Send message to activate bulk mode
+      await chrome.tabs.sendMessage(this.currentTab.id, {
+        action: 'enterBulkMode'
+      });
+
+      this.showToast('Bulk mode activated! Select elements on the page.', 'success');
+      window.close(); // Close popup so user can interact with page
+    } catch (error) {
+      console.error('Bulk mode failed:', error);
+      this.showToast(`Failed to activate bulk mode: ${error.message}`, 'error');
+    }
+  }
+
+  async handleSetupDatabase() {
+    try {
+      const result = await chrome.runtime.sendMessage({
+        action: 'openDatabaseSetup'
+      });
+
+      if (result.success) {
+        this.showToast('Database setup opened!', 'success');
+        window.close();
+      } else {
+        throw new Error('Failed to open setup');
+      }
+    } catch (error) {
+      console.error('Database setup failed:', error);
+      this.showToast('Database setup will be available soon', 'info');
+    }
+  }
+
+  showSettings() {
+    document.getElementById('settingsPanel').style.display = 'block';
+  }
+
+  hideSettings() {
+    document.getElementById('settingsPanel').style.display = 'none';
+  }
+
+  async handleDisconnect() {
+    try {
+      // Clear all possible authentication data
+      await chrome.storage.local.remove([
+        // Manual token data
+        'airtableToken', 'baseId',
+        // OAuth data
+        'selectedBaseId', 'selectedBaseName', 'useOAuth',
+        'airtable_access_token', 'airtable_refresh_token', 
+        'airtable_token_expires', 'airtable_token_type', 'airtable_scope'
+      ]);
+      
+      this.client = null;
+      this.isConnected = false;
+      this.showSetupView();
+      this.showToast('Disconnected successfully', 'success');
+    } catch (error) {
+      console.error('Disconnect failed:', error);
+      this.showToast('Failed to disconnect', 'error');
+    }
+  }
+
+  async saveSettings() {
+    try {
+      const settings = {
+        autoSave: document.getElementById('autoSave').checked,
+        notifications: document.getElementById('notifications').checked,
+        defaultTable: document.getElementById('defaultTable').value,
+        linkedinTable: document.getElementById('linkedinTable').value
+      };
+
+      await chrome.storage.local.set({ settings });
+      this.showToast('Settings saved', 'success');
+    } catch (error) {
+      console.error('Save settings failed:', error);
+      this.showToast('Failed to save settings', 'error');
+    }
+  }
+
+  showToast(message, type = 'success') {
+    const toast = document.getElementById('toast');
+    const toastIcon = document.getElementById('toastIcon');
+    const toastMessage = document.getElementById('toastMessage');
+
+    // Set icon based on type
+    const icons = {
+      success: '✅',
+      error: '❌', 
+      warning: '🔄',
+      info: 'ℹ️'
+    };
+
+    toastIcon.textContent = icons[type] || icons.success;
+    toastMessage.textContent = message;
+    
+    // Show toast
+    toast.classList.add('show');
+    
+    // Hide after 3 seconds
+    setTimeout(() => {
+      toast.classList.remove('show');
+    }, 3000);
+  }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  new PopupController();
+});
+
+// Also initialize immediately in case DOMContentLoaded already fired
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => new PopupController());
+} else {
+  new PopupController();
+}