@rashidazarang/airtable-mcp 2.1.0 → 2.1.1

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

@@ -1,729 +0,0 @@
-// 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();
-}