Developer Tools AI & Machine Learning 46 vues

Stop Wasting Tokens! LLMFeeder Cuts Context Clutter in 1 Click

B
Bright Coding
Auteur
Stop Wasting Tokens! LLMFeeder Cuts Context Clutter in 1 Click

Stop Wasting Tokens! LLMFeeder Cuts Context Clutter in 1 Click

Your LLM is only as good as the garbage you feed it.

Here's a brutal truth most developers won't admit: every single day, they're copying sloppy, bloated webpage content into ChatGPT, Claude, and Gemini—burning precious context window tokens on navigation menus, cookie banners, and footer links. The result? Skyrocketing API bills, truncated responses, and AI outputs that miss the point entirely.

What if you could strip away the noise and extract only what matters—instantly?

Enter LLMFeeder, the open-source browser extension that's quietly becoming the secret weapon of elite AI engineers. No more manual cleanup. No more wrestling with ctrl+a disasters. One click. Clean Markdown↗ Smart Converter. Maximum context efficiency.

Ready to stop hemorrhaging tokens and start getting actually useful LLM responses? Let's dive deep into why jatinkrmalik/LLMFeeder is about to become your most-installed extension.


What is LLMFeeder?

LLMFeeder is a privacy-first, client-side browser extension that transforms any web page into pristine, LLM-optimized Markdown with a single action. Created by developer Jatin K Malik, this tool bridges the critical gap between raw web content and usable AI context.

The extension leverages Mozilla's Readability algorithm—the same engine powering Firefox's reader mode—to intelligently identify and extract the main article content while discarding ads, sidebars, comments, and other distracting cruft. It then pipes this clean HTML through Turndown.js, a battle-tested HTML-to-Markdown converter, producing structured output that LLMs can parse with surgical precision.

But here's what makes LLMFeeder genuinely trending right now: the AI landscape has exploded, and context window management has become the new bottleneck. With models like GPT-4 Turbo (128K tokens) and Claude 3 Opus (200K tokens), developers assumed "more is better." Wrong. Research consistently shows that relevant, dense context outperforms bloated inputs. LLMFeeder solves this exact pain point—and the community has noticed. The project has accumulated significant GitHub stars, active contributor engagement, and real adoption across Chrome and Firefox extension stores.

Unlike scraping tools that require Python↗ Bright Coding Blog scripts, API keys, or cloud processing, LLMFeeder operates entirely within your browser. Zero backend. Zero data leakage. Zero subscription fees. It's the kind of tool that feels obvious in retrospect—yet nobody built it quite this well until now.


Key Features That Separate LLMFeeder from Copy-Paste Chaos

Intelligent Content Extraction

LLMFeeder doesn't blindly grab HTML. It uses Readability.js to perform semantic analysis, identifying the actual article body versus navigation, advertisements, and widgets. This isn't regex hacking—it's document structure intelligence that understands heading hierarchies, paragraph grouping, and content density patterns.

Multi-Tab Batch Processing (v2.1.0)

The latest release introduces Ctrl/Cmd+Shift multi-tab selection. Convert entire research sessions in one shot—merge into a single Markdown file, or download as a structured ZIP archive. Imagine prepping 15 documentation pages for a Claude project without 15 separate copy-paste operations.

Real-Time Token Counter

Built-in GPT-4/Claude tokenizer estimates your output size before you paste. Configure context limits from 4K to 32K tokens and get instant visual feedback. No more mid-conversation truncation surprises.

Link Stripping Toggle

This feature is insanely underrated. URLs in anchor text consume tokens without adding semantic value for most LLM tasks. One toggle removes them, compressing your context by 15-40% on link-heavy pages.

Customizable Metadata Templates

Academic rigor meets developer flexibility. Use six template variables—{title}, {url}, {date}, {author}, {siteName}, {excerpt}—to auto-generate consistent citation blocks. Perfect for building verifiable, traceable AI research workflows.

