@rashidazarang/airtable-mcp 1.6.0 → 2.1.0

package/airtable-clipper/releases/v1.0.2/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/releases/v1.0.2/icons/icon-128.png

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

package/airtable-clipper/releases/v1.0.2/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/releases/v1.0.2/icons/icon-32.png

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

package/airtable-clipper/releases/v1.0.2/icons/icon-48.png

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

package/airtable-clipper/releases/v1.0.2/manifest.json

@@ -0,0 +1,62 @@
+{
+  "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"
+  ],
+  
+  "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"
+  },
+  
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self';"
+  }
+}

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

@@ -0,0 +1,157 @@
+<!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>
+  <!-- Connection State: Not Connected -->
+  <div class="popup-container" id="setupView">
+    <div class="header-simple">
+      <h2>Airtable Clipper</h2>
+      <p class="subtitle">Save web content to your Airtable</p>
+    </div>
+    
+    <div class="setup-form">
+      <div class="setup-steps">
+        <h3>Get Started in 2 Steps</h3>
+        <div class="step">
+          <div class="step-number">1</div>
+          <div class="step-content">
+            <p><strong>Get your Personal Access Token</strong></p>
+            <a href="https://airtable.com/create/tokens" target="_blank" class="help-link">
+              Create token at airtable.com/create/tokens →
+            </a>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">2</div>
+          <div class="step-content">
+            <p><strong>Get your Base ID</strong></p>
+            <p class="help-text">Found in your Airtable URL: airtable.com/<span class="highlight">appXXXXXX</span>/...</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="connect-form">
+        <div class="input-group">
+          <input type="password" id="airtableToken" placeholder="Personal Access Token (pat...)" class="token-input">
+        </div>
+        
+        <div class="input-group">
+          <input type="text" id="baseId" placeholder="Base ID (app...)" class="base-input">
+        </div>
+        
+        <button class="connect-btn" id="connectBtn">
+          <span class="btn-text">Connect to Airtable</span>
+          <span class="btn-spinner" id="connectSpinner"></span>
+        </button>
+      </div>
+      
+      <div class="quick-setup">
+        <p>Don't have a base yet?</p>
+        <button class="setup-btn" id="setupBtn">Create optimized database</button>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Connection State: Connected -->
+  <div class="popup-container connected" id="connectedView" style="display: none;">
+    <div class="header-connected">
+      <div class="site-info">
+        <div class="site-icon" id="siteIcon">🌐</div>
+        <div class="site-details">
+          <div class="site-name" id="siteName">Current Page</div>
+          <div class="site-url" id="siteUrl">example.com</div>
+        </div>
+      </div>
+      <div class="connection-indicator">
+        <div class="status-dot connected"></div>
+      </div>
+    </div>
+    
+    <div class="actions">
+      <!-- Primary Save Action -->
+      <button class="save-btn primary" id="quickSaveBtn">
+        <span class="save-icon">📎</span>
+        <div class="save-content">
+          <span class="save-text">Save Page</span>
+          <span class="save-subtitle" id="saveSubtitle">to Web Clips</span>
+        </div>
+      </button>
+      
+      <!-- Secondary Actions -->
+      <div class="secondary-actions" id="secondaryActions">
+        <button class="action-btn" id="linkedinBtn" style="display: none;">
+          <span class="action-icon">👤</span>
+          <span class="action-text">Save Profile</span>
+        </button>
+        
+        <button class="action-btn" id="bulkBtn">
+          <span class="action-icon">📋</span>
+          <span class="action-text">Select Multiple</span>
+        </button>
+        
+        <button class="action-btn" id="settingsBtn">
+          <span class="action-icon">⚙️</span>
+          <span class="action-text">Settings</span>
+        </button>
+      </div>
+    </div>
+    
+    <!-- Settings Panel -->
+    <div class="settings-panel" id="settingsPanel" style="display: none;">
+      <div class="settings-header">
+        <h3>Settings</h3>
+        <button class="close-btn" id="closeSettings">×</button>
+      </div>
+      
+      <div class="setting-item">
+        <label>Default Table</label>
+        <select id="defaultTable">
+          <option value="Web Clips">Web Clips</option>
+        </select>
+      </div>
+      
+      <div class="setting-item">
+        <label>LinkedIn Table</label>
+        <select id="linkedinTable">
+          <option value="Contacts">Contacts</option>
+        </select>
+      </div>
+      
+      <div class="setting-item">
+        <label class="toggle-label">
+          <input type="checkbox" id="autoSave">
+          <span class="toggle-switch"></span>
+          Auto-save LinkedIn profiles
+        </label>
+      </div>
+      
+      <div class="setting-item">
+        <label class="toggle-label">
+          <input type="checkbox" id="notifications" checked>
+          <span class="toggle-switch"></span>
+          Show notifications
+        </label>
+      </div>
+      
+      <div class="setting-item">
+        <button class="disconnect-btn" id="disconnectBtn">Disconnect</button>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Status Messages -->
+  <div class="toast" id="toast">
+    <div class="toast-content">
+      <span class="toast-icon" id="toastIcon">✅</span>
+      <span class="toast-message" id="toastMessage">Success!</span>
+    </div>
+  </div>
+  
+  <script src="popup.js" type="module"></script>
+</body>
+</html>