Distill.

Instantly explain anything on your screen — powered by Claude AI

---

What it does

Distill is a Chrome extension that lets you explain any page, article, diagram, or concept without leaving your browser. Click the toolbar icon — Distill screenshots your active tab, sends it to Claude with your custom prompt, and Claude explains it in plain language.

No copy-pasting. No tab switching back and forth. One click.

---

How it works

1. Click Distill in your Chrome toolbar on any page
2. Distill captures a screenshot of your active tab
3. It opens claude.ai/new and automatically injects the screenshot + your prompt
4. Claude reads the screenshot and explains what's on screen

The entire flow — capture → inject → explain — happens in under 2 seconds.

---

Features

Feature	Details
One-click capture	Screenshots the visible tab via Chrome's captureVisibleTab API
Auto-injection	Content script pastes the image and your prompt directly into Claude's chat
Custom prompts	Set your preferred explanation style; it saves automatically across sessions
New Topic	Opens a fresh Claude conversation with one click — no session carryover
No API key	Works with your existing Claude Pro or Free account
Session-safe	Screenshot data stored in chrome.storage.session — cleared after use

---

Install

Distill is not on the Chrome Web Store yet. Install it manually:

git clone https://github.com/ksm0712/distill.git

1. Open Chrome → go to chrome://extensions
2. Toggle Developer Mode (top right)
3. Click Load Unpacked
4. Select the distill folder

The Distill icon will appear in your Chrome toolbar. Pin it for easy access.

---

Usage

Navigate to any page you want explained
  → Click the Distill icon
  → (Optional) edit the custom prompt
  → Click "Explain This"
  → Claude opens and explains the screenshot

Custom prompt examples:

• "Explain this like I'm a curious CS student"
• "Summarize the key points in 3 bullet points"
• "What are the most important things to understand here?"
• "Explain the math step by step"

Your prompt is saved automatically and persists across browser sessions.

---

Tech

• Chrome Extensions Manifest V3 — service worker, content scripts, activeTab permission
• chrome.tabs.captureVisibleTab — zero-permission screenshot of the active tab
• chrome.storage.session — ephemeral data store for the pending screenshot payload
• chrome.storage.sync — persists the custom prompt across devices
• Content Script + MutationObserver — waits for Claude's editor to mount, then injects the image via DataTransfer / ClipboardEvent and submits
• OffscreenCanvas — service worker draws the extension icon dynamically (no PNG files needed)
• Vanilla JS — zero dependencies, zero build step

---

Project structure

distill/
├── manifest.json      # MV3 config: permissions, content scripts, service worker
├── background.js      # Service worker: generates icon via OffscreenCanvas
├── popup.html         # Extension popup UI
├── popup.js           # Capture logic, storage, status feedback
├── content.js         # Injects screenshot + prompt into Claude's chat
└── docs/
    ├── preview-main.png
    └── preview-flow.png

---

Privacy

• Screenshots are stored only in chrome.storage.session (cleared when the browser closes)
• Data is sent only to claude.ai — the same destination as typing in Claude yourself
• No external servers, no analytics, no tracking

---

Built with Claude · Manifest V3 · No build step required