Privacy Architecture That Actually Respects You

  • No remote data transmission: Everything processes in your browser's sandbox
  • Zero telemetry: No analytics, tracking, or phone-home behavior
  • Minimal permissions: Only activeTab, clipboardWrite, storage, scripting
  • Fully auditable: Open source means you can verify every line

Cross-Browser Keyboard Shortcuts

Alt+Shift+M for instant convert-and-copy. Alt+Shift+D for direct download. Alt+Shift+Z for ZIP batch export. Customizable through standard browser shortcut management.


Real-World Use Cases Where LLMFeeder Dominates

1. Technical Documentation Ingestion

You're building a RAG pipeline and need to feed 50 pages of React↗ Bright Coding Blog documentation into your vector database. Manual copy-paste? Hours of cleanup. LLMFeeder's multi-tab + ZIP download? Under 3 minutes, with consistent Markdown formatting that chunking algorithms love.

2. Competitive Analysis & Market Research

Analysts need to synthesize 20 competitor blog posts, 10 product pages, and 5 whitepapers. LLMFeeder's metadata templates preserve source attribution, while link stripping keeps token counts manageable for Claude's context window. The result? Structured, citable research briefs without the usual copy-paste fatigue.

3. Academic Paper Preprocessing

Researchers using Perplexity, Elicit, or custom LLM pipelines need clean input from HTML-based journals and preprint servers. Readability extraction isolates the actual paper content—abstract, methodology, results—while discarding journal navigation and citation widgets.

4. Bug Report & Issue Triage

Engineers feeding GitHub issues, Stack Overflow threads, or Jira tickets into coding assistants need focused context. LLMFeeder's "Selected Text Only" scope lets you highlight precise code blocks and error messages, converting just what matters.

5. Content Creation & SEO Workflows

Content strategists analyzing top-ranking articles for semantic structure can batch-extract competitor content, then feed clean Markdown to LLMs for gap analysis and outline generation. The table preservation feature is especially critical for comparing structured data.


Step-by-Step Installation & Setup Guide

Method 1: Extension Stores (Recommended for 99% of Users)

Chrome Users:

  1. Navigate to the Chrome Web Store listing
  2. Click "Add to Chrome"
  3. Confirm permissions when prompted
  4. Pin the extension: click the puzzle icon → 🖱️ the pin next to LLMFeeder

Firefox Users:

  1. Visit the Firefox Add-ons page
  2. Click "Add to Firefox"
  3. Grant permissions in the dialog
  4. Access via toolbar or Alt+Shift+L

Method 2: Direct Download (Latest Release)

# Download the appropriate release from GitHub
curl -L -o llmfeeder.zip https://github.com/jatinkrmalik/LLMFeeder/releases/latest/download/LLMFeeder-Chrome-latest.zip

# Extract
unzip llmfeeder.zip -d llmfeeder/

Chrome Manual Load:

1. Navigate to chrome://extensions/
2. Toggle "Developer mode" (top-right switch)
3. Click "Load unpacked"
4. Select the extracted `extension/` directory
5. Extension appears in your toolbar

Firefox Manual Load:

1. Navigate to about:debugging#/runtime/this-firefox
2. Click "Load Temporary Add-on..."
3. Select `manifest.json` inside the `extension/` directory
4. Note: Temporary loads expire on browser restart—use the Add-ons store for permanence

Method 3: Build from Source (Developers & Contributors)

# Clone the repository
git clone git@github.com:jatinkrmalik/LLMFeeder.git
cd LLMFeeder

# Build for Chrome
./scripts/build.sh chrome
# Or with Make
make chrome

# Build for Firefox
./scripts/build.sh firefox
# Or with Make
make firefox

# Build all targets
make all

# Versioned build
make versioned-full version=2.2.0

Output structure:

dist/
├── LLMFeeder-Chrome-v2.1.0.zip    # Chrome-compatible package
├── LLMFeeder-Firefox-v2.1.0.zip   # Firefox-compatible package
└── LLMFeeder-Source-v2.1.0.zip    # Source archive

Extract your target package, then load unpacked as described above.

Initial Configuration

After installation, open the popup (Alt+Shift+L) and configure:

