jlkruger/catcher-of-tabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JL Kruger
2026-04-01 17:55:34 +02:00
commit f6507c5c16
8 changed files with 702 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
README.md Normal file
View File

@@ -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.*

BIN
icon128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
icon16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 476 B

BIN
icon48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

27
manifest.json Normal file
View File

@@ -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"
}

98
popup.html Normal file
View File

@@ -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>

207
popup.js Normal file
View File

@@ -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);
});
}

279
styles.css Normal file
View File

@@ -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;
}