@rashidazarang/airtable-mcp 1.6.0 → 2.1.0

package/airtable-clipper/releases/v1.0.0/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.0/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.0/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.0/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.0/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.0/manifest.json

@@ -0,0 +1,73 @@
+{
+  "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",
+    "alarms"
+  ],
+  
+  "host_permissions": [
+    "https://*.linkedin.com/*",
+    "https://api.airtable.com/*",
+    "https://*/"
+  ],
+  
+  "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"
+  },
+  
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["styles/content.css"],
+      "run_at": "document_idle"
+    }
+  ],
+  
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "lib/*.js",
+        "styles/*.css",
+        "icons/*.png",
+        "base-setup.html",
+        "base-setup.js"
+      ],
+      "matches": ["<all_urls>"]
+    }
+  ],
+  
+  "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.0/popup.html

@@ -0,0 +1,144 @@
+<!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>
+  <!-- Header -->
+  <div class="header">
+    <div class="logo">
+      <img src="icons/icon-32.png" alt="Airtable Clipper" class="logo-icon">
+      <h1>Airtable Clipper</h1>
+    </div>
+    <div class="connection-status" id="connectionStatus">
+      <span class="status-dot disconnected"></span>
+      <span class="status-text">Not Connected</span>
+    </div>
+  </div>
+
+  <!-- Quick Actions (shown when connected and on supported sites) -->
+  <div class="quick-actions" id="quickActions" style="display: none;">
+    <button class="action-btn primary" id="quickSaveBtn">
+      <span class="btn-icon">📎</span>
+      <div class="btn-content">
+        <span class="btn-text">Quick Save</span>
+        <span class="btn-subtext" id="quickSaveSubtext">Save this page</span>
+      </div>
+    </button>
+    
+    <div class="action-row">
+      <button class="action-btn secondary" id="linkedinSaveBtn" style="display: none;">
+        <span class="btn-icon">👤</span>
+        <span class="btn-text">Save Profile</span>
+      </button>
+      
+      <button class="action-btn secondary" id="bulkModeBtn">
+        <span class="btn-icon">📋</span>
+        <span class="btn-text">Bulk Mode</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Configuration (shown when not connected) -->
+  <div class="configuration" id="configuration">
+    <div class="config-section">
+      <h3>Get Started</h3>
+      <p class="help-text">Connect your Airtable to start saving web content</p>
+      
+      <div class="form-group">
+        <label for="airtableToken">Personal Access Token</label>
+        <input type="password" id="airtableToken" placeholder="pat...">
+        <a href="https://airtable.com/create/tokens" target="_blank" class="help-link">
+          Get your token →
+        </a>
+      </div>
+
+      <div class="form-group">
+        <label for="baseId">Base ID</label>
+        <input type="text" id="baseId" placeholder="app...">
+        <span class="help-text">Found in your Airtable URL</span>
+      </div>
+
+      <button class="btn primary full-width" id="connectBtn">
+        <span class="btn-loading" id="connectLoading" style="display: none;">⏳</span>
+        <span class="btn-text" id="connectText">Connect to Airtable</span>
+      </button>
+
+      <div class="form-group" style="text-align: center; margin-top: 16px;">
+        <p class="help-text">Don't have the right Airtable structure yet?</p>
+        <button class="btn secondary full-width" id="setupDatabaseBtn">
+          🚀 Create Optimized Database
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Settings (shown when connected) -->
+  <div class="settings" id="settings" style="display: none;">
+    <div class="setting-item">
+      <label for="defaultTable">Default Table</label>
+      <select id="defaultTable">
+        <option value="Clips">Clips</option>
+      </select>
+    </div>
+
+    <div class="setting-item">
+      <label for="linkedinTable">LinkedIn Table</label>
+      <select id="linkedinTable">
+        <option value="Contacts">Contacts</option>
+      </select>
+    </div>
+
+    <div class="setting-item">
+      <label class="checkbox-label">
+        <input type="checkbox" id="autoSave">
+        <span class="checkmark"></span>
+        Auto-save LinkedIn profiles
+      </label>
+    </div>
+
+    <div class="setting-item">
+      <label class="checkbox-label">
+        <input type="checkbox" id="notifications" checked>
+        <span class="checkmark"></span>
+        Show notifications
+      </label>
+    </div>
+  </div>
+
+  <!-- Status Messages -->
+  <div class="status-message" id="statusMessage" style="display: none;">
+    <div class="status-content">
+      <span class="status-icon" id="statusIcon">✅</span>
+      <span class="status-text" id="statusText">Success!</span>
+    </div>
+    <button class="status-close" id="statusClose">×</button>
+  </div>
+
+  <!-- Footer -->
+  <div class="footer">
+    <div class="footer-links">
+      <button class="footer-link" id="settingsToggle">Settings</button>
+      <button class="footer-link" id="helpBtn">Help</button>
+      <button class="footer-link" id="sidePanelBtn">Dashboard</button>
+    </div>
+    
+    <div class="usage-info" id="usageInfo" style="display: none;">
+      <span class="usage-text">
+        <span id="weeklyClips">0</span> clips this week
+      </span>
+    </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 src="popup.js" type="module"></script>
+</body>
+</html>