Setting Recommended Default Why
Content Scope Main article content Avoids nav/footer noise
Include Page Title ✅ Enabled Aids LLM context identification
Include Links ❌ Disabled Reduces token waste
Preserve Tables ✅ Enabled Maintains structured data
Metadata Format {title}\n{url}\n{date} Clean attribution block
Context Limit Match your LLM Prevents truncation

REAL Code Examples from the Repository

Let's examine how LLMFeeder actually works under the hood, using authentic patterns from the codebase.

Advertisement

Example 1: Core Content Extraction Pipeline

The content.js script orchestrates the entire transformation. Here's the essential flow:

// content.js - Core extraction and conversion logic

// Step 1: Use Mozilla's Readability to isolate main content
const documentClone = document.cloneNode(true);
const article = new Readability(documentClone).parse();
// Returns: { title, content, textContent, length, excerpt, byline, dir }
// 'content' is clean HTML; 'textContent' is plain text

// Step 2: Configure Turndown for LLM-optimized Markdown
const turndownService = new TurndownService({
  headingStyle: 'atx',        // Use # style headers
  bulletListMarker: '-',      // Consistent list formatting
  codeBlockStyle: 'fenced',   // ``` for code blocks
  emDelimiter: '_',           // _italic_ over *italic*
  strongDelimiter: '**'       // **bold** standard
});

// Step 3: Custom rule for enhanced image alt text
turndownService.addRule('enhancedImages', {
  filter: 'img',
  replacement: function(content, node) {
    const alt = node.alt || node.title || 'image';
    const src = node.getAttribute('src');
    // Smart fallback: use filename from URL if no alt text
    const descriptiveAlt = alt !== 'image' ? alt : 
      src ? src.split('/').pop().split('.')[0] : 'image';
    return `![${descriptiveAlt}](${src})`;
  }
});

// Step 4: Convert and deliver
const markdown = turndownService.turndown(article.content);

What's happening here? Readability performs DOM analysis to find the "meat" of the page—stripping ads, sidebars, and navigation. Turndown then converts this clean HTML to Markdown↗ Smart Converter with opinionated defaults that LLMs prefer: ATX headers (# not underline), fenced code blocks, and consistent emphasis delimiters. The custom image rule ensures every image has some descriptive text, preventing broken context in multimodal models.

Example 2: Multi-Tab Batch Processing (v2.1.0)

The background script handles keyboard-triggered batch operations:

// background.js - Keyboard shortcut and multi-tab handler

// Listen for Alt+Shift+Z (ZIP download of multiple tabs)
browser.commands.onCommand.addListener(async (command) => {
  if (command === 'download-zip') {
    // Query highlighted tabs across all windows
    const tabs = await browser.tabs.query({ 
      highlighted: true,
      currentWindow: true 
    });
    
    // Fall back to active tab if none highlighted
    const targetTabs = tabs.length > 1 ? tabs : 
      [await browser.tabs.query({active: true, currentWindow: true})[0]];
    
    // Execute content script on each tab, collect Markdown
    const results = await Promise.all(
      targetTabs.map(tab => 
        browser.tabs.executeScript(tab.id, {
          file: 'content.js'
        }).then(() => 
          // Message passing to get converted content
          browser.tabs.sendMessage(tab.id, {action: 'convert'})
        )
      )
    );
    
    // Package into ZIP with metadata
    const zip = new JSZip();
    results.forEach((result, i) => {
      const filename = `${targetTabs[i].title.replace(/[^a-z0-9]/gi, '_')}.md`;
      zip.file(filename, result.markdown);
    });
    
    // Trigger download
    const blob = await zip.generateAsync({type: 'blob'});
    browser.downloads.download({
      url: URL.createObjectURL(blob),
      filename: `LLMFeeder_${new Date().toISOString().slice(0,10)}.zip`
    });
  }
});

The power move: This enables research-scale workflows. Hold Ctrl+Shift, click 10 relevant tabs, hit Alt+Shift+Z—you've got a timestamped ZIP archive with sanitized filenames, ready for vector ingestion or manual review.

