@rashidazarang/airtable-mcp 1.5.0 → 2.1.0

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

@@ -0,0 +1,337 @@
+// Airtable Clipper - Background Service Worker
+// Handles context menus, notifications, and cross-tab communication
+
+class BackgroundService {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Create context menu on installation
+    chrome.runtime.onInstalled.addListener(() => {
+      this.createContextMenus();
+      this.setupNotifications();
+    });
+
+    // Handle context menu clicks
+    chrome.contextMenus.onClicked.addListener((info, tab) => {
+      this.handleContextMenuClick(info, tab);
+    });
+
+    // Handle messages from content scripts and popup
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+      this.handleMessage(message, sender, sendResponse);
+      return true; // Keep message channel open for async responses
+    });
+
+    // Handle extension icon clicks
+    chrome.action.onClicked.addListener((tab) => {
+      this.handleActionClick(tab);
+    });
+
+    // Periodic cleanup
+    chrome.alarms.onAlarm.addListener((alarm) => {
+      if (alarm.name === 'cleanup') {
+        this.cleanupStorage();
+      }
+    });
+
+    // Set up cleanup alarm
+    chrome.alarms.create('cleanup', { delayInMinutes: 60, periodInMinutes: 60 });
+  }
+
+  createContextMenus() {
+    // Remove existing menus
+    chrome.contextMenus.removeAll();
+
+    // Main menu
+    chrome.contextMenus.create({
+      id: 'save-to-airtable',
+      title: 'Save to Airtable',
+      contexts: ['page', 'selection', 'link', 'image']
+    });
+
+    // LinkedIn specific
+    chrome.contextMenus.create({
+      id: 'save-linkedin-profile',
+      title: 'Save LinkedIn Profile',
+      contexts: ['page'],
+      documentUrlPatterns: ['*://www.linkedin.com/in/*', '*://linkedin.com/in/*']
+    });
+
+    // Quick save selection
+    chrome.contextMenus.create({
+      id: 'quick-save-selection',
+      title: 'Quick Save Selected Text',
+      contexts: ['selection']
+    });
+  }
+
+  async handleContextMenuClick(info, tab) {
+    try {
+      switch (info.menuItemId) {
+        case 'save-to-airtable':
+          await this.triggerSave(tab, { type: 'general', info });
+          break;
+        case 'save-linkedin-profile':
+          await this.triggerSave(tab, { type: 'linkedin', info });
+          break;
+        case 'quick-save-selection':
+          await this.triggerSave(tab, { type: 'selection', text: info.selectionText });
+          break;
+      }
+    } catch (error) {
+      console.error('Context menu error:', error);
+      this.showErrorNotification(error.message);
+    }
+  }
+
+  async triggerSave(tab, data) {
+    // Send message to content script to initiate save
+    try {
+      const response = await chrome.tabs.sendMessage(tab.id, {
+        action: 'triggerSave',
+        data: data
+      });
+
+      if (response && response.success) {
+        this.showSuccessNotification('Content saved to Airtable!');
+      } else {
+        throw new Error(response?.error || 'Failed to save content');
+      }
+    } catch (error) {
+      console.error('Save trigger error:', error);
+      // Fallback: open popup if content script isn't available
+      chrome.action.openPopup();
+    }
+  }
+
+  async handleMessage(message, sender, sendResponse) {
+    try {
+      switch (message.action) {
+        case 'saveToAirtable':
+          const result = await this.saveToAirtable(message.data);
+          sendResponse({ success: true, result });
+          break;
+
+        case 'getSettings':
+          const settings = await this.getSettings();
+          sendResponse({ success: true, settings });
+          break;
+
+        case 'saveSettings':
+          await this.saveSettings(message.settings);
+          sendResponse({ success: true });
+          break;
+
+        case 'showNotification':
+          this.showNotification(message.title, message.message, message.type);
+          sendResponse({ success: true });
+          break;
+
+        case 'openSidePanel':
+          if (sender.tab) {
+            chrome.sidePanel.open({ tabId: sender.tab.id });
+          }
+          sendResponse({ success: true });
+          break;
+
+        default:
+          sendResponse({ success: false, error: 'Unknown action' });
+      }
+    } catch (error) {
+      console.error('Message handler error:', error);
+      sendResponse({ success: false, error: error.message });
+    }
+  }
+
+  async saveToAirtable(data) {
+    // Get user settings
+    const settings = await this.getSettings();
+    
+    if (!settings.airtableToken || !settings.baseId) {
+      throw new Error('Airtable credentials not configured');
+    }
+
+    // Import Airtable client
+    const { AirtableClient } = await import('./lib/airtable-client.js');
+    const client = new AirtableClient(settings.airtableToken, settings.baseId);
+
+    // Process and save data
+    const processedData = await this.processData(data, settings);
+    const result = await client.createRecord(processedData.table, processedData.fields);
+
+    // Update usage stats
+    await this.updateUsageStats();
+
+    return result;
+  }
+
+  async processData(data, settings) {
+    // Smart data processing based on content type
+    if (data.type === 'linkedin') {
+      return {
+        table: settings.linkedinTable || 'Contacts',
+        fields: this.processLinkedInData(data)
+      };
+    } else if (data.type === 'selection') {
+      return {
+        table: settings.defaultTable || 'Clips',
+        fields: {
+          'Content': data.text,
+          'Source URL': data.url,
+          'Date Saved': new Date().toISOString(),
+          'Type': 'Text Selection'
+        }
+      };
+    } else {
+      return {
+        table: settings.defaultTable || 'Clips',
+        fields: {
+          'Title': data.title || 'Untitled',
+          'URL': data.url,
+          'Content': data.content,
+          'Date Saved': new Date().toISOString(),
+          'Type': 'Web Page'
+        }
+      };
+    }
+  }
+
+  processLinkedInData(data) {
+    return {
+      'Name': data.name || '',
+      'Title': data.title || '',
+      'Company': data.company || '',
+      'Location': data.location || '',
+      'LinkedIn URL': data.url || '',
+      'Date Added': new Date().toISOString(),
+      'Source': 'LinkedIn',
+      'Notes': data.about ? data.about.substring(0, 500) + '...' : ''
+    };
+  }
+
+  async getSettings() {
+    const result = await chrome.storage.sync.get([
+      'airtableToken',
+      'baseId',
+      'linkedinTable',
+      'defaultTable',
+      'autoSave',
+      'notifications'
+    ]);
+
+    return {
+      airtableToken: result.airtableToken || '',
+      baseId: result.baseId || '',
+      linkedinTable: result.linkedinTable || 'Contacts',
+      defaultTable: result.defaultTable || 'Clips',
+      autoSave: result.autoSave || false,
+      notifications: result.notifications !== false // Default to true
+    };
+  }
+
+  async saveSettings(settings) {
+    await chrome.storage.sync.set(settings);
+  }
+
+  async updateUsageStats() {
+    const stats = await chrome.storage.local.get(['usageStats']);
+    const currentStats = stats.usageStats || {
+      totalClips: 0,
+      weeklyClips: 0,
+      lastResetDate: new Date().toDateString()
+    };
+
+    // Reset weekly counter if it's a new week
+    const today = new Date().toDateString();
+    if (currentStats.lastResetDate !== today) {
+      const lastReset = new Date(currentStats.lastResetDate);
+      const daysSinceReset = Math.floor((Date.now() - lastReset.getTime()) / (1000 * 60 * 60 * 24));
+      
+      if (daysSinceReset >= 7) {
+        currentStats.weeklyClips = 0;
+        currentStats.lastResetDate = today;
+      }
+    }
+
+    currentStats.totalClips++;
+    currentStats.weeklyClips++;
+
+    await chrome.storage.local.set({ usageStats: currentStats });
+  }
+
+  setupNotifications() {
+    // Check if notifications are supported
+    if ('notifications' in chrome) {
+      // Request notification permission if needed
+      chrome.notifications.getPermissionLevel((level) => {
+        if (level !== 'granted') {
+          console.log('Notification permission not granted');
+        }
+      });
+    }
+  }
+
+  showSuccessNotification(message) {
+    this.showNotification('Success!', message, 'success');
+  }
+
+  showErrorNotification(message) {
+    this.showNotification('Error', message, 'error');
+  }
+
+  async showNotification(title, message, type = 'basic') {
+    const settings = await this.getSettings();
+    if (!settings.notifications) return;
+
+    const iconUrl = type === 'error' ? 'icons/icon-error-48.png' : 'icons/icon-48.png';
+
+    chrome.notifications.create({
+      type: 'basic',
+      iconUrl: iconUrl,
+      title: title,
+      message: message
+    });
+  }
+
+  async handleActionClick(tab) {
+    // Check if this is a LinkedIn profile page
+    if (tab.url.includes('linkedin.com/in/')) {
+      // Try to extract LinkedIn data automatically
+      try {
+        await this.triggerSave(tab, { type: 'linkedin' });
+      } catch (error) {
+        // Fallback to opening popup
+        chrome.action.openPopup();
+      }
+    } else {
+      // Open popup for general pages
+      chrome.action.openPopup();
+    }
+  }
+
+  async cleanupStorage() {
+    // Clean up old temporary data
+    const result = await chrome.storage.local.get(null);
+    const keysToRemove = [];
+
+    for (const [key, value] of Object.entries(result)) {
+      // Remove temporary data older than 24 hours
+      if (key.startsWith('temp_') && value.timestamp) {
+        const age = Date.now() - value.timestamp;
+        if (age > 24 * 60 * 60 * 1000) { // 24 hours
+          keysToRemove.push(key);
+        }
+      }
+    }
+
+    if (keysToRemove.length > 0) {
+      await chrome.storage.local.remove(keysToRemove);
+      console.log(`Cleaned up ${keysToRemove.length} temporary items`);
+    }
+  }
+}
+
+// Initialize the background service
+new BackgroundService();

