Add Crawl4AI Assistant Chrome Extension

- Created manifest.json for the Crawl4AI Assistant extension.
- Added popup HTML, CSS, and JS files for the extension interface.
- Included icons and favicon for the extension.
- Implemented functionality for schema capture and code generation.
- Updated index.md to reflect the availability of the new extension.
- Enhanced LLM Context Builder layout and styles for consistency.
- Adjusted global styles for better branding and responsiveness.

docs/md_v2/apps/crawl4ai-assistant/popup/popup.js

@@ -0,0 +1,112 @@
+// Popup script for Crawl4AI Assistant
+let activeMode = null;
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Fetch GitHub stars
+  fetchGitHubStars();
+  
+  // Check current state
+  chrome.storage.local.get(['captureMode', 'captureStats'], (data) => {
+    if (data.captureMode) {
+      activeMode = data.captureMode;
+      showActiveSession(data.captureStats || {});
+    }
+  });
+
+  // Mode buttons
+  document.getElementById('schema-mode').addEventListener('click', () => {
+    startSchemaCapture();
+  });
+
+  // Session actions
+  document.getElementById('generate-code').addEventListener('click', () => {
+    generateCode();
+  });
+
+  document.getElementById('stop-capture').addEventListener('click', () => {
+    stopCapture();
+  });
+});
+
+async function fetchGitHubStars() {
+  try {
+    const response = await fetch('https://api.github.com/repos/unclecode/crawl4ai');
+    const data = await response.json();
+    const stars = data.stargazers_count;
+    
+    // Format the number (e.g., 1.2k)
+    let formattedStars;
+    if (stars >= 1000) {
+      formattedStars = (stars / 1000).toFixed(1) + 'k';
+    } else {
+      formattedStars = stars.toString();
+    }
+    
+    document.getElementById('stars-count').textContent = `⭐ ${formattedStars}`;
+  } catch (error) {
+    console.error('Failed to fetch GitHub stars:', error);
+    document.getElementById('stars-count').textContent = '⭐ 2k+';
+  }
+}
+
+function startSchemaCapture() {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.tabs.sendMessage(tabs[0].id, {
+      action: 'startSchemaCapture'
+    }, (response) => {
+      if (response && response.success) {
+        // Close the popup to let user interact with the page
+        window.close();
+      }
+    });
+  });
+}
+
+function showActiveSession(stats) {
+  document.querySelector('.mode-selector').style.display = 'none';
+  document.getElementById('active-session').classList.remove('hidden');
+  
+  updateSessionStats(stats);
+}
+
+function updateSessionStats(stats) {
+  document.getElementById('container-status').textContent = 
+    stats.container ? 'Selected ✓' : 'Not selected';
+  document.getElementById('fields-count').textContent = stats.fields || 0;
+  
+  // Enable generate button if we have container and fields
+  document.getElementById('generate-code').disabled = 
+    !stats.container || stats.fields === 0;
+}
+
+function generateCode() {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.tabs.sendMessage(tabs[0].id, {
+      action: 'generateCode'
+    });
+  });
+}
+
+function stopCapture() {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.tabs.sendMessage(tabs[0].id, {
+      action: 'stopCapture'
+    }, () => {
+      // Reset UI
+      document.querySelector('.mode-selector').style.display = 'flex';
+      document.getElementById('active-session').classList.add('hidden');
+      activeMode = null;
+      
+      // Clear storage
+      chrome.storage.local.remove(['captureMode', 'captureStats']);
+    });
+  });
+}
+
+// Listen for stats updates from content script
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.action === 'updateStats') {
+    updateSessionStats(message.stats);
+    chrome.storage.local.set({ captureStats: message.stats });
+  }
+});