@rashidazarang/airtable-mcp 1.6.0 → 2.1.0

package/airtable-clipper/releases/v1.0.2/popup.js

@@ -0,0 +1,567 @@
+// 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('setupView').style.display = 'block';
+    document.getElementById('connectedView').style.display = 'none';
+    this.isConnected = false;
+  }
+
+  showConnectedView() {
+    document.getElementById('setupView').style.display = 'none';
+    document.getElementById('connectedView').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 site info
+      document.getElementById('siteName').textContent = this.currentTab.title || 'Current Page';
+      document.getElementById('siteUrl').textContent = domain;
+      
+      // Set site icon based on domain
+      let icon = '🌐';
+      if (domain.includes('linkedin.com')) {
+        icon = '💼';
+        document.getElementById('linkedinBtn').style.display = 'flex';
+        document.getElementById('saveSubtitle').textContent = 'to Contacts';
+      } else {
+        document.getElementById('linkedinBtn').style.display = 'none';
+        document.getElementById('saveSubtitle').textContent = 'to Web Clips';
+      }
+      
+      document.getElementById('siteIcon').textContent = icon;
+    } catch (error) {
+      console.error('Failed to update UI for page:', error);
+    }
+  }
+
+  bindEvents() {
+    // Setup view events
+    document.getElementById('connectBtn')?.addEventListener('click', () => this.handleConnect());
+    document.getElementById('setupBtn')?.addEventListener('click', () => this.handleSetupDatabase());
+    
+    // Connected view events  
+    document.getElementById('quickSaveBtn')?.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('oauthConnectBtn');
+    const btnText = connectBtn.querySelector('.btn-text');
+    const btnSpinner = document.getElementById('connectSpinner');
+    
+    // Show loading state
+    connectBtn.disabled = true;
+    btnText.textContent = 'Connecting to Airtable...';
+    btnSpinner.style.display = 'block';
+
+    try {
+      // Initialize OAuth
+      const { AirtableOAuth } = await import('./lib/airtable-oauth.js');
+      const oauth = new AirtableOAuth();
+      
+      // Start OAuth flow
+      await oauth.authenticate();
+      
+      // Get user's bases
+      const bases = await oauth.getUserBases();
+      
+      if (bases && bases.length > 0) {
+        // Populate base selection
+        this.populateBaseOptions(bases);
+        
+        // Hide OAuth button, show base selection
+        document.querySelector('.oauth-connect').style.display = 'none';
+        document.getElementById('baseSelection').style.display = 'block';
+        
+        this.showToast('Connected to Airtable! Please select a base.', 'success');
+      } else {
+        throw new Error('No accessible bases found in your account');
+      }
+    } catch (error) {
+      console.error('OAuth failed:', error);
+      let errorMessage = 'Connection failed';
+      
+      if (error.message.includes('cancelled')) {
+        errorMessage = 'Sign-in was cancelled';
+      } else if (error.message.includes('access_denied')) {
+        errorMessage = 'Access denied. Please try again and grant permissions.';
+      } 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';
+    }
+  }
+
+  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 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...';
+    if (btnSpinner) {
+      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 Manually';
+    }
+  }
+
+  async handleQuickSave() {
+    if (!this.isConnected || !this.currentTab) {
+      this.showToast('Not connected to Airtable', 'error');
+      return;
+    }
+
+    const saveBtn = document.getElementById('quickSaveBtn');
+    const originalText = saveBtn.querySelector('.save-text').textContent;
+    
+    saveBtn.disabled = true;
+    saveBtn.querySelector('.save-text').textContent = 'Saving...';
+
+    try {
+      // Extract page data
+      const pageData = {
+        'Title': this.currentTab.title || 'Untitled',
+        'URL': this.currentTab.url,
+        'Domain': new URL(this.currentTab.url).hostname,
+        'Saved At': new Date().toISOString()
+      };
+
+      // Determine table based on site
+      const tableName = this.currentTab.url.includes('linkedin.com') ? 'Contacts' : 'Web Clips';
+      
+      // Save to Airtable
+      const result = await this.client.createRecord(tableName, pageData);
+      
+      if (result.success) {
+        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('.save-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-text').textContent;
+    
+    linkedinBtn.disabled = true;
+    linkedinBtn.querySelector('.action-text').textContent = 'Saving...';
+
+    try {
+      // Inject content script to extract profile data
+      const [result] = await chrome.scripting.executeScript({
+        target: { tabId: this.currentTab.id },
+        files: ['lib/linkedin-scraper.js']
+      });
+
+      if (result && result.result) {
+        const profileData = result.result;
+        
+        // Save to Contacts table
+        const saveResult = await this.client.createRecord('Contacts', profileData);
+        
+        if (saveResult.success) {
+          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-text').textContent = originalText;
+    }
+  }
+
+  async handleBulkMode() {
+    if (!this.isConnected || !this.currentTab) {
+      this.showToast('Not connected to Airtable', 'error');
+      return;
+    }
+
+    try {
+      // Inject content script and CSS for bulk selection
+      await chrome.scripting.executeScript({
+        target: { tabId: this.currentTab.id },
+        files: ['content.js']
+      });
+
+      await chrome.scripting.insertCSS({
+        target: { tabId: this.currentTab.id },
+        files: ['styles/content.css']
+      });
+
+      // Send message to activate bulk mode
+      await chrome.tabs.sendMessage(this.currentTab.id, {
+        action: 'activateBulkMode'
+      });
+
+      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();
+}

package/airtable-clipper/releases/v1.0.2/sidepanel.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Airtable Clipper Dashboard</title>
+  <link rel="stylesheet" href="styles/popup.css">
+</head>
+<body>
+  <div class="header">
+    <h1>📎 Airtable Clipper</h1>
+    <p>Dashboard & Bulk Operations</p>
+  </div>
+  
+  <div style="padding: 20px; text-align: center;">
+    <h2>🚀 Coming Soon!</h2>
+    <p>The dashboard panel is under development.</p>
+    <p>For now, use the main extension popup to save content to Airtable.</p>
+    
+    <button onclick="chrome.action.openPopup();" style="margin-top: 20px; padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 6px; cursor: pointer;">
+      Open Main Panel
+    </button>
+  </div>
+</body>
+</html>