First Commit. This was the first tool I asked a machine to build for me.

2026-04-01 17:55:34 +02:00
commit f6507c5c16
8 changed files with 702 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,91 @@
+# TabCatcher
+
+> *A browser extension for people who open 47 tabs and call it "research".*
+
+TabCatcher is a tiny Microsoft Edge (and Chrome-compatible) extension that rounds up all your feral open tabs and herds them into a neat Markdown file — titles, URLs, descriptions, and all.
+
+---
+
+## What it does
+
+You click a button. Your tabs become a `.md` file. That's it. That's the whole thing.
+
+More specifically:
+
+- Counts your open tabs and windows so you can feel something
+- Fetches `<meta>` descriptions from each page (optional — it does slow things down a smidge)
+- Groups tabs by window if you're the type who organizes chaos into labeled chaos
+- Stamps the export with a timestamp so future-you knows exactly when past-you had 74 tabs open at 2am
+
+---
+
+## Installation
+
+This extension isn't on the store (yet). Load it manually:
+
+1. Clone or download this repo
+2. Open Edge and go to `edge://extensions/`
+3. Enable **Developer mode** (toggle, top-right)
+4. Click **Load unpacked** and point it at this folder
+5. Pin the extension and marvel at that little icon
+
+---
+
+## Usage
+
+1. Click the TabCatcher icon in your toolbar
+2. Pick your export options
+3. Hit **Export Tabs**
+4. Save the `.md` file somewhere you'll definitely find it later
+
+### Export options
+
+| Option | Default | What it does |
+|---|---|---|
+| Include page descriptions | On | Grabs `meta description` / `og:description` from each tab |
+| Group by window | Off | Splits the export into sections per browser window |
+| Include timestamp | On | Adds the date/time to the top of the file |
+
+---
+
+## Output format
+
+The exported file looks something like this:
+
+```markdown
+# Browser Tabs Export
+
+**Exported:** Tuesday, April 1, 2026 at 2:14 AM
+
+**Total Tabs:** 52
+
+---
+
+- **How to center a div - Stack Overflow**
+  - URL: https://stackoverflow.com/questions/...
+  - Description: The definitive resource for div-centering discourse
+
+- **cute cat videos - YouTube**
+  - URL: https://youtube.com/...
+```
+
+---
+
+## Permissions
+
+TabCatcher asks for only what it needs:
+
+- `tabs` — to read tab titles and URLs
+- `scripting` — to extract page descriptions from each tab
+- `downloads` — to save the `.md` file to your disk
+- `activeTab` — standard popup permission
+
+---
+
+## Contributing
+
+Found a bug? Have a feature idea? Open an issue or a PR. All tabs welcome.
+
+---
+
+*Built because browser bookmarks are a lie we tell ourselves.*
--- a/icon128.png
+++ b/icon128.png
--- a/icon16.png
+++ b/icon16.png
--- a/icon48.png
+++ b/icon48.png
--- a/manifest.json
+++ b/manifest.json
@@ -0,0 +1,27 @@
+{
+  "manifest_version": 3,
+  "name": "Edge Tab Catcher",
+  "version": "1.0.0",
+  "description": "Export all open tabs with their URLs, titles, and descriptions to a Markdown file",
+  "permissions": [
+    "tabs",
+    "activeTab",
+    "scripting",
+    "downloads"
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon16.png",
+      "48": "icon48.png",
+      "128": "icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  },
+  "author": "Your Name",
+  "homepage_url": "https://github.com/yourusername/tab-exporter"
+}
--- a/popup.html
+++ b/popup.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tab Exporter</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main class="container" role="main">
+    <header>
+      <h1 id="main-heading">Tab Exporter</h1>
+      <p class="subtitle">Export all your open tabs to a Markdown file</p>
+    </header>
+
+    <section class="stats" aria-labelledby="stats-heading">
+      <h2 id="stats-heading" class="visually-hidden">Tab Statistics</h2>
+      <div class="stat-card" role="status" aria-live="polite">
+        <span class="stat-number" id="tab-count">0</span>
+        <span class="stat-label">Open Tabs</span>
+      </div>
+      <div class="stat-card" role="status" aria-live="polite">
+        <span class="stat-number" id="window-count">0</span>
+        <span class="stat-label">Windows</span>
+      </div>
+    </section>
+
+    <section class="options" aria-labelledby="options-heading">
+      <h2 id="options-heading" class="section-heading">Export Options</h2>
+      
+      <div class="option-group">
+        <label class="checkbox-label">
+          <input 
+            type="checkbox" 
+            id="include-descriptions" 
+            checked
+            aria-describedby="desc-help"
+          >
+          <span>Include page descriptions</span>
+        </label>
+        <p id="desc-help" class="help-text">Fetches meta descriptions from each tab (may take longer)</p>
+      </div>
+
+      <div class="option-group">
+        <label class="checkbox-label">
+          <input 
+            type="checkbox" 
+            id="group-by-window"
+            aria-describedby="window-help"
+          >
+          <span>Group tabs by window</span>
+        </label>
+        <p id="window-help" class="help-text">Organizes tabs under separate window headings</p>
+      </div>
+
+      <div class="option-group">
+        <label class="checkbox-label">
+          <input 
+            type="checkbox" 
+            id="include-timestamp" 
+            checked
+            aria-describedby="time-help"
+          >
+          <span>Include export timestamp</span>
+        </label>
+        <p id="time-help" class="help-text">Adds date and time to the exported file</p>
+      </div>
+    </section>
+
+    <section class="actions">
+      <button 
+        id="export-btn" 
+        class="btn btn-primary"
+        aria-describedby="export-status"
+      >
+        <span class="btn-icon" aria-hidden="true">📥</span>
+        Export Tabs
+      </button>
+      
+      <div 
+        id="export-status" 
+        class="status-message" 
+        role="status" 
+        aria-live="polite" 
+        aria-atomic="true"
+      ></div>
+    </section>
+
+    <footer class="footer">
+      <p class="footer-text">
+        <kbd>Ctrl+Click</kbd> a tab to exclude it from export
+      </p>
+    </footer>
+  </main>
+
+  <script src="popup.js"></script>
+</body>
+</html>
--- a/popup.js
+++ b/popup.js
@@ -0,0 +1,207 @@
+// Initialize extension
+document.addEventListener('DOMContentLoaded', async () => {
+  await updateStats();
+  setupEventListeners();
+});
+
+// Update tab and window count statistics
+async function updateStats() {
+  try {
+    const tabs = await chrome.tabs.query({});
+    const windows = await chrome.windows.getAll();
+    
+    document.getElementById('tab-count').textContent = tabs.length;
+    document.getElementById('window-count').textContent = windows.length;
+  } catch (error) {
+    console.error('Error updating stats:', error);
+  }
+}
+
+// Setup event listeners
+function setupEventListeners() {
+  const exportBtn = document.getElementById('export-btn');
+  exportBtn.addEventListener('click', handleExport);
+  
+  // Keyboard accessibility for options
+  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+  checkboxes.forEach(checkbox => {
+    checkbox.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        checkbox.checked = !checkbox.checked;
+      }
+    });
+  });
+}
+
+// Main export handler
+async function handleExport() {
+  const exportBtn = document.getElementById('export-btn');
+  const statusEl = document.getElementById('export-status');
+  
+  // Get user options
+  const includeDescriptions = document.getElementById('include-descriptions').checked;
+  const groupByWindow = document.getElementById('group-by-window').checked;
+  const includeTimestamp = document.getElementById('include-timestamp').checked;
+  
+  // Disable button and show loading state
+  exportBtn.disabled = true;
+  const originalContent = exportBtn.innerHTML;
+  exportBtn.innerHTML = '<span class="btn-icon loading" aria-hidden="true">⏳</span>Exporting...';
+  
+  statusEl.textContent = 'Collecting tab information...';
+  statusEl.className = 'status-message loading';
+  
+  try {
+    // Get all tabs
+    const tabs = await chrome.tabs.query({});
+    
+    // Fetch descriptions if needed
+    if (includeDescriptions) {
+      statusEl.textContent = `Fetching descriptions (0/${tabs.length})...`;
+      await fetchDescriptions(tabs, statusEl);
+    }
+    
+    // Generate markdown content
+    const markdown = await generateMarkdown(tabs, {
+      includeDescriptions,
+      groupByWindow,
+      includeTimestamp
+    });
+    
+    // Trigger download
+    downloadMarkdown(markdown);
+    
+    // Show success message
+    statusEl.textContent = '✓ Successfully exported ' + tabs.length + ' tabs!';
+    statusEl.className = 'status-message success';
+    
+  } catch (error) {
+    console.error('Export error:', error);
+    statusEl.textContent = '✗ Error: ' + error.message;
+    statusEl.className = 'status-message error';
+  } finally {
+    // Re-enable button
+    exportBtn.disabled = false;
+    exportBtn.innerHTML = originalContent;
+  }
+}
+
+// Fetch descriptions from tabs
+async function fetchDescriptions(tabs, statusEl) {
+  for (let i = 0; i < tabs.length; i++) {
+    const tab = tabs[i];
+    statusEl.textContent = `Fetching descriptions (${i + 1}/${tabs.length})...`;
+    
+    try {
+      // Try to execute script to get description
+      const results = await chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        func: extractDescription
+      });
+      
+      if (results && results[0] && results[0].result) {
+        tab.description = results[0].result;
+      }
+    } catch (error) {
+      // Tab might not support script injection (e.g., chrome:// pages)
+      tab.description = null;
+    }
+  }
+}
+
+// Function to extract description (runs in tab context)
+function extractDescription() {
+  const metaDesc = document.querySelector('meta[name="description"]');
+  const ogDesc = document.querySelector('meta[property="og:description"]');
+  return (metaDesc && metaDesc.content) || 
+         (ogDesc && ogDesc.content) || 
+         null;
+}
+
+// Generate markdown content
+async function generateMarkdown(tabs, options) {
+  let markdown = '# Browser Tabs Export\n\n';
+  
+  if (options.includeTimestamp) {
+    const now = new Date();
+    const timestamp = now.toLocaleString('en-US', {
+      dateStyle: 'full',
+      timeStyle: 'short'
+    });
+    markdown += `**Exported:** ${timestamp}\n\n`;
+  }
+  
+  markdown += `**Total Tabs:** ${tabs.length}\n\n`;
+  markdown += '---\n\n';
+  
+  if (options.groupByWindow) {
+    // Group tabs by window
+    const windows = await chrome.windows.getAll();
+    const tabsByWindow = {};
+    
+    tabs.forEach(tab => {
+      if (!tabsByWindow[tab.windowId]) {
+        tabsByWindow[tab.windowId] = [];
+      }
+      tabsByWindow[tab.windowId].push(tab);
+    });
+    
+    let windowIndex = 1;
+    for (const windowId in tabsByWindow) {
+      markdown += `## Window ${windowIndex}\n\n`;
+      markdown += formatTabs(tabsByWindow[windowId], options.includeDescriptions);
+      markdown += '---\n\n';
+      windowIndex++;
+    }
+  } else {
+    // List all tabs together
+    markdown += formatTabs(tabs, options.includeDescriptions);
+  }
+  
+  return markdown;
+}
+
+// Format tabs as markdown
+function formatTabs(tabs, includeDescriptions) {
+  let content = '';
+  
+  tabs.forEach((tab, index) => {
+    // List item with title and URL
+    content += `- **${escapeMarkdown(tab.title)}**\n`;
+    content += `  - URL: ${tab.url}\n`;
+    
+    // Description if available
+    if (includeDescriptions && tab.description) {
+      content += `  - Description: ${escapeMarkdown(tab.description)}\n`;
+    }
+    
+    content += '\n';
+  });
+  
+  return content;
+}
+
+// Escape markdown special characters
+function escapeMarkdown(text) {
+  if (!text) return '';
+  return text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&');
+}
+
+// Download markdown file
+function downloadMarkdown(content) {
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  
+  const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+  const filename = `tabs-export-${timestamp}.md`;
+  
+  chrome.downloads.download({
+    url: url,
+    filename: filename,
+    saveAs: true
+  }, (downloadId) => {
+    // Cleanup object URL after download starts
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+  });
+}
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,279 @@
+:root {
+  --primary-color: #2d8659;
+  --primary-hover: #36a169;
+  --primary-active: #236b47;
+  --secondary-color: #0d9488;
+  --alternate-color: #c4b5fd;
+  --success-color: #2d8659;
+  --error-color: #ef4444;
+  --text-primary: #bfdbfe;
+  --text-secondary: #93c5fd;
+  --bg-primary: linear-gradient(135deg, #1e1b4b 0%, #1e3a8a 100%);
+  --bg-secondary: rgba(255, 255, 255, 0.05);
+  --border-color: rgba(191, 219, 254, 0.2);
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --radius: 8px;
+  --transition: all 0.2s ease;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  width: 380px;
+  min-height: 400px;
+}
+
+/* Visually hidden but accessible to screen readers */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.container {
+  padding: 20px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid rgba(196, 181, 253, 0.3);
+}
+
+h1 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--alternate-color);
+  margin-bottom: 4px;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+/* Stats Section */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: var(--bg-secondary);
+  border-radius: var(--radius);
+  padding: 16px;
+  text-align: center;
+  transition: var(--transition);
+  border: 1px solid var(--border-color);
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+}
+
+.stat-number {
+  display: block;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--secondary-color);
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Options Section */
+.options {
+  margin-bottom: 24px;
+}
+
+.section-heading {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.option-group {
+  margin-bottom: 16px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  padding: 8px;
+  border-radius: 6px;
+  transition: var(--transition);
+}
+
+.checkbox-label:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+  cursor: pointer;
+  accent-color: var(--primary-color);
+  border: 1px solid var(--border-color);
+}
+
+.checkbox-label input[type="checkbox"]:focus {
+  outline: 2px solid var(--alternate-color);
+  outline-offset: 2px;
+}
+
+.checkbox-label span {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.help-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+  margin-left: 28px;
+}
+
+/* Actions Section */
+.actions {
+  margin-bottom: 16px;
+}
+
+.btn {
+  width: 100%;
+  padding: 14px 20px;
+  font-size: 15px;
+  font-weight: 600;
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.btn:focus {
+  outline: 2px solid var(--alternate-color);
+  outline-offset: 2px;
+}
+
+.btn-primary {
+  background: var(--primary-color);
+  color: white;
+  box-shadow: var(--shadow);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+  box-shadow: var(--shadow-hover);
+  transform: translateY(-1px);
+}
+
+.btn-primary:active:not(:disabled) {
+  background: var(--primary-active);
+  transform: translateY(0);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-icon {
+  font-size: 18px;
+}
+
+.status-message {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  text-align: center;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-message.success {
+  background: rgba(45, 134, 89, 0.2);
+  color: #6ee7b7;
+  border: 1px solid var(--success-color);
+}
+
+.status-message.error {
+  background: rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+  border: 1px solid var(--error-color);
+}
+
+.status-message.loading {
+  background: rgba(13, 148, 136, 0.2);
+  color: var(--secondary-color);
+  border: 1px solid var(--secondary-color);
+}
+
+/* Footer */
+.footer {
+  padding-top: 16px;
+  border-top: 1px solid rgba(196, 181, 253, 0.3);
+}
+
+.footer-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+kbd {
+  display: inline-block;
+  padding: 2px 6px;
+  font-family: monospace;
+  font-size: 11px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  color: var(--alternate-color);
+}
+
+/* Loading spinner animation */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.btn-icon.loading {
+  animation: spin 1s linear infinite;
+}