@rashidazarang/airtable-mcp 2.1.0 → 2.1.1

package/airtable-clipper/extension/content.js

@@ -1,771 +0,0 @@
-// Airtable Clipper Content Script
-// Runs on all web pages to provide extraction and interaction capabilities
-
-import { LinkedInScraper } from './lib/linkedin-scraper.js';
-
-class ContentScriptController {
-  constructor() {
-    this.isLinkedInPage = window.location.hostname.includes('linkedin.com');
-    this.bulkModeActive = false;
-    this.selectedElements = new Set();
-    this.floatingButton = null;
-    this.init();
-  }
-
-  init() {
-    // Wait for page to load
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => this.setup());
-    } else {
-      this.setup();
-    }
-  }
-
-  setup() {
-    // Listen for messages from popup and background
-    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-      this.handleMessage(message, sender, sendResponse);
-      return true; // Keep message channel open for async responses
-    });
-
-    // Create floating action button if appropriate
-    if (this.shouldShowFloatingButton()) {
-      this.createFloatingButton();
-    }
-
-    // LinkedIn-specific setup
-    if (this.isLinkedInPage) {
-      this.setupLinkedInFeatures();
-    }
-
-    // Setup general extraction features
-    this.setupGeneralFeatures();
-  }
-
-  async handleMessage(message, sender, sendResponse) {
-    try {
-      switch (message.action) {
-        case 'extractPageData':
-          const pageData = await this.extractPageData(message.type);
-          sendResponse({ success: true, data: pageData });
-          break;
-
-        case 'extractLinkedInProfile':
-          const profileData = await this.extractLinkedInProfile();
-          sendResponse({ success: true, data: profileData });
-          break;
-
-        case 'enterBulkMode':
-          this.enterBulkMode();
-          sendResponse({ success: true });
-          break;
-
-        case 'exitBulkMode':
-          this.exitBulkMode();
-          sendResponse({ success: true });
-          break;
-
-        case 'triggerSave':
-          await this.triggerSave(message.data);
-          sendResponse({ success: true });
-          break;
-
-        default:
-          sendResponse({ success: false, error: 'Unknown action' });
-      }
-    } catch (error) {
-      console.error('Content script error:', error);
-      sendResponse({ success: false, error: error.message });
-    }
-  }
-
-  shouldShowFloatingButton() {
-    // Show floating button on supported sites
-    const supportedSites = [
-      'linkedin.com',
-      'github.com',
-      'stackoverflow.com',
-      'medium.com',
-      'dev.to'
-    ];
-
-    return supportedSites.some(site => window.location.hostname.includes(site));
-  }
-
-  createFloatingButton() {
-    // Remove existing button if any
-    if (this.floatingButton) {
-      this.floatingButton.remove();
-    }
-
-    // Create floating action button
-    this.floatingButton = document.createElement('div');
-    this.floatingButton.id = 'airtable-clipper-fab';
-    this.floatingButton.innerHTML = `
-      <div class="fab-main" title="Save to Airtable">
-        📎
-      </div>
-    `;
-
-    // Add styles
-    this.floatingButton.style.cssText = `
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      z-index: 10000;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    `;
-
-    // Style the main button
-    const fabMain = this.floatingButton.querySelector('.fab-main');
-    fabMain.style.cssText = `
-      width: 56px;
-      height: 56px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-size: 20px;
-      cursor: pointer;
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-      transition: all 0.3s ease;
-      user-select: none;
-    `;
-
-    // Add hover effects
-    fabMain.addEventListener('mouseenter', () => {
-      fabMain.style.transform = 'scale(1.1)';
-      fabMain.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.6)';
-    });
-
-    fabMain.addEventListener('mouseleave', () => {
-      fabMain.style.transform = 'scale(1)';
-      fabMain.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
-    });
-
-    // Add click handler
-    fabMain.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.handleFloatingButtonClick();
-    });
-
-    // Add to page
-    document.body.appendChild(this.floatingButton);
-  }
-
-  async handleFloatingButtonClick() {
-    try {
-      if (this.isLinkedInPage && window.location.pathname.includes('/in/')) {
-        // LinkedIn profile page - extract profile
-        await this.triggerSave({ type: 'linkedin' });
-      } else {
-        // General page - extract page data
-        await this.triggerSave({ type: 'general' });
-      }
-    } catch (error) {
-      console.error('Floating button click failed:', error);
-      this.showNotification('Failed to save content', 'error');
-    }
-  }
-
-  async triggerSave(data) {
-    try {
-      let extractedData;
-
-      if (data.type === 'linkedin') {
-        extractedData = await this.extractLinkedInProfile();
-      } else {
-        extractedData = await this.extractPageData(data.type);
-      }
-
-      // Send to background script for saving
-      const response = await chrome.runtime.sendMessage({
-        action: 'saveToAirtable',
-        data: {
-          ...data,
-          ...extractedData,
-          timestamp: new Date().toISOString()
-        }
-      });
-
-      if (response && response.success) {
-        this.showNotification('Saved to Airtable!', 'success');
-      } else {
-        throw new Error(response?.error || 'Failed to save');
-      }
-    } catch (error) {
-      console.error('Save failed:', error);
-      this.showNotification(`Save failed: ${error.message}`, 'error');
-    }
-  }
-
-  async extractPageData(type = 'general') {
-    const data = {
-      url: window.location.href,
-      title: document.title,
-      domain: window.location.hostname,
-      extractedAt: new Date().toISOString()
-    };
-
-    // Extract meta information
-    const description = document.querySelector('meta[name="description"]');
-    if (description) {
-      data.description = description.content;
-    }
-
-    const keywords = document.querySelector('meta[name="keywords"]');
-    if (keywords) {
-      data.keywords = keywords.content;
-    }
-
-    // Extract main content based on page type
-    if (type === 'selection' && window.getSelection().toString()) {
-      data.content = window.getSelection().toString();
-      data.type = 'Text Selection';
-    } else {
-      data.content = this.extractMainContent();
-      data.type = 'Web Page';
-    }
-
-    // Site-specific extractions
-    if (window.location.hostname.includes('github.com')) {
-      data.github = this.extractGitHubData();
-    } else if (window.location.hostname.includes('stackoverflow.com')) {
-      data.stackoverflow = this.extractStackOverflowData();
-    } else if (window.location.hostname.includes('medium.com')) {
-      data.medium = this.extractMediumData();
-    }
-
-    return data;
-  }
-
-  extractMainContent() {
-    // Try different selectors for main content
-    const contentSelectors = [
-      'main',
-      'article',
-      '[role="main"]',
-      '.content',
-      '.post-content',
-      '.entry-content',
-      '#content',
-      '.main-content'
-    ];
-
-    for (const selector of contentSelectors) {
-      const element = document.querySelector(selector);
-      if (element) {
-        return this.getTextContent(element).substring(0, 5000); // Limit to 5000 chars
-      }
-    }
-
-    // Fallback: get text from body, excluding navigation and footer
-    const body = document.body.cloneNode(true);
-    
-    // Remove common navigation and footer elements
-    const elementsToRemove = ['nav', 'header', 'footer', '.nav', '.navigation', '.menu', '.sidebar'];
-    elementsToRemove.forEach(selector => {
-      const elements = body.querySelectorAll(selector);
-      elements.forEach(el => el.remove());
-    });
-
-    return this.getTextContent(body).substring(0, 5000);
-  }
-
-  getTextContent(element) {
-    // Get clean text content from element
-    const text = element.textContent || element.innerText || '';
-    return text.replace(/\s+/g, ' ').trim();
-  }
-
-  async extractLinkedInProfile() {
-    if (!this.isLinkedInPage) {
-      throw new Error('Not on LinkedIn');
-    }
-
-    const scraper = new LinkedInScraper();
-    const profileData = await scraper.extractProfile();
-
-    return {
-      type: 'linkedin',
-      ...profileData
-    };
-  }
-
-  extractGitHubData() {
-    const data = {};
-
-    // Repository name and owner
-    const repoInfo = window.location.pathname.match(/^\/([^\/]+)\/([^\/]+)/);
-    if (repoInfo) {
-      data.owner = repoInfo[1];
-      data.repository = repoInfo[2];
-    }
-
-    // Stars and forks
-    const stars = document.querySelector('#repo-stars-counter-star');
-    if (stars) data.stars = stars.textContent.trim();
-
-    const forks = document.querySelector('#repo-network-counter');
-    if (forks) data.forks = forks.textContent.trim();
-
-    // Description
-    const description = document.querySelector('[data-pjax="#repo-content-pjax-container"] p');
-    if (description) data.description = description.textContent.trim();
-
-    // Language
-    const language = document.querySelector('[data-ga-click*="Language"]');
-    if (language) data.primaryLanguage = language.textContent.trim();
-
-    return data;
-  }
-
-  extractStackOverflowData() {
-    const data = {};
-
-    // Question title
-    const title = document.querySelector('h1[itemprop="name"]');
-    if (title) data.questionTitle = title.textContent.trim();
-
-    // Question score
-    const score = document.querySelector('.js-vote-count');
-    if (score) data.score = score.textContent.trim();
-
-    // Tags
-    const tags = Array.from(document.querySelectorAll('.post-tag'))
-      .map(tag => tag.textContent.trim());
-    if (tags.length > 0) data.tags = tags;
-
-    // Views
-    const views = document.querySelector('[title*="viewed"]');
-    if (views) data.views = views.textContent.trim();
-
-    return data;
-  }
-
-  extractMediumData() {
-    const data = {};
-
-    // Author
-    const author = document.querySelector('[data-testid="authorName"]');
-    if (author) data.author = author.textContent.trim();
-
-    // Publication date
-    const date = document.querySelector('[data-testid="storyPublishDate"]');
-    if (date) data.publishDate = date.textContent.trim();
-
-    // Reading time
-    const readTime = document.querySelector('[data-testid="storyReadTime"]');
-    if (readTime) data.readingTime = readTime.textContent.trim();
-
-    // Claps
-    const claps = document.querySelector('[data-testid="clapCount"]');
-    if (claps) data.claps = claps.textContent.trim();
-
-    return data;
-  }
-
-  setupLinkedInFeatures() {
-    // Auto-save feature for LinkedIn profiles
-    if (window.location.pathname.includes('/in/')) {
-      this.checkAutoSaveSettings();
-    }
-  }
-
-  async checkAutoSaveSettings() {
-    try {
-      const response = await chrome.runtime.sendMessage({
-        action: 'getSettings'
-      });
-
-      if (response.success && response.settings.autoSave) {
-        // Auto-save after a delay to ensure page is loaded
-        setTimeout(() => {
-          this.triggerSave({ type: 'linkedin', auto: true });
-        }, 3000);
-      }
-    } catch (error) {
-      console.error('Failed to check auto-save settings:', error);
-    }
-  }
-
-  setupGeneralFeatures() {
-    // Text selection features
-    document.addEventListener('mouseup', () => {
-      const selection = window.getSelection().toString().trim();
-      if (selection.length > 10) {
-        this.showSelectionToolbar(selection);
-      } else {
-        this.hideSelectionToolbar();
-      }
-    });
-  }
-
-  showSelectionToolbar(selectedText) {
-    // Remove existing toolbar
-    this.hideSelectionToolbar();
-
-    const selection = window.getSelection();
-    const range = selection.getRangeAt(0);
-    const rect = range.getBoundingClientRect();
-
-    // Create toolbar
-    const toolbar = document.createElement('div');
-    toolbar.id = 'airtable-clipper-selection-toolbar';
-    toolbar.innerHTML = `
-      <button class="selection-btn" data-action="save">
-        📎 Save to Airtable
-      </button>
-    `;
-
-    // Style toolbar
-    toolbar.style.cssText = `
-      position: fixed;
-      top: ${rect.top + window.scrollY - 40}px;
-      left: ${rect.left + window.scrollX}px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 6px;
-      font-size: 12px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-      z-index: 10001;
-      user-select: none;
-    `;
-
-    // Style button
-    const button = toolbar.querySelector('.selection-btn');
-    button.style.cssText = `
-      background: none;
-      border: none;
-      color: white;
-      cursor: pointer;
-      font-size: 12px;
-      font-family: inherit;
-    `;
-
-    // Add click handler
-    button.addEventListener('click', () => {
-      this.triggerSave({ type: 'selection', text: selectedText });
-      this.hideSelectionToolbar();
-    });
-
-    document.body.appendChild(toolbar);
-
-    // Auto-hide after 5 seconds
-    setTimeout(() => this.hideSelectionToolbar(), 5000);
-  }
-
-  hideSelectionToolbar() {
-    const toolbar = document.getElementById('airtable-clipper-selection-toolbar');
-    if (toolbar) {
-      toolbar.remove();
-    }
-  }
-
-  enterBulkMode() {
-    if (this.bulkModeActive) return;
-
-    this.bulkModeActive = true;
-    this.selectedElements.clear();
-
-    // Add bulk mode overlay
-    this.createBulkModeOverlay();
-
-    // Add click handlers to selectable elements
-    this.addBulkModeHandlers();
-
-    this.showNotification('Bulk mode activated. Click items to select them.', 'info');
-  }
-
-  createBulkModeOverlay() {
-    const overlay = document.createElement('div');
-    overlay.id = 'airtable-clipper-bulk-overlay';
-    overlay.innerHTML = `
-      <div class="bulk-header">
-        <span class="bulk-title">📋 Bulk Mode Active</span>
-        <span class="bulk-counter">0 items selected</span>
-        <div class="bulk-actions">
-          <button class="bulk-btn save-selected">Save Selected</button>
-          <button class="bulk-btn cancel-bulk">Cancel</button>
-        </div>
-      </div>
-    `;
-
-    // Style overlay
-    overlay.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 12px 20px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-      z-index: 10002;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-    `;
-
-    // Style header
-    const header = overlay.querySelector('.bulk-header');
-    header.style.cssText = `
-      display: flex;
-      align-items: center;
-      gap: 20px;
-    `;
-
-    // Style buttons
-    const buttons = overlay.querySelectorAll('.bulk-btn');
-    buttons.forEach(btn => {
-      btn.style.cssText = `
-        background: rgba(255,255,255,0.2);
-        border: 1px solid rgba(255,255,255,0.3);
-        color: white;
-        padding: 6px 12px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 12px;
-        margin-left: 8px;
-      `;
-    });
-
-    // Add event handlers
-    overlay.querySelector('.save-selected').addEventListener('click', () => {
-      this.saveBulkSelection();
-    });
-
-    overlay.querySelector('.cancel-bulk').addEventListener('click', () => {
-      this.exitBulkMode();
-    });
-
-    document.body.appendChild(overlay);
-    document.body.style.paddingTop = '60px'; // Make room for overlay
-  }
-
-  addBulkModeHandlers() {
-    // Add handlers for clickable elements based on current site
-    let selectors = [];
-
-    if (this.isLinkedInPage) {
-      selectors = [
-        '.search-result__wrapper',
-        '.entity-result',
-        '.reusable-search__result-container'
-      ];
-    } else {
-      selectors = [
-        'article',
-        '.item',
-        '.card',
-        '.result',
-        '.post'
-      ];
-    }
-
-    selectors.forEach(selector => {
-      const elements = document.querySelectorAll(selector);
-      elements.forEach(element => {
-        element.addEventListener('click', this.handleBulkElementClick.bind(this));
-        element.style.cursor = 'pointer';
-        element.style.transition = 'all 0.2s ease';
-      });
-    });
-  }
-
-  handleBulkElementClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const element = event.currentTarget;
-    const isSelected = this.selectedElements.has(element);
-
-    if (isSelected) {
-      this.selectedElements.delete(element);
-      element.style.background = '';
-      element.style.border = '';
-    } else {
-      this.selectedElements.add(element);
-      element.style.background = 'rgba(102, 126, 234, 0.1)';
-      element.style.border = '2px solid #667eea';
-    }
-
-    this.updateBulkCounter();
-  }
-
-  updateBulkCounter() {
-    const counter = document.querySelector('.bulk-counter');
-    if (counter) {
-      const count = this.selectedElements.size;
-      counter.textContent = `${count} item${count !== 1 ? 's' : ''} selected`;
-    }
-  }
-
-  async saveBulkSelection() {
-    if (this.selectedElements.size === 0) {
-      this.showNotification('No items selected', 'error');
-      return;
-    }
-
-    this.showNotification('Saving selected items...', 'info');
-
-    try {
-      const items = [];
-      
-      for (const element of this.selectedElements) {
-        const itemData = await this.extractElementData(element);
-        if (itemData) {
-          items.push(itemData);
-        }
-      }
-
-      // Save all items
-      const response = await chrome.runtime.sendMessage({
-        action: 'saveBulkToAirtable',
-        data: {
-          items: items,
-          type: 'bulk',
-          timestamp: new Date().toISOString()
-        }
-      });
-
-      if (response && response.success) {
-        this.showNotification(`Saved ${items.length} items to Airtable!`, 'success');
-        this.exitBulkMode();
-      } else {
-        throw new Error(response?.error || 'Failed to save bulk items');
-      }
-    } catch (error) {
-      console.error('Bulk save failed:', error);
-      this.showNotification(`Bulk save failed: ${error.message}`, 'error');
-    }
-  }
-
-  async extractElementData(element) {
-    // Extract data from individual element based on site type
-    const data = {
-      type: 'bulk_item',
-      url: window.location.href,
-      extractedAt: new Date().toISOString()
-    };
-
-    if (this.isLinkedInPage) {
-      // LinkedIn search result
-      const nameElement = element.querySelector('.entity-result__title-text a, .search-result__result-link');
-      const titleElement = element.querySelector('.entity-result__primary-subtitle, .subline-level-1');
-      const companyElement = element.querySelector('.entity-result__secondary-subtitle, .subline-level-2');
-
-      if (nameElement) {
-        data.name = nameElement.textContent.trim();
-        data.linkedinUrl = nameElement.href;
-      }
-      if (titleElement) data.title = titleElement.textContent.trim();
-      if (companyElement) data.company = companyElement.textContent.trim();
-    } else {
-      // General web page element
-      const title = element.querySelector('h1, h2, h3, .title, .headline');
-      const link = element.querySelector('a[href]');
-      
-      if (title) data.title = title.textContent.trim();
-      if (link) data.url = link.href;
-      
-      data.content = this.getTextContent(element).substring(0, 1000);
-    }
-
-    return data;
-  }
-
-  exitBulkMode() {
-    if (!this.bulkModeActive) return;
-
-    this.bulkModeActive = false;
-
-    // Remove overlay
-    const overlay = document.getElementById('airtable-clipper-bulk-overlay');
-    if (overlay) {
-      overlay.remove();
-      document.body.style.paddingTop = '';
-    }
-
-    // Reset selected elements
-    this.selectedElements.forEach(element => {
-      element.style.background = '';
-      element.style.border = '';
-      element.style.cursor = '';
-    });
-    this.selectedElements.clear();
-
-    this.showNotification('Bulk mode deactivated', 'info');
-  }
-
-  showNotification(message, type = 'info') {
-    // Remove existing notification
-    const existing = document.getElementById('airtable-clipper-notification');
-    if (existing) existing.remove();
-
-    // Create notification
-    const notification = document.createElement('div');
-    notification.id = 'airtable-clipper-notification';
-    notification.textContent = message;
-
-    // Style based on type
-    const colors = {
-      success: '#10b981',
-      error: '#ef4444',
-      info: '#3b82f6'
-    };
-
-    notification.style.cssText = `
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      background: ${colors[type] || colors.info};
-      color: white;
-      padding: 12px 16px;
-      border-radius: 6px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-      font-weight: 500;
-      z-index: 10003;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-      max-width: 300px;
-      word-wrap: break-word;
-      animation: slideInRight 0.3s ease;
-    `;
-
-    // Add animation keyframes
-    if (!document.querySelector('#airtable-clipper-animations')) {
-      const style = document.createElement('style');
-      style.id = 'airtable-clipper-animations';
-      style.textContent = `
-        @keyframes slideInRight {
-          from {
-            transform: translateX(100%);
-            opacity: 0;
-          }
-          to {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        }
-      `;
-      document.head.appendChild(style);
-    }
-
-    document.body.appendChild(notification);
-
-    // Auto-hide after 3 seconds
-    setTimeout(() => {
-      if (notification && notification.parentNode) {
-        notification.remove();
-      }
-    }, 3000);
-  }
-}
-
-// Initialize content script
-new ContentScriptController();