Example 3: Token Counting with Context Awareness

// popup.js - Real-time token estimation

// GPT-4/Claude compatible tokenizer (simplified representation)
function estimateTokens(text) {
  // Using tiktoken-style BPE approximation
  // ~0.75 tokens per word for English, with character fallbacks
  const wordCount = text.trim().split(/\s+/).length;
  const charCount = text.length;
  
  // Hybrid estimation: more accurate for code-heavy content
  const tokenEstimate = Math.ceil(
    (charCount / 4) * 0.9 + (wordCount * 0.75) * 0.1
  );
  
  return tokenEstimate;
}

// Update UI with color-coded warnings
function updateTokenDisplay(markdown, limit) {
  const tokens = estimateTokens(markdown);
  const percentage = (tokens / limit) * 100;
  
  const statusEl = document.getElementById('token-status');
  statusEl.textContent = `${tokens.toLocaleString()} / ${limit.toLocaleString()} tokens`;
  
  // Visual feedback: green → yellow → red
  statusEl.className = percentage > 90 ? 'token-danger' :
                       percentage > 70 ? 'token-warning' : 'token-ok';
  
  // Prevent conversion if over limit (configurable)
  document.getElementById('convert-btn').disabled = 
    percentage > 100 && settings.enforceLimit;
}

Why this matters: Token estimation prevents the silent truncation problem—where your carefully crafted prompt gets cut off mid-sentence because you didn't account for the webpage content's size. The hybrid algorithm handles both prose and code-dense technical documentation more accurately than simple word-count heuristics.

Example 4: Customizable Metadata Template System

// popup.js - Template variable substitution

const DEFAULT_TEMPLATE = `---
title: {title}
url: {url}
date: {date}
author: {author}
site: {siteName}
---

{excerpt}

---
`;

function applyMetadataTemplate(template, articleData, pageUrl) {
  const now = new Date();
  
  const variables = {
    '{title}': articleData.title || 'Untitled',
    '{url}': pageUrl,
    '{date}': now.toISOString().split('T')[0],
    '{author}': articleData.byline || 'Unknown',
    '{siteName}': new URL(pageUrl).hostname.replace('www.', ''),
    '{excerpt}': articleData.excerpt || ''
  };
  
  // Simple but effective variable substitution
  return template.replace(
    /\{title\}|\{url\}|\{date\}|\{author\}|\{siteName\}|\{excerpt\}/g,
    match => variables[match] || match
  );
}

// Usage: prepend to converted Markdown
const finalOutput = metadataEnabled 
  ? applyMetadataTemplate(userTemplate, article, tab.url) + '\n\n' + markdown
  : markdown;

The flexibility angle: This template system lets you match any citation style—APA-like, BibTeX-inspired, or custom organizational formats. The six variables cover 95% of attribution needs without overcomplicating the UI.


Advanced Usage & Best Practices

Keyboard-First Workflows

Disable the popup entirely. Map Alt+Shift+M to auto-convert-and-copy, then paste directly into your LLM interface. With practice, this becomes sub-2-second operation per page.

Token Budget Management

For Claude 3.5 Sonnet (200K context), set your limit to 180K to reserve headroom for system prompts and your actual query. For GPT-4o (128K), use 100K. Always leave 15-20% buffer for response generation.

Strategic Link Stripping

Enable link removal when:

  • Summarizing articles (URLs add zero semantic value)
  • Feeding documentation for code generation
  • Building training datasets

Disable when:

  • Researching for link-heavy resources (Wikipedia, MDN)
  • Verifying source credibility through URL inspection

Debug Mode for Edge Cases

Enable in Settings when converting problematic pages—paywalled content, heavy JavaScript↗ Bright Coding Blog frameworks, or nested iframe architectures. Check browser console for detailed extraction logs.

Batch Research Sessions

Use multi-tab selection with consistent metadata templates to build verifiable, chronological research corpora. The ZIP filenames include dates for automatic sorting.


Comparison with Alternatives

