@rashidazarang/airtable-mcp 1.5.0 → 2.1.0

package/airtable-clipper/test-extension/icons/README.md

@@ -0,0 +1,69 @@
+# Extension Icons
+
+This directory contains the required icon files for the Chrome extension.
+
+## Required Sizes
+
+- **icon-16.png** (16x16) - Extension management page
+- **icon-32.png** (32x32) - Extension management page & Windows  
+- **icon-48.png** (48x48) - Extensions page
+- **icon-128.png** (128x128) - Chrome Web Store & install dialog
+
+## Design Guidelines
+
+### Visual Style
+- **Symbol**: Simple paperclip or clipboard icon
+- **Colors**: Airtable brand colors (blue #667eea to purple #764ba2 gradient)
+- **Style**: Modern, clean, professional
+- **Background**: Transparent PNG
+
+### Technical Requirements
+- **Format**: PNG with transparent background
+- **Quality**: High resolution, crisp at all sizes
+- **Colors**: Web-safe colors that work on light and dark themes
+- **Consistency**: Same design scaled to different sizes
+
+### Design Inspiration
+The icon should represent:
+- 📎 **Clipping/Saving**: Paperclip, clipboard, or save symbol
+- 🔗 **Connection**: Link between web and Airtable
+- ⚡ **Speed**: Quick, efficient data capture
+- 🎯 **Precision**: Accurate data extraction
+
+## Creating Icons
+
+### Tools
+- **Figma**: For vector-based design
+- **Sketch**: Professional icon design
+- **Adobe Illustrator**: Vector graphics
+- **GIMP/Photoshop**: Raster editing
+
+### Process
+1. Design at highest resolution (128x128)
+2. Use vector graphics for scalability  
+3. Export as PNG with transparent background
+4. Test visibility on Chrome toolbar
+5. Ensure clarity at 16x16 size
+
+## Placeholder Status
+
+⚠️ **Current files are placeholders**
+
+The current icon files are text placeholders. For production deployment, replace with actual PNG icons following the design guidelines above.
+
+## Quick Icon Generation
+
+For rapid prototyping, you can generate simple icons using:
+
+```bash
+# Create simple colored squares as placeholders
+convert -size 16x16 xc:'#667eea' extension/icons/icon-16.png
+convert -size 32x32 xc:'#667eea' extension/icons/icon-32.png  
+convert -size 48x48 xc:'#667eea' extension/icons/icon-48.png
+convert -size 128x128 xc:'#667eea' extension/icons/icon-128.png
+```
+
+Or use online icon generators:
+- [Favicon.io](https://favicon.io/)
+- [RealFaviconGenerator](https://realfavicongenerator.net/)
+- [Canva Icon Maker](https://canva.com)

package/airtable-clipper/test-extension/icons/icon-128.png

@@ -0,0 +1,2 @@
+# Placeholder icon - 128x128 pixels
+# For production, replace with actual PNG file

package/airtable-clipper/test-extension/icons/icon-16.png

@@ -0,0 +1,3 @@
+# Placeholder icon - 16x16 pixels
+# In a real deployment, this would be an actual PNG file
+# For now, creating a text placeholder

package/airtable-clipper/test-extension/icons/icon-32.png

@@ -0,0 +1,2 @@
+# Placeholder icon - 32x32 pixels
+# For production, replace with actual PNG file

package/airtable-clipper/test-extension/icons/icon-48.png

@@ -0,0 +1,2 @@
+# Placeholder icon - 48x48 pixels
+# For production, replace with actual PNG file

package/airtable-clipper/test-extension/manifest.json

@@ -0,0 +1,72 @@
+{
+  "manifest_version": 3,
+  "name": "Airtable Clipper",
+  "version": "1.0.0",
+  "description": "Save anything from the web to Airtable with one click. Perfect for CRM, research, and data collection.",
+  "author": "Rashid Azarang",
+  
+  "permissions": [
+    "activeTab",
+    "storage",
+    "contextMenus",
+    "notifications",
+    "scripting",
+    "identity"
+  ],
+  
+  "host_permissions": [
+    "https://api.airtable.com/*"
+  ],
+  
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  },
+  
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "lib/*.js",
+        "styles/*.css",
+        "icons/*.png",
+        "base-setup.html",
+        "base-setup.js"
+      ],
+      "matches": ["https://api.airtable.com/*"]
+    }
+  ],
+  
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
+  
+  "oauth2": {
+    "client_id": "db9710e0-7d4b-4be6-bb15-2621448b0425",
+    "scopes": [
+      "data.records:read",
+      "data.records:write", 
+      "schema.bases:read"
+    ]
+  },
+
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self';"
+  }
+}

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

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Airtable Clipper</title>
+  <link rel="stylesheet" href="styles/popup.css">
+</head>
+<body>
+  <!-- Setup State -->
+  <div class="container" id="setupContainer">
+    <div class="header">
+      <div class="brand">
+        <div class="logo">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z" fill="currentColor"/>
+            <path d="M7 7H17V9H7V7ZM7 11H17V13H7V11ZM7 15H13V17H7V15Z" fill="currentColor"/>
+          </svg>
+          <span class="logo-text">Airtable Clipper</span>
+        </div>
+        <div class="status-badge" id="statusBadge">
+          <span class="status-dot"></span>
+          <span class="status-text">Disconnected</span>
+        </div>
+      </div>
+      <p class="subtitle">Save anything from the web to Airtable</p>
+    </div>
+
+    <div class="auth-container">
+      <!-- Primary OAuth Flow -->
+      <div class="auth-section">
+        <button class="btn btn-primary" id="oauthBtn">
+          <svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
+            <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor"/>
+          </svg>
+          <span class="btn-text">Connect with Airtable</span>
+          <div class="btn-spinner" id="oauthSpinner"></div>
+        </button>
+        <p class="auth-description">Secure OAuth authentication with one click</p>
+      </div>
+
+      <!-- Base Selection (hidden initially) -->
+      <div class="base-selector" id="baseSelector" style="display: none;">
+        <div class="form-field">
+          <label class="field-label">Choose your workspace</label>
+          <div class="select-wrapper">
+            <select class="field-select" id="baseSelect">
+              <option value="">Select a base...</option>
+            </select>
+            <svg class="select-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
+            </svg>
+          </div>
+        </div>
+        <button class="btn btn-secondary" id="confirmBaseBtn">
+          <span class="btn-text">Start Clipping</span>
+        </button>
+      </div>
+
+      <!-- Alternative Manual Auth -->
+      <div class="divider">
+        <span class="divider-text">or</span>
+      </div>
+
+      <div class="manual-auth" style="border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden;">
+        <div class="manual-summary" style="display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); font-size: var(--font-sm); font-weight: 500; color: var(--gray-700); background: var(--gray-50); border-bottom: 1px solid var(--gray-200);">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="currentColor"/>
+          </svg>
+          Connect manually with API token
+        </div>
+        
+        <div class="manual-content" style="padding: var(--space-5);">
+          <div class="form-field">
+            <label class="field-label">Personal Access Token</label>
+            <div class="input-wrapper">
+              <input type="password" class="field-input" id="tokenInput" placeholder="pat_xxxxxxxxxxxxxxxx">
+              <a href="https://airtable.com/create/tokens" target="_blank" class="input-help">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                  <path d="M14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14ZM19 19H5V5H12V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V12H19V19Z" fill="currentColor"/>
+                </svg>
+                Create token
+              </a>
+            </div>
+          </div>
+
+          <div class="form-field">
+            <label class="field-label">Base ID</label>
+            <div class="input-wrapper">
+              <input type="text" class="field-input" id="baseInput" placeholder="appXXXXXXXXXXXXXX">
+              <div class="input-hint">Found in your Airtable URL</div>
+            </div>
+          </div>
+
+          <button class="btn btn-primary" id="manualConnectBtn" onclick="console.log('Button clicked directly!')" style="background: #3b82f6 !important; color: white !important; pointer-events: auto !important; position: relative !important; z-index: 999 !important;">
+            <span class="btn-text">Connect</span>
+            <div class="btn-spinner" id="manualSpinner" style="display: none;"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer-actions">
+      <button class="btn btn-ghost" id="setupBtn">
+        <svg class="btn-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
+          <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z" fill="currentColor"/>
+          <path d="M12 7V17M7 12H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+        Create optimized database
+      </button>
+    </div>
+  </div>
+
+  <!-- Connected State -->
+  <div class="container" id="connectedContainer" style="display: none;">
+    <div class="header">
+      <div class="brand">
+        <div class="page-info">
+          <div class="page-icon" id="pageIcon">🌐</div>
+          <div class="page-details">
+            <h3 class="page-title" id="pageTitle">Current Page</h3>
+            <p class="page-url" id="pageUrl">example.com</p>
+          </div>
+        </div>
+        <div class="status-badge connected">
+          <span class="status-dot"></span>
+          <span class="status-text">Connected</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Primary Action -->
+    <div class="action-section">
+      <button class="btn btn-primary action-primary" id="saveBtn">
+        <svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
+          <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor"/>
+        </svg>
+        <div class="btn-content">
+          <span class="btn-text">Save Page</span>
+          <span class="btn-subtitle" id="saveTarget">to Web Clips</span>
+        </div>
+        <div class="btn-spinner" id="saveSpinner"></div>
+      </button>
+    </div>
+
+    <!-- Secondary Actions -->
+    <div class="actions-grid">
+      <button class="action-card" id="linkedinBtn" style="display: none;">
+        <div class="action-icon">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+            <path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19ZM18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5ZM6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="action-content">
+          <span class="action-title">Save Profile</span>
+          <span class="action-subtitle">Extract LinkedIn data</span>
+        </div>
+      </button>
+
+      <button class="action-card" id="bulkBtn">
+        <div class="action-icon">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+            <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="action-content">
+          <span class="action-title">Bulk Mode</span>
+          <span class="action-subtitle">Select multiple items</span>
+        </div>
+      </button>
+
+      <button class="action-card" id="settingsBtn">
+        <div class="action-icon">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+            <path d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5A3.5 3.5 0 0 1 15.5 12A3.5 3.5 0 0 1 12 15.5M19.43 12.98C19.47 12.66 19.5 12.34 19.5 12C19.5 11.66 19.47 11.34 19.43 11.02L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.54 5.05 19.27 4.96 19.05 5.05L16.56 6.05C16.04 5.65 15.48 5.32 14.87 5.07L14.49 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.51 2.42L9.13 5.07C8.52 5.32 7.96 5.66 7.44 6.05L4.95 5.05C4.73 4.96 4.46 5.05 4.34 5.27L2.34 8.73C2.22 8.95 2.27 9.22 2.46 9.37L4.57 11.02C4.53 11.34 4.5 11.67 4.5 12C4.5 12.33 4.53 12.66 4.57 12.98L2.46 14.63C2.27 14.78 2.22 15.05 2.34 15.27L4.34 18.73C4.46 18.95 4.73 19.03 4.95 18.95L7.44 17.94C7.96 18.34 8.52 18.68 9.13 18.93L9.51 21.58C9.54 21.82 9.75 22 10 22H14C14.25 22 14.46 21.82 14.49 21.58L14.87 18.93C15.48 18.68 16.04 18.34 16.56 17.94L19.05 18.95C19.27 19.03 19.54 18.95 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.98Z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="action-content">
+          <span class="action-title">Settings</span>
+          <span class="action-subtitle">Configure tables</span>
+        </div>
+      </button>
+    </div>
+  </div>
+
+  <!-- Settings Panel -->
+  <div class="settings-panel" id="settingsPanel" style="display: none;">
+    <div class="panel-header">
+      <h3 class="panel-title">Settings</h3>
+      <button class="btn-close" id="closeSettings">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+
+    <div class="panel-content">
+      <div class="setting-group">
+        <label class="setting-label">Default Table</label>
+        <div class="select-wrapper">
+          <select class="field-select" id="defaultTable">
+            <option value="Web Clips">Web Clips</option>
+          </select>
+          <svg class="select-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
+          </svg>
+        </div>
+      </div>
+
+      <div class="setting-group">
+        <label class="setting-label">LinkedIn Table</label>
+        <div class="select-wrapper">
+          <select class="field-select" id="linkedinTable">
+            <option value="Contacts">Contacts</option>
+          </select>
+          <svg class="select-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
+          </svg>
+        </div>
+      </div>
+
+      <div class="setting-group">
+        <div class="toggle-setting">
+          <div class="toggle-info">
+            <span class="toggle-label">Auto-save LinkedIn profiles</span>
+            <span class="toggle-description">Automatically save when visiting profiles</span>
+          </div>
+          <label class="toggle">
+            <input type="checkbox" id="autoSave">
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
+      </div>
+
+      <div class="setting-group">
+        <div class="toggle-setting">
+          <div class="toggle-info">
+            <span class="toggle-label">Show notifications</span>
+            <span class="toggle-description">Display success and error messages</span>
+          </div>
+          <label class="toggle">
+            <input type="checkbox" id="notifications" checked>
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
+      </div>
+
+      <div class="setting-group">
+        <button class="btn btn-danger" id="disconnectBtn">
+          <svg class="btn-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path d="M17 7L7 17M7 7L17 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          Disconnect
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Toast Notifications -->
+  <div class="toast" id="toast">
+    <div class="toast-icon" id="toastIcon"></div>
+    <div class="toast-content">
+      <div class="toast-message" id="toastMessage"></div>
+    </div>
+    <button class="toast-close" id="toastClose">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+        <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+    </button>
+  </div>
+
+  <script src="popup.js" type="module"></script>
+</body>
+</html>