@rashidazarang/airtable-mcp 1.5.0 → 2.1.0

package/airtable-clipper/extension/popup.js

@@ -0,0 +1,475 @@
+// Airtable Clipper Popup Script
+import { AirtableClient, AirtableError } from './lib/airtable-client.js';
+
+class PopupController {
+  constructor() {
+    this.client = null;
+    this.currentTab = null;
+    this.settings = {};
+    this.init();
+  }
+
+  async init() {
+    // Get current tab
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+    this.currentTab = tabs[0];
+
+    // Load settings and initialize UI
+    await this.loadSettings();
+    this.initializeUI();
+    this.bindEvents();
+    
+    // Check connection status
+    await this.checkConnection();
+    
+    // Update UI based on current page
+    this.updateUIForCurrentPage();
+  }
+
+  async loadSettings() {
+    try {
+      const response = await chrome.runtime.sendMessage({
+        action: 'getSettings'
+      });
+
+      if (response.success) {
+        this.settings = response.settings;
+        this.populateSettingsUI();
+        
+        if (this.settings.airtableToken && this.settings.baseId) {
+          this.client = new AirtableClient(this.settings.airtableToken, this.settings.baseId);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load settings:', error);
+    }
+  }
+
+  populateSettingsUI() {
+    // Populate configuration form
+    const tokenInput = document.getElementById('airtableToken');
+    const baseIdInput = document.getElementById('baseId');
+    
+    if (tokenInput) tokenInput.value = this.settings.airtableToken || '';
+    if (baseIdInput) baseIdInput.value = this.settings.baseId || '';
+
+    // Populate settings
+    const defaultTableSelect = document.getElementById('defaultTable');
+    const linkedinTableSelect = document.getElementById('linkedinTable');
+    const autoSaveCheckbox = document.getElementById('autoSave');
+    const notificationsCheckbox = document.getElementById('notifications');
+
+    if (defaultTableSelect) defaultTableSelect.value = this.settings.defaultTable || 'Clips';
+    if (linkedinTableSelect) linkedinTableSelect.value = this.settings.linkedinTable || 'Contacts';
+    if (autoSaveCheckbox) autoSaveCheckbox.checked = this.settings.autoSave || false;
+    if (notificationsCheckbox) notificationsCheckbox.checked = this.settings.notifications !== false;
+  }
+
+  initializeUI() {
+    const isConnected = this.client !== null;
+    
+    // Show/hide sections based on connection status
+    document.getElementById('configuration').style.display = isConnected ? 'none' : 'block';
+    document.getElementById('quickActions').style.display = isConnected ? 'block' : 'none';
+    document.getElementById('settings').style.display = 'none'; // Hidden by default
+    
+    // Update connection status
+    this.updateConnectionStatus(isConnected);
+    
+    // Load usage stats if connected
+    if (isConnected) {
+      this.loadUsageStats();
+    }
+  }
+
+  bindEvents() {
+    // Configuration events
+    document.getElementById('connectBtn')?.addEventListener('click', () => this.handleConnect());
+    
+    // Quick action events
+    document.getElementById('quickSaveBtn')?.addEventListener('click', () => this.handleQuickSave());
+    document.getElementById('linkedinSaveBtn')?.addEventListener('click', () => this.handleLinkedInSave());
+    document.getElementById('bulkModeBtn')?.addEventListener('click', () => this.handleBulkMode());
+    
+    // Footer events
+    document.getElementById('settingsToggle')?.addEventListener('click', () => this.toggleSettings());
+    document.getElementById('helpBtn')?.addEventListener('click', () => this.openHelp());
+    document.getElementById('sidePanelBtn')?.addEventListener('click', () => this.openSidePanel());
+    
+    // Setup database button
+    document.getElementById('setupDatabaseBtn')?.addEventListener('click', () => this.openDatabaseSetup());
+    
+    // Settings events
+    document.getElementById('autoSave')?.addEventListener('change', () => this.saveSettings());
+    document.getElementById('notifications')?.addEventListener('change', () => this.saveSettings());
+    document.getElementById('defaultTable')?.addEventListener('change', () => this.saveSettings());
+    document.getElementById('linkedinTable')?.addEventListener('change', () => this.saveSettings());
+    
+    // Status message close
+    document.getElementById('statusClose')?.addEventListener('click', () => this.hideStatusMessage());
+  }
+
+  async handleConnect() {
+    const connectBtn = document.getElementById('connectBtn');
+    const connectText = document.getElementById('connectText');
+    const connectLoading = document.getElementById('connectLoading');
+    
+    const token = document.getElementById('airtableToken').value.trim();
+    const baseId = document.getElementById('baseId').value.trim();
+
+    if (!token || !baseId) {
+      this.showStatusMessage('Please enter both token and base ID', 'error');
+      return;
+    }
+
+    // Show loading state
+    connectBtn.disabled = true;
+    connectText.textContent = 'Connecting...';
+    connectLoading.style.display = 'inline';
+
+    try {
+      // Test connection
+      const testClient = new AirtableClient(token, baseId);
+      const result = await testClient.testConnection();
+
+      if (result.success) {
+        // Save settings
+        await this.saveSettings({ airtableToken: token, baseId: baseId });
+        
+        // Update client
+        this.client = testClient;
+        
+        // Load table options
+        await this.loadTableOptions();
+        
+        // Update UI
+        this.initializeUI();
+        this.showStatusMessage('Connected successfully!', 'success');
+      } else {
+        throw new Error(result.message);
+      }
+    } catch (error) {
+      console.error('Connection failed:', error);
+      this.showStatusMessage(`Connection failed: ${error.message}`, 'error');
+    } finally {
+      // Reset button state
+      connectBtn.disabled = false;
+      connectText.textContent = 'Connect to Airtable';
+      connectLoading.style.display = 'none';
+    }
+  }
+
+  async handleQuickSave() {
+    if (!this.client) return;
+
+    this.showLoading('Saving to Airtable...');
+
+    try {
+      // Send message to content script to extract page data
+      const response = await chrome.tabs.sendMessage(this.currentTab.id, {
+        action: 'extractPageData',
+        type: 'general'
+      });
+
+      if (response && response.success) {
+        // Save to Airtable via background script
+        const saveResponse = await chrome.runtime.sendMessage({
+          action: 'saveToAirtable',
+          data: {
+            type: 'general',
+            title: response.data.title,
+            url: response.data.url,
+            content: response.data.content,
+            timestamp: new Date().toISOString()
+          }
+        });
+
+        if (saveResponse.success) {
+          this.showStatusMessage('Saved to Airtable!', 'success');
+          this.updateUsageStats();
+        } else {
+          throw new Error(saveResponse.error);
+        }
+      } else {
+        // Fallback: save basic page info
+        await this.saveBasicPageInfo();
+      }
+    } catch (error) {
+      console.error('Quick save failed:', error);
+      this.showStatusMessage(`Save failed: ${error.message}`, 'error');
+    } finally {
+      this.hideLoading();
+    }
+  }
+
+  async handleLinkedInSave() {
+    if (!this.client) return;
+
+    this.showLoading('Extracting LinkedIn profile...');
+
+    try {
+      const response = await chrome.tabs.sendMessage(this.currentTab.id, {
+        action: 'extractLinkedInProfile'
+      });
+
+      if (response && response.success) {
+        const saveResponse = await chrome.runtime.sendMessage({
+          action: 'saveToAirtable',
+          data: {
+            type: 'linkedin',
+            ...response.data,
+            timestamp: new Date().toISOString()
+          }
+        });
+
+        if (saveResponse.success) {
+          this.showStatusMessage('LinkedIn profile saved!', 'success');
+          this.updateUsageStats();
+        } else {
+          throw new Error(saveResponse.error);
+        }
+      } else {
+        throw new Error('Failed to extract LinkedIn profile');
+      }
+    } catch (error) {
+      console.error('LinkedIn save failed:', error);
+      this.showStatusMessage(`LinkedIn save failed: ${error.message}`, 'error');
+    } finally {
+      this.hideLoading();
+    }
+  }
+
+  async handleBulkMode() {
+    try {
+      // Send message to content script to enter bulk mode
+      await chrome.tabs.sendMessage(this.currentTab.id, {
+        action: 'enterBulkMode'
+      });
+      
+      // Close popup
+      window.close();
+    } catch (error) {
+      console.error('Bulk mode failed:', error);
+      this.showStatusMessage('Bulk mode not available on this page', 'error');
+    }
+  }
+
+  async saveBasicPageInfo() {
+    const saveResponse = await chrome.runtime.sendMessage({
+      action: 'saveToAirtable',
+      data: {
+        type: 'general',
+        title: this.currentTab.title,
+        url: this.currentTab.url,
+        timestamp: new Date().toISOString()
+      }
+    });
+
+    if (saveResponse.success) {
+      this.showStatusMessage('Page saved to Airtable!', 'success');
+      this.updateUsageStats();
+    } else {
+      throw new Error(saveResponse.error);
+    }
+  }
+
+  async loadTableOptions() {
+    if (!this.client) return;
+
+    try {
+      const tables = await this.client.listTables();
+      
+      const defaultTableSelect = document.getElementById('defaultTable');
+      const linkedinTableSelect = document.getElementById('linkedinTable');
+
+      // Clear existing options
+      defaultTableSelect.innerHTML = '';
+      linkedinTableSelect.innerHTML = '';
+
+      // Add table options
+      tables.forEach(table => {
+        const option1 = new Option(table.name, table.name);
+        const option2 = new Option(table.name, table.name);
+        
+        defaultTableSelect.add(option1);
+        linkedinTableSelect.add(option2);
+      });
+
+      // Set current values
+      defaultTableSelect.value = this.settings.defaultTable || (tables.length > 0 ? tables[0].name : '');
+      linkedinTableSelect.value = this.settings.linkedinTable || 'Contacts';
+
+    } catch (error) {
+      console.error('Failed to load tables:', error);
+    }
+  }
+
+  async checkConnection() {
+    if (!this.client) return false;
+
+    try {
+      const result = await this.client.testConnection();
+      this.updateConnectionStatus(result.success);
+      return result.success;
+    } catch (error) {
+      this.updateConnectionStatus(false);
+      return false;
+    }
+  }
+
+  updateConnectionStatus(isConnected) {
+    const statusDot = document.querySelector('.status-dot');
+    const statusText = document.querySelector('.status-text');
+
+    if (isConnected) {
+      statusDot.className = 'status-dot connected';
+      statusText.textContent = 'Connected';
+    } else {
+      statusDot.className = 'status-dot disconnected';
+      statusText.textContent = 'Not Connected';
+    }
+  }
+
+  updateUIForCurrentPage() {
+    if (!this.currentTab) return;
+
+    const url = this.currentTab.url;
+    const quickSaveBtn = document.getElementById('quickSaveBtn');
+    const quickSaveSubtext = document.getElementById('quickSaveSubtext');
+    const linkedinSaveBtn = document.getElementById('linkedinSaveBtn');
+
+    // Update quick save button text based on current page
+    if (url.includes('linkedin.com/in/')) {
+      quickSaveSubtext.textContent = 'Save LinkedIn profile';
+      linkedinSaveBtn.style.display = 'block';
+    } else if (url.includes('github.com')) {
+      quickSaveSubtext.textContent = 'Save GitHub repository';
+    } else if (url.includes('twitter.com') || url.includes('x.com')) {
+      quickSaveSubtext.textContent = 'Save tweet';
+    } else {
+      quickSaveSubtext.textContent = 'Save this page';
+    }
+
+    // Hide LinkedIn button if not on LinkedIn
+    if (!url.includes('linkedin.com')) {
+      linkedinSaveBtn.style.display = 'none';
+    }
+  }
+
+  async saveSettings(newSettings = null) {
+    try {
+      const settingsToSave = newSettings || {
+        defaultTable: document.getElementById('defaultTable')?.value || this.settings.defaultTable,
+        linkedinTable: document.getElementById('linkedinTable')?.value || this.settings.linkedinTable,
+        autoSave: document.getElementById('autoSave')?.checked || this.settings.autoSave,
+        notifications: document.getElementById('notifications')?.checked !== false,
+        ...this.settings
+      };
+
+      if (newSettings) {
+        Object.assign(settingsToSave, newSettings);
+      }
+
+      const response = await chrome.runtime.sendMessage({
+        action: 'saveSettings',
+        settings: settingsToSave
+      });
+
+      if (response.success) {
+        this.settings = settingsToSave;
+      }
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+    }
+  }
+
+  async loadUsageStats() {
+    try {
+      const result = await chrome.storage.local.get(['usageStats']);
+      const stats = result.usageStats || { weeklyClips: 0, totalClips: 0 };
+      
+      document.getElementById('weeklyClips').textContent = stats.weeklyClips;
+      document.getElementById('usageInfo').style.display = 'block';
+    } catch (error) {
+      console.error('Failed to load usage stats:', error);
+    }
+  }
+
+  async updateUsageStats() {
+    // Reload usage stats after saving
+    setTimeout(() => this.loadUsageStats(), 500);
+  }
+
+  toggleSettings() {
+    const settings = document.getElementById('settings');
+    const isVisible = settings.style.display !== 'none';
+    
+    settings.style.display = isVisible ? 'none' : 'block';
+    
+    const toggleBtn = document.getElementById('settingsToggle');
+    toggleBtn.textContent = isVisible ? 'Settings' : 'Hide Settings';
+  }
+
+  openHelp() {
+    chrome.tabs.create({
+      url: 'https://github.com/rashidazarang/airtable-clipper#readme'
+    });
+  }
+
+  async openSidePanel() {
+    try {
+      await chrome.runtime.sendMessage({
+        action: 'openSidePanel'
+      });
+      window.close();
+    } catch (error) {
+      console.error('Failed to open side panel:', error);
+    }
+  }
+
+  openDatabaseSetup() {
+    // Open the database setup wizard in a new window
+    chrome.tabs.create({
+      url: chrome.runtime.getURL('base-setup.html'),
+      active: true
+    });
+    window.close();
+  }
+
+  showStatusMessage(message, type = 'success') {
+    const statusMessage = document.getElementById('statusMessage');
+    const statusIcon = document.getElementById('statusIcon');
+    const statusText = document.getElementById('statusText');
+
+    statusIcon.textContent = type === 'success' ? '✅' : '❌';
+    statusText.textContent = message;
+    statusMessage.className = `status-message ${type}`;
+    statusMessage.style.display = 'block';
+
+    // Auto-hide after 3 seconds
+    setTimeout(() => this.hideStatusMessage(), 3000);
+  }
+
+  hideStatusMessage() {
+    const statusMessage = document.getElementById('statusMessage');
+    statusMessage.style.display = 'none';
+  }
+
+  showLoading(text = 'Processing...') {
+    const loadingOverlay = document.getElementById('loadingOverlay');
+    const loadingText = document.getElementById('loadingText');
+    
+    loadingText.textContent = text;
+    loadingOverlay.style.display = 'flex';
+  }
+
+  hideLoading() {
+    const loadingOverlay = document.getElementById('loadingOverlay');
+    loadingOverlay.style.display = 'none';
+  }
+}
+
+// Initialize popup when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  new PopupController();
+});

package/airtable-clipper/extension/styles/content.css

@@ -0,0 +1,229 @@
+/* Airtable Clipper Content Script Styles */
+
+/* Floating Action Button */
+#airtable-clipper-fab {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+#airtable-clipper-fab .fab-main {
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#airtable-clipper-fab .fab-main:hover {
+  transform: scale(1.1) rotate(5deg);
+}
+
+#airtable-clipper-fab .fab-main:active {
+  transform: scale(0.95);
+}
+
+/* Selection Toolbar */
+#airtable-clipper-selection-toolbar {
+  animation: fadeInUp 0.2s ease;
+}
+
+#airtable-clipper-selection-toolbar .selection-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Bulk Mode Overlay */
+#airtable-clipper-bulk-overlay {
+  animation: slideDown 0.3s ease;
+}
+
+#airtable-clipper-bulk-overlay .bulk-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+/* Bulk Selection Highlights */
+.airtable-clipper-selected {
+  background: rgba(102, 126, 234, 0.1) !important;
+  border: 2px solid #667eea !important;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.airtable-clipper-selectable:hover {
+  background: rgba(102, 126, 234, 0.05) !important;
+  cursor: pointer;
+}
+
+/* Notifications */
+#airtable-clipper-notification {
+  animation: slideInRight 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* Loading States */
+.airtable-clipper-loading {
+  position: relative;
+  opacity: 0.7;
+}
+
+.airtable-clipper-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid #667eea;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Site-specific enhancements */
+
+/* LinkedIn */
+body[class*="linkedin"] .airtable-clipper-selected,
+[data-test-id*="search-result"] .airtable-clipper-selected {
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+/* GitHub */
+.repository-content .airtable-clipper-selected,
+.Box .airtable-clipper-selected {
+  border-radius: 6px;
+}
+
+/* Stack Overflow */
+.question-summary .airtable-clipper-selected,
+.answer .airtable-clipper-selected {
+  border-left: 4px solid #667eea;
+  padding-left: 8px;
+}
+
+/* Medium */
+article .airtable-clipper-selected {
+  border-radius: 8px;
+  padding: 8px;
+  margin: 4px 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  #airtable-clipper-fab {
+    bottom: 80px; /* Above mobile browser UI */
+    right: 16px;
+    z-index: 10000;
+  }
+  
+  #airtable-clipper-fab .fab-main {
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+  }
+  
+  #airtable-clipper-bulk-overlay {
+    font-size: 12px;
+    padding: 8px 12px;
+  }
+  
+  #airtable-clipper-bulk-overlay .bulk-header {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  
+  #airtable-clipper-bulk-overlay .bulk-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  #airtable-clipper-notification {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+    font-size: 13px;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .airtable-clipper-selected {
+    background: rgba(102, 126, 234, 0.2) !important;
+    border-color: #818cf8 !important;
+  }
+  
+  .airtable-clipper-selectable:hover {
+    background: rgba(102, 126, 234, 0.1) !important;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  #airtable-clipper-fab .fab-main {
+    border: 2px solid #000;
+  }
+  
+  .airtable-clipper-selected {
+    border-width: 3px !important;
+    background: rgba(102, 126, 234, 0.3) !important;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  #airtable-clipper-fab .fab-main,
+  #airtable-clipper-notification,
+  #airtable-clipper-selection-toolbar,
+  #airtable-clipper-bulk-overlay,
+  .airtable-clipper-selected {
+    animation: none !important;
+    transition: none !important;
+  }
+  
+  #airtable-clipper-fab .fab-main:hover {
+    transform: none !important;
+  }
+}