Feature LLMFeeder MarkDownload Copy as Markdown Manual Copy-Paste
Client-side only ✅ Yes ✅ Yes ✅ Yes ✅ Yes
Readability extraction ✅ Built-in ⚠️ Partial ❌ No ❌ No
Multi-tab batch ✅ Native ❌ No ❌ No ❌ No
Token counter ✅ Built-in ❌ No ❌ No ❌ No
Link stripping ✅ Toggle ❌ No ❌ No ❌ Manual
Custom metadata ✅ 6 variables ⚠️ Limited ❌ No ❌ No
Keyboard shortcuts ✅ 4 shortcuts ⚠️ 1-2 ❌ No ❌ No
Privacy auditability ✅ Open source ✅ Open source ⚠️ Varies ✅ N/A
Cross-browser ✅ Chrome + Firefox ⚠️ Chrome focus ⚠️ Chrome focus ✅ All
Active development ✅ v2.1.0 (2024) ⚠️ Slower ⚠️ Stagnant ❌ N/A

Verdict: MarkDownload is solid for single-page saves. Copy as Markdown extensions are bare-bones. Neither addresses the LLM-specific workflow that LLMFeeder optimizes for—token efficiency, batch scale, and context-aware output.


FAQ: Your Burning Questions Answered

Does LLMFeeder work with paywalled content?

If you can see it in your browser, LLMFeeder can extract it—since it operates on the rendered DOM, not raw HTTP responses. However, respect publisher terms of service and applicable copyright law.

Can I use LLMFeeder with local LLMs (Ollama, LM Studio)?

Absolutely. The extension is model-agnostic. Copy Markdown and paste into any interface—ChatGPT, Claude, local Mistral instances, or API pipelines. The token counter uses GPT-4/Claude tokenization as reference; local models may vary slightly.

Why does my converted Markdown look different on some sites?

Complex JavaScript frameworks (React, Vue with hydration) or unusual DOM structures can challenge Readability. Enable Debug Mode and try "Full Page" scope versus "Main Content" to troubleshoot.

Is there a Safari version?

Not currently. The codebase uses Web Extensions API with Chrome Manifest V3 and Firefox Manifest V2 compatibility. Safari extension support would require additional packaging—contributions welcome!

How accurate is the token counter?

Within ±5% for English prose and code, based on tiktoken's cl100k_base encoding. Highly repetitive or non-ASCII content may deviate more. When in doubt, leave buffer per best practices above.

Can I contribute or fork LLMFeeder?

Please do! It's MIT-licensed. The GitHub repository has active issue tracking, and the build system (make chrome, make firefox) makes local development straightforward.

Does LLMFeeder store any of my browsing history?

Never. Zero telemetry, zero analytics, zero cloud contact. The storage permission is only for saving your settings (theme, template preferences, token limits) locally in browser storage.


Conclusion: Your LLM Deserves Better Input

Here's the uncomfortable truth: most developers are sabotaging their AI workflows before they even type their first prompt. They're feeding models bloated, unstructured, token-wasting garbage—and then wondering why responses are mediocre, expensive, or both.

LLMFeeder fixes this at the source. One click. Clean Markdown. Optimized context. Privacy guaranteed.

I've tested dozens of content extraction tools over the past year. Nothing matches the purpose-built precision that jatinkrmalik engineered here—the token counter alone justifies installation, and the multi-tab batch processing transforms research workflows from tedious to trivial.

Stop paying premium API rates for garbage context. Stop manually cleaning copy-paste disasters. Stop compromising your privacy with cloud-based scrapers.

Install LLMFeeder today from the Chrome Web Store or Firefox Add-ons, or grab the latest release directly from GitHub. Star the repo, file issues, contribute code—this is the rare tool that actually gets better the more the community invests in it.

Your context window is precious. Start treating it that way.


Found this breakdown valuable? Drop a star on jatinkrmalik/LLMFeeder and share your favorite LLMFeeder workflow in the comments.

Advertisement

Commentaires 0

Aucun commentaire pour l'instant. Soyez le premier à réagir !

Laisser un commentaire

Advertisement