@rashidazarang/airtable-mcp 1.6.0 → 2.1.0

package/airtable-clipper/test-extension/content.js

@@ -0,0 +1,873 @@
+// Airtable Clipper Content Script
+// Runs on all web pages to provide extraction and interaction capabilities
+
+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');
+    }
+
+    // Extract LinkedIn profile data directly
+    const profileData = this.extractLinkedInData();
+
+    return {
+      type: 'linkedin',
+      ...profileData
+    };
+  }
+
+  extractLinkedInData() {
+    console.log('Extracting LinkedIn data from:', window.location.href);
+    
+    const data = {
+      'LinkedIn URL': window.location.href,
+      'Date Added': new Date().toISOString().split('T')[0],
+      'Source': 'LinkedIn'
+    };
+
+    // Extract name - try multiple selectors
+    const nameSelectors = [
+      'h1.text-heading-xlarge',
+      '.pv-text-details__left-panel h1',
+      '.pv-top-card-profile-picture__container + div h1',
+      '.mt2 .break-words',
+      'h1[data-anonymize="person-name"]'
+    ];
+    
+    for (const selector of nameSelectors) {
+      const nameElement = document.querySelector(selector);
+      if (nameElement && nameElement.textContent.trim()) {
+        data.Name = nameElement.textContent.trim();
+        console.log('Found name:', data.Name);
+        break;
+      }
+    }
+
+    // Extract headline/title - try multiple selectors
+    const headlineSelectors = [
+      '.text-body-medium.break-words',
+      '.pv-text-details__left-panel .text-body-medium',
+      '.pv-top-card-profile-picture__container + div .text-body-medium',
+      '.mt1 .break-words'
+    ];
+    
+    for (const selector of headlineSelectors) {
+      const headlineElement = document.querySelector(selector);
+      if (headlineElement && headlineElement.textContent.trim()) {
+        data.Title = headlineElement.textContent.trim();
+        console.log('Found title:', data.Title);
+        break;
+      }
+    }
+
+    // Extract location
+    const locationSelectors = [
+      '.text-body-small.inline.t-black--light.break-words',
+      '.pv-text-details__left-panel .text-body-small',
+      '.mt1 .text-body-small'
+    ];
+    
+    for (const selector of locationSelectors) {
+      const locationElement = document.querySelector(selector);
+      if (locationElement && locationElement.textContent.trim()) {
+        data.Location = locationElement.textContent.trim();
+        console.log('Found location:', data.Location);
+        break;
+      }
+    }
+
+    // Extract current company from experience section
+    try {
+      const experienceSection = document.querySelector('#experience');
+      if (experienceSection) {
+        const firstJob = experienceSection.querySelector('.pvs-entity');
+        if (firstJob) {
+          const companyElement = firstJob.querySelector('.t-14.t-normal span[aria-hidden="true"]');
+          if (companyElement && companyElement.textContent.trim()) {
+            data.Company = companyElement.textContent.trim();
+            console.log('Found company:', data.Company);
+          }
+        }
+      }
+    } catch (e) {
+      console.log('Could not extract company:', e);
+    }
+
+    // Extract about section for notes
+    try {
+      const aboutSection = document.querySelector('#about');
+      if (aboutSection) {
+        const aboutText = aboutSection.querySelector('.full-width span[aria-hidden="true"]');
+        if (aboutText && aboutText.textContent.trim()) {
+          data.Notes = aboutText.textContent.trim().substring(0, 500);
+          console.log('Found about:', data.Notes.substring(0, 100) + '...');
+        }
+      }
+    } catch (e) {
+      console.log('Could not extract about:', e);
+    }
+
+    // If we didn't get a name, use the page title as fallback
+    if (!data.Name && document.title) {
+      const titleMatch = document.title.match(/(.+?)\s*\|\s*LinkedIn/);
+      if (titleMatch) {
+        data.Name = titleMatch[1].trim();
+        console.log('Used title as name fallback:', data.Name);
+      }
+    }
+
+    console.log('Final extracted LinkedIn data:', data);
+    return data;
+  }
+
+  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();