@imsovikde/source-grab 1.0.1

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@imsovikde/source-grab",
+  "version": "1.0.1",
+  "description": "Chrome extension that captures every file your browser loads in real-time using Chrome DevTools Protocol. Filter, search, and download individually or as ZIP.",
+  "main": "background/service-worker.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "files": [
+    "manifest.json",
+    "background",
+    "content-scripts",
+    "sidepanel",
+    "icons",
+    "design-tokens.css",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/imsovikde/source-grab.git"
+  },
+  "keywords": [
+    "chrome-extension",
+    "devtools-protocol",
+    "cdp",
+    "resource-sniffer",
+    "network-interceptor",
+    "asset-downloader",
+    "media-grabber",
+    "mv3",
+    "sidepanel"
+  ],
+  "author": "Souvik Dey <imsovikde@gmail.com> (https://github.com/imsovikde)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/imsovikde/source-grab/issues"
+  },
+  "homepage": "https://github.com/imsovikde/source-grab#readme",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/imsovikde"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/sidepanel/app.js

@@ -0,0 +1,437 @@
+// sidepanel/app.js
+// v2.0 — Master clear, no blinking, empty state properly hidden, all buttons always visible
+
+import { RecordingIndicator } from './components/recording-indicator.js';
+import { StatsHeader } from './components/stats-header.js';
+import { FilterBar } from './components/filter-bar.js';
+import { FileList } from './components/file-list.js';
+import { BottomDock } from './components/bottom-dock.js';
+import { ProgressOverlay } from './components/progress-overlay.js';
+import { EmptyState } from './components/empty-state.js';
+import { copyFileNames } from './utils/clipboard.js';
+
+let activeTabId = null;
+let captureState = { active: false, deepScan: false, tabUrl: '' };
+
+const components = {
+  recordingIndicator: new RecordingIndicator(),
+  statsHeader: new StatsHeader(),
+  filterBar: new FilterBar(),
+  fileList: new FileList(),
+  bottomDock: new BottomDock(),
+  progressOverlay: new ProgressOverlay(),
+  emptyState: new EmptyState()
+};
+
+// ─── Toast Notification System ───
+
+function showToast(message) {
+  const container = document.getElementById('toast-container');
+  if (!container) return;
+  const toast = document.createElement('div');
+  toast.className = 'toast';
+  toast.textContent = message;
+  container.appendChild(toast);
+  setTimeout(() => {
+    toast.style.opacity = '0';
+    toast.style.transform = 'translateY(20px)';
+    toast.style.transition = 'all 0.25s ease-out';
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+// ─── Master Clear (header button) ───
+
+function masterClear() {
+  if (!activeTabId) return;
+  chrome.runtime.sendMessage({ type: 'CLEAR_CAPTURE', tabId: activeTabId });
+  components.fileList.setResources([], components.filterBar.getCurrentFilter());
+  components.fileList.selectNone();
+  components.filterBar.updateCounts({ '*': 0 });
+  components.statsHeader.update({ total: 0, newSinceLastBatch: 0, tabUrl: '' });
+  checkEmptyState();
+  updateBottomDock();
+  showToast('All capture data cleared');
+}
+
+// ─── Initialization ───
+
+async function init() {
+  // Mount all components
+  components.recordingIndicator.init(document.getElementById('recording-indicator'));
+  components.statsHeader.init(document.getElementById('stats-header'));
+  components.filterBar.init(document.getElementById('filter-bar'));
+  components.fileList.init(document.getElementById('file-list-container'));
+  components.bottomDock.init(document.getElementById('bottom-dock'));
+  components.progressOverlay.init(document.getElementById('progress-overlay'));
+  components.emptyState.init(document.getElementById('empty-state'));
+
+  // Wire master clear button
+  const masterClearBtn = document.getElementById('master-clear-btn');
+  if (masterClearBtn) {
+    masterClearBtn.addEventListener('click', masterClear);
+  }
+
+  // Get active tab
+  await refreshActiveTab();
+
+  // Load existing state
+  await loadInitialState();
+
+  // Set up event wiring
+  setupFilterWiring();
+  setupDockWiring();
+  setupStorageListener();
+  setupProgressOverlayWiring();
+  setupTabSwitchListener();
+  setupVisibilityListener();
+
+  // Show initial empty state
+  checkEmptyState();
+  updateBottomDock();
+}
+
+// ─── Active Tab Detection ───
+
+async function refreshActiveTab() {
+  try {
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (tabs.length > 0) {
+      activeTabId = tabs[0].id;
+    }
+  } catch (e) {
+    console.error('Failed to get active tab:', e);
+  }
+}
+
+// ─── Tab Switch Listener ───
+
+function setupTabSwitchListener() {
+  chrome.tabs.onActivated.addListener(async (activeInfo) => {
+    const oldTabId = activeTabId;
+    activeTabId = activeInfo.tabId;
+
+    if (oldTabId !== activeTabId) {
+      await loadInitialState();
+      checkEmptyState();
+      updateBottomDock();
+    }
+  });
+}
+
+// ─── Visibility Listener ───
+
+function setupVisibilityListener() {
+  document.addEventListener('visibilitychange', async () => {
+    if (document.visibilityState === 'visible') {
+      await refreshActiveTab();
+      await loadInitialState();
+      checkEmptyState();
+      updateBottomDock();
+    }
+  });
+}
+
+// ─── Initial State Loading ───
+
+async function loadInitialState() {
+  if (!activeTabId) return;
+
+  try {
+    const sessionKeys = [`capture_state_${activeTabId}`, `download_progress_${activeTabId}`];
+    const sessionData = await chrome.storage.session.get(sessionKeys);
+
+    if (sessionData[`capture_state_${activeTabId}`]) {
+      captureState = sessionData[`capture_state_${activeTabId}`];
+    } else {
+      captureState = { active: false, deepScan: false, tabUrl: '' };
+    }
+    components.recordingIndicator.update(captureState);
+
+    const localData = await chrome.storage.local.get(`registry_${activeTabId}`);
+    if (localData[`registry_${activeTabId}`]) {
+      handleRegistryUpdate(localData[`registry_${activeTabId}`]);
+    } else {
+      components.fileList.setResources([], components.filterBar.getCurrentFilter());
+    }
+
+    if (sessionData[`download_progress_${activeTabId}`]) {
+      const prog = sessionData[`download_progress_${activeTabId}`];
+      if (prog.completed < prog.total) {
+        components.progressOverlay.show(prog);
+      }
+    }
+  } catch (e) {
+    console.error('Failed to load initial state:', e);
+  }
+}
+
+// ─── Filter Wiring ───
+
+function setupFilterWiring() {
+  components.filterBar.onFilterChange((filterState) => {
+    components.fileList.setResources(components.fileList.allResources, filterState);
+    checkEmptyState();
+    updateBottomDock();
+  });
+
+  components.fileList.onSelectionChange(({ selectedCount, totalFiltered }) => {
+    updateBottomDock();
+  });
+}
+
+// ─── Bottom Dock Actions ───
+
+function setupDockWiring() {
+  components.bottomDock.onAction(async (action) => {
+    if (!activeTabId && action !== 'start-capture') return;
+
+    switch (action) {
+      case 'start-capture': {
+        try {
+          const hostGranted = await chrome.permissions.request({ origins: ['<all_urls>'] });
+          if (!hostGranted) {
+            showToast('Permission denied — cannot capture without host access');
+            return;
+          }
+
+          const debuggerGranted = await chrome.permissions.contains({ permissions: ['debugger'] });
+
+          await refreshActiveTab();
+
+          if (!activeTabId) {
+            showToast('No active tab found');
+            return;
+          }
+
+          const response = await chrome.runtime.sendMessage({ type: 'START_CAPTURE', tabId: activeTabId });
+          if (response?.success) {
+            showToast(debuggerGranted ? 'Capture started with Deep Scan' : 'Capture started');
+          } else {
+            showToast('Failed to start capture: ' + (response?.error || 'unknown'));
+          }
+        } catch (e) {
+          console.error('Start capture failed:', e);
+          showToast('Failed to start capture');
+        }
+        break;
+      }
+
+      case 'stop-capture': {
+        try {
+          await chrome.runtime.sendMessage({ type: 'STOP_CAPTURE', tabId: activeTabId });
+          showToast('Capture stopped');
+        } catch (e) {
+          showToast('Error stopping capture');
+        }
+        break;
+      }
+
+      case 'select-all':
+        components.fileList.selectAll();
+        updateBottomDock();
+        break;
+
+      case 'select-none':
+        components.fileList.selectNone();
+        updateBottomDock();
+        break;
+
+      case 'copy-names': {
+        const resources = components.fileList.getFilteredResources();
+        if (resources.length === 0) {
+          showToast('No files to copy');
+          return;
+        }
+        const { success, count } = await copyFileNames(resources);
+        if (success) {
+          showToast(`Copied ${count} filename${count !== 1 ? 's' : ''} to clipboard`);
+          components.bottomDock.showCopySuccess();
+        } else {
+          showToast('Failed to copy to clipboard');
+        }
+        break;
+      }
+
+      case 'download-selected': {
+        let urls = components.fileList.getSelectedUrls();
+        if (urls.length === 0) {
+          urls = components.fileList.getFilteredResources().map(r => r.url);
+        }
+        if (urls.length === 0) {
+          showToast('No files to download');
+          return;
+        }
+        chrome.runtime.sendMessage({
+          type: 'DOWNLOAD_SELECTED',
+          tabId: activeTabId,
+          urls
+        });
+        showToast(`Downloading ${urls.length} file${urls.length !== 1 ? 's' : ''}...`);
+        break;
+      }
+
+      case 'download-zip': {
+        let urls = components.fileList.getSelectedUrls();
+        if (urls.length === 0) {
+          urls = components.fileList.getFilteredResources().map(r => r.url);
+        }
+        if (urls.length === 0) {
+          showToast('No files to download');
+          return;
+        }
+        const now = new Date();
+        const dateStr = now.toISOString().slice(0, 10);
+        const timeStr = now.toTimeString().slice(0, 8).replace(/:/g, '-');
+        const zipName = `SourceGrab-${dateStr}_${timeStr}.zip`;
+        chrome.runtime.sendMessage({
+          type: 'DOWNLOAD_ZIP',
+          tabId: activeTabId,
+          urls,
+          zipFilename: zipName
+        });
+        showToast(`Building ZIP with ${urls.length} files...`);
+        break;
+      }
+
+      case 'auto-scroll': {
+        chrome.runtime.sendMessage({ type: 'AUTO_SCROLL', tabId: activeTabId });
+        showToast('Auto-scrolling page to discover lazy content...');
+        break;
+      }
+
+      case 'stop-auto-scroll': {
+        chrome.runtime.sendMessage({ type: 'STOP_AUTO_SCROLL', tabId: activeTabId });
+        showToast('Auto-scroll stopped');
+        break;
+      }
+
+      case 'clear-capture': {
+        masterClear();
+        break;
+      }
+    }
+  });
+}
+
+// ─── Progress Overlay Wiring ───
+
+function setupProgressOverlayWiring() {
+  components.progressOverlay.onRetry((url) => {
+    chrome.runtime.sendMessage({ type: 'RETRY_DOWNLOAD', tabId: activeTabId, url });
+  });
+
+  components.progressOverlay.onCancel(() => {
+    // Cancel just hides the overlay; downloads in progress will complete
+  });
+}
+
+// ─── Storage Change Listener (real-time updates) ───
+
+function setupStorageListener() {
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (!activeTabId) return;
+
+    // Registry changes from chrome.storage.local → update file list
+    if (area === 'local') {
+      const registryKey = `registry_${activeTabId}`;
+      if (changes[registryKey]) {
+        handleRegistryUpdate(changes[registryKey].newValue);
+      }
+    }
+
+    // Session storage: capture state + download progress
+    if (area === 'session') {
+      const stateKey = `capture_state_${activeTabId}`;
+      if (changes[stateKey]) {
+        captureState = changes[stateKey].newValue || { active: false, deepScan: false, tabUrl: '' };
+        components.recordingIndicator.update(captureState);
+        updateBottomDock();
+        checkEmptyState();
+      }
+
+      const progressKey = `download_progress_${activeTabId}`;
+      if (changes[progressKey]) {
+        const prog = changes[progressKey].newValue;
+        if (prog) {
+          components.progressOverlay.show(prog);
+          if (prog.completed >= prog.total && prog.failed === 0) {
+            setTimeout(() => {
+              components.progressOverlay.hide();
+              showToast(`Downloaded ${prog.completed} file${prog.completed !== 1 ? 's' : ''} successfully`);
+            }, 1500);
+          }
+        } else {
+          components.progressOverlay.hide();
+        }
+      }
+    }
+  });
+}
+
+// ─── Registry Update Handler ───
+
+function handleRegistryUpdate(registry) {
+  if (!registry || !registry.resources) return;
+
+  const resourcesArray = Object.values(registry.resources)
+    .sort((a, b) => (a.index || 0) - (b.index || 0));
+
+  components.fileList.setResources(resourcesArray, components.filterBar.getCurrentFilter());
+
+  // Calculate category counts
+  const counts = { '*': resourcesArray.length };
+  let newCount = 0;
+  resourcesArray.forEach(r => {
+    counts[r.category] = (counts[r.category] || 0) + 1;
+    if (r.isNew) newCount++;
+  });
+  components.filterBar.updateCounts(counts);
+
+  // Update stats header
+  components.statsHeader.update({
+    total: resourcesArray.length,
+    newSinceLastBatch: newCount,
+    tabUrl: captureState.tabUrl || ''
+  });
+
+  checkEmptyState();
+  updateBottomDock();
+}
+
+// ─── UI State Helpers ───
+
+function updateBottomDock() {
+  const selectedCount = components.fileList.selectedUrls?.size || 0;
+  const totalFiltered = components.fileList.filteredResources?.length || 0;
+  components.bottomDock.updateState({
+    capturing: captureState.active,
+    selectedCount,
+    totalFiltered,
+    deepScan: captureState.deepScan
+  });
+}
+
+function checkEmptyState() {
+  const allCount = components.fileList.allResources?.length || 0;
+  const filteredCount = components.fileList.filteredResources?.length || 0;
+
+  if (allCount > 0) {
+    if (filteredCount === 0) {
+      components.emptyState.show('no-results');
+    } else {
+      // IMPORTANT: Always hide empty state when there are files to show
+      components.emptyState.hide();
+    }
+  } else {
+    if (captureState.active) {
+      components.emptyState.show('capturing');
+    } else {
+      components.emptyState.show('idle');
+    }
+  }
+}
+
+// ─── Boot ───
+
+document.addEventListener('DOMContentLoaded', init);

package/sidepanel/components/bottom-dock.js

@@ -0,0 +1,148 @@
+// sidepanel/components/bottom-dock.js
+// v2.0 — ALL buttons visible ALL the time. No conditional hiding.
+
+export class BottomDock {
+  constructor() {
+    this.container = null;
+    this.actionCallback = null;
+    this.isScrolling = false;
+    this._rendered = false;
+  }
+
+  init(container) {
+    this.container = container;
+  }
+
+  render(state) {
+    const { capturing, selectedCount, totalFiltered } = state;
+    const dlCount = selectedCount > 0 ? selectedCount : totalFiltered;
+
+    this.container.innerHTML = `
+      <button class="dock-btn" id="btn-all" title="Select All">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#icon-select-all"></use></svg>
+        <span class="dock-btn-label">All</span>
+      </button>
+      <button class="dock-btn" id="btn-none" title="Deselect All">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#icon-deselect"></use></svg>
+        <span class="dock-btn-label">None</span>
+      </button>
+      <button class="dock-btn" id="btn-copy" title="Copy Filenames">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#icon-copy"></use></svg>
+        <span class="dock-btn-label">Copy</span>
+      </button>
+      <button class="dock-btn ${this.isScrolling ? 'success' : ''}" id="btn-scroll" title="${this.isScrolling ? 'Stop Scrolling' : 'Auto-Scroll'}">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#icon-auto-scroll"></use></svg>
+        <span class="dock-btn-label">${this.isScrolling ? 'Stop' : 'Scroll'}</span>
+      </button>
+      <button class="dock-btn" id="btn-zip" title="Download as ZIP">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#icon-download-zip"></use></svg>
+        <span class="dock-btn-label">ZIP</span>
+      </button>
+      <button class="dock-btn" id="btn-download" title="Download">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#icon-download"></use></svg>
+        <span class="dock-btn-label">${dlCount || 0}</span>
+      </button>
+      <button class="dock-btn ${capturing ? 'danger' : 'primary'}" id="btn-capture-toggle" title="${capturing ? 'Stop Capture' : 'Start Capture'}">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#${capturing ? 'icon-stop' : 'icon-record'}"></use></svg>
+        <span class="dock-btn-label">${capturing ? 'Stop' : 'Start'}</span>
+      </button>
+      <button class="dock-btn" id="btn-clear" title="Clear All">
+        <svg width="18" height="18"><use href="icons/ui-icons.svg#icon-clear"></use></svg>
+        <span class="dock-btn-label">Clear</span>
+      </button>
+    `;
+    this._rendered = true;
+    this.attachEvents(capturing);
+  }
+
+  updateState(state) {
+    const { capturing, selectedCount, totalFiltered } = state;
+
+    if (!this._rendered) {
+      this.render(state);
+      return;
+    }
+
+    // Update download count without full re-render
+    const dlCount = selectedCount > 0 ? selectedCount : totalFiltered;
+    const dlLabel = this.container.querySelector('#btn-download .dock-btn-label');
+    if (dlLabel) dlLabel.textContent = dlCount || 0;
+
+    // Update capture toggle button without full re-render
+    const capBtn = this.container.querySelector('#btn-capture-toggle');
+    if (capBtn) {
+      const wasCapturing = capBtn.classList.contains('danger');
+      if (capturing !== wasCapturing) {
+        // State changed — need to update button appearance
+        capBtn.classList.toggle('danger', capturing);
+        capBtn.classList.toggle('primary', !capturing);
+        capBtn.title = capturing ? 'Stop Capture' : 'Start Capture';
+        const svg = capBtn.querySelector('use');
+        if (svg) svg.setAttribute('href', `icons/ui-icons.svg#${capturing ? 'icon-stop' : 'icon-record'}`);
+        const label = capBtn.querySelector('.dock-btn-label');
+        if (label) label.textContent = capturing ? 'Stop' : 'Start';
+        // Re-attach this one button's event
+        capBtn.onclick = () => this.emit(capturing ? 'stop-capture' : 'start-capture');
+      }
+    }
+
+    // Update scroll button
+    const scrollBtn = this.container.querySelector('#btn-scroll');
+    if (scrollBtn) {
+      scrollBtn.classList.toggle('success', this.isScrolling);
+      const scrollLabel = scrollBtn.querySelector('.dock-btn-label');
+      if (scrollLabel) scrollLabel.textContent = this.isScrolling ? 'Stop' : 'Scroll';
+    }
+  }
+
+  onAction(callback) {
+    this.actionCallback = callback;
+  }
+
+  emit(action) {
+    if (this.actionCallback) this.actionCallback(action);
+  }
+
+  showCopySuccess() {
+    const copyBtn = this.container.querySelector('#btn-copy');
+    if (copyBtn) {
+      copyBtn.classList.add('copied');
+      setTimeout(() => copyBtn.classList.remove('copied'), 1500);
+    }
+  }
+
+  attachEvents(capturing) {
+    const bind = (id, action) => {
+      const el = this.container.querySelector(id);
+      if (el) el.onclick = () => this.emit(action);
+    };
+
+    // Capture toggle — single button that starts or stops
+    const capBtn = this.container.querySelector('#btn-capture-toggle');
+    if (capBtn) {
+      capBtn.onclick = () => this.emit(capturing ? 'stop-capture' : 'start-capture');
+    }
+
+    bind('#btn-all', 'select-all');
+    bind('#btn-none', 'select-none');
+    bind('#btn-copy', 'copy-names');
+    bind('#btn-zip', 'download-zip');
+    bind('#btn-download', 'download-selected');
+    bind('#btn-clear', 'clear-capture');
+
+    // Auto-scroll toggle
+    const scrollBtn = this.container.querySelector('#btn-scroll');
+    if (scrollBtn) {
+      scrollBtn.onclick = () => {
+        if (this.isScrolling) {
+          this.isScrolling = false;
+          this.emit('stop-auto-scroll');
+        } else {
+          this.isScrolling = true;
+          this.emit('auto-scroll');
+          setTimeout(() => { this.isScrolling = false; }, 30000);
+        }
+      };
+    }
+  }
+}

package/sidepanel/components/empty-state.js

@@ -0,0 +1,40 @@
+export class EmptyState {
+  constructor() {
+    this.container = null;
+  }
+
+  init(container) {
+    this.container = container;
+  }
+
+  show(state) {
+    let title = '';
+    let subtitle = '';
+
+    switch (state) {
+      case 'idle':
+        title = 'Click Start Capture to begin';
+        subtitle = 'SourceGrab will detect every file loaded by this page';
+        break;
+      case 'capturing':
+        title = 'Waiting for resources...';
+        subtitle = 'Browse or scroll the page to trigger loading';
+        break;
+      case 'no-results':
+        title = 'No files match your filter';
+        subtitle = 'Try adjusting your search or category filter';
+        break;
+    }
+
+    this.container.innerHTML = `
+      <div class="empty-decoration"></div>
+      <div class="empty-title">${title}</div>
+      <div class="empty-subtitle">${subtitle}</div>
+    `;
+    this.container.classList.add('active');
+  }
+
+  hide() {
+    this.container.classList.remove('active');
+  }
+}