package/airtable-clipper/releases/v1.0.2/base-setup.html

@@ -0,0 +1,324 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Airtable Clipper - Base Setup</title>
+  <link rel="stylesheet" href="styles/popup.css">
+  <style>
+    .setup-wizard {
+      width: 420px;
+      max-height: 600px;
+      overflow-y: auto;
+    }
+    
+    .wizard-step {
+      display: none;
+      padding: 20px;
+    }
+    
+    .wizard-step.active {
+      display: block;
+    }
+    
+    .step-indicator {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+      gap: 10px;
+    }
+    
+    .step-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: #e5e7eb;
+      transition: background-color 0.3s ease;
+    }
+    
+    .step-dot.active {
+      background-color: #667eea;
+    }
+    
+    .step-dot.completed {
+      background-color: #10b981;
+    }
+    
+    .template-preview {
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 16px 0;
+      background-color: #f9fafb;
+    }
+    
+    .table-preview {
+      margin-bottom: 16px;
+      padding: 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      background-color: white;
+    }
+    
+    .table-preview h4 {
+      margin: 0 0 8px 0;
+      color: #374151;
+      font-size: 14px;
+      font-weight: 600;
+    }
+    
+    .table-preview p {
+      margin: 0 0 8px 0;
+      font-size: 12px;
+      color: #6b7280;
+    }
+    
+    .field-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    
+    .field-tag {
+      background-color: #e0e7ff;
+      color: #3730a3;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 10px;
+      font-weight: 500;
+    }
+    
+    .validation-result {
+      margin: 16px 0;
+      padding: 12px;
+      border-radius: 6px;
+    }
+    
+    .validation-result.excellent {
+      background-color: #d1fae5;
+      border: 1px solid #a7f3d0;
+      color: #065f46;
+    }
+    
+    .validation-result.good {
+      background-color: #dbeafe;
+      border: 1px solid #93c5fd;
+      color: #1e40af;
+    }
+    
+    .validation-result.fair {
+      background-color: #fef3c7;
+      border: 1px solid #fcd34d;
+      color: #92400e;
+    }
+    
+    .validation-result.needs-work {
+      background-color: #fee2e2;
+      border: 1px solid #fca5a5;
+      color: #991b1b;
+    }
+    
+    .wizard-actions {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid #e5e7eb;
+    }
+    
+    .copy-script-area {
+      width: 100%;
+      height: 200px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 11px;
+      resize: vertical;
+    }
+    
+    .template-url {
+      display: block;
+      margin: 16px 0;
+      padding: 12px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      text-align: center;
+      font-weight: 500;
+      transition: transform 0.2s ease;
+    }
+    
+    .template-url:hover {
+      transform: translateY(-1px);
+    }
+  </style>
+</head>
+<body class="setup-wizard">
+  <!-- Step Indicator -->
+  <div class="step-indicator">
+    <div class="step-dot active" data-step="1"></div>
+    <div class="step-dot" data-step="2"></div>
+    <div class="step-dot" data-step="3"></div>
+    <div class="step-dot" data-step="4"></div>
+  </div>
+
+  <!-- Step 1: Welcome & Template Choice -->
+  <div class="wizard-step active" id="step1">
+    <h2>🚀 Create Your Airtable Clipper Database</h2>
+    <p>Let's set up the perfect Airtable base for your web clipping needs. This wizard will create optimized tables with all the right fields.</p>
+    
+    <div class="form-group">
+      <label>Choose your setup method:</label>
+      <div style="margin-top: 12px;">
+        <label class="checkbox-label">
+          <input type="radio" name="setupMethod" value="template" checked>
+          <span class="checkmark"></span>
+          <strong>One-Click Template</strong> (Recommended)
+          <br><small style="margin-left: 24px; color: #6b7280;">Instantly copy our proven database structure</small>
+        </label>
+        
+        <label class="checkbox-label" style="margin-top: 12px;">
+          <input type="radio" name="setupMethod" value="manual">
+          <span class="checkmark"></span>
+          <strong>Manual Setup Guide</strong>
+          <br><small style="margin-left: 24px; color: #6b7280;">Step-by-step instructions to create tables yourself</small>
+        </label>
+        
+        <label class="checkbox-label" style="margin-top: 12px;">
+          <input type="radio" name="setupMethod" value="existing">
+          <span class="checkmark"></span>
+          <strong>Validate Existing Base</strong>
+          <br><small style="margin-left: 24px; color: #6b7280;">Check if your current base is clipper-ready</small>
+        </label>
+      </div>
+    </div>
+
+    <div class="wizard-actions">
+      <button class="btn secondary" onclick="window.close()">Cancel</button>
+      <button class="btn primary" onclick="nextStep()">Next</button>
+    </div>
+  </div>
+
+  <!-- Step 2: Template Configuration -->
+  <div class="wizard-step" id="step2">
+    <h2>📋 Configure Your Database</h2>
+    <p>Customize which tables to include based on your use case:</p>
+
+    <div class="form-group">
+      <label class="checkbox-label">
+        <input type="checkbox" id="includeContacts" checked>
+        <span class="checkmark"></span>
+        <strong>Contacts Table</strong> - LinkedIn profiles & leads
+      </label>
+      
+      <label class="checkbox-label">
+        <input type="checkbox" id="includeClips" checked>
+        <span class="checkmark"></span>
+        <strong>Web Clips Table</strong> - Articles & web content
+      </label>
+      
+      <label class="checkbox-label">
+        <input type="checkbox" id="includeCompanies" checked>
+        <span class="checkmark"></span>
+        <strong>Companies Table</strong> - Organization profiles
+      </label>
+      
+      <label class="checkbox-label">
+        <input type="checkbox" id="includeTasks">
+        <span class="checkmark"></span>
+        <strong>Tasks Table</strong> - Follow-up actions
+      </label>
+    </div>
+
+    <div class="form-group">
+      <label for="baseName">Base Name:</label>
+      <input type="text" id="baseName" value="Airtable Clipper Database" placeholder="Enter base name">
+    </div>
+
+    <div class="wizard-actions">
+      <button class="btn secondary" onclick="prevStep()">Back</button>
+      <button class="btn primary" onclick="nextStep()">Preview</button>
+    </div>
+  </div>
+
+  <!-- Step 3: Template Preview -->
+  <div class="wizard-step" id="step3">
+    <h2>👀 Preview Your Database</h2>
+    <p>Here's what will be created in your Airtable base:</p>
+
+    <div class="template-preview" id="templatePreview">
+      <!-- Dynamically populated -->
+    </div>
+
+    <!-- Template Link -->
+    <div id="templateLinkSection" style="display: none;">
+      <h3>🎉 One-Click Template Ready!</h3>
+      <a href="#" class="template-url" id="templateLink" target="_blank">
+        📋 Copy Template to Your Airtable →
+      </a>
+      <p style="font-size: 12px; color: #6b7280; text-align: center;">
+        This will open Airtable in a new tab and copy the complete database structure
+      </p>
+    </div>
+
+    <!-- Manual Setup -->
+    <div id="manualSetupSection" style="display: none;">
+      <h3>📝 Manual Setup Instructions</h3>
+      <ol style="font-size: 13px; line-height: 1.5; padding-left: 20px;">
+        <li>Go to <a href="https://airtable.com" target="_blank">airtable.com</a> and create a new base</li>
+        <li>Name it "<span id="baseNameDisplay"></span>"</li>
+        <li>Create the tables shown above with their respective fields</li>
+        <li>Copy your Base ID and return to configure the extension</li>
+      </ol>
+      
+      <details style="margin-top: 16px;">
+        <summary style="cursor: pointer; font-weight: 500;">📋 Copy Creation Script</summary>
+        <p style="font-size: 12px; margin: 8px 0;">Copy this script and paste it into Airtable's Scripting app:</p>
+        <textarea class="copy-script-area" id="creationScript" readonly></textarea>
+        <button class="btn secondary" onclick="copyScript()" style="margin-top: 8px;">Copy Script</button>
+      </details>
+    </div>
+
+    <div class="wizard-actions">
+      <button class="btn secondary" onclick="prevStep()">Back</button>
+      <button class="btn primary" onclick="nextStep()" id="step3NextBtn">Create Database</button>
+    </div>
+  </div>
+
+  <!-- Step 4: Validation & Completion -->
+  <div class="wizard-step" id="step4">
+    <h2>✅ Database Validation</h2>
+    <p>Let's check if your Airtable base is set up correctly:</p>
+
+    <div class="form-group" id="credentialsSection">
+      <label for="validationToken">Personal Access Token:</label>
+      <input type="password" id="validationToken" placeholder="pat...">
+      
+      <label for="validationBaseId">Base ID:</label>
+      <input type="text" id="validationBaseId" placeholder="app...">
+      
+      <button class="btn primary full-width" onclick="validateBase()" id="validateBtn">
+        Validate Base Setup
+      </button>
+    </div>
+
+    <div id="validationResults" style="display: none;">
+      <!-- Validation results will be shown here -->
+    </div>
+
+    <div class="wizard-actions">
+      <button class="btn secondary" onclick="prevStep()">Back</button>
+      <button class="btn primary" onclick="completeSetup()" id="completeBtn" style="display: none;">
+        Complete Setup
+      </button>
+    </div>
+  </div>
+
+  <!-- Loading Overlay -->
+  <div class="loading-overlay" id="loadingOverlay" style="display: none;">
+    <div class="loading-spinner"></div>
+    <div class="loading-text" id="loadingText">Processing...</div>
+  </div>
+
+  <script type="module" src="base-setup.js"></script>
+</body>
+</html>