Brief

Work in progress. The extension is functional but still being refined.

One-click page summaries — concise or narrative, powered by open-source AI.

---

Features

• One click to open a clean side panel summary of any web page
• Two modes: Concise (TL;DR + key points) and Narrative (editorial paragraphs)
• Smart toggle: switch modes instantly — Brief caches both summaries so toggling never re-calls the API
• Streaming output: summaries appear progressively as tokens arrive, no waiting for a wall of text
• Page metadata: author, publication date, site name, and estimated reading time extracted automatically
• Navigation-aware: panel resets when you navigate to a new page, ready for your next summary
• Dark mode: respects your system preference
• Privacy-first: your API key is stored locally in chrome.storage.sync. Page content is sent only to Groq's API.

---

Setup

1. Get a free Groq API key

Sign up at console.groq.com — the free tier allows 30 requests per minute, which is plenty for casual use.

2. Load the extension in Chrome

1. Clone or download this repo
2. Open Chrome and navigate to chrome://extensions
3. Enable Developer mode (top-right toggle)
4. Click Load unpacked and select the cloned repo directory

3. Add your API key

Click the Brief icon in your toolbar. On first run, you'll see the onboarding screen — paste your Groq API key and click Save & Continue.

4. Summarize

Navigate to any article or page and click the Brief icon. The side panel will open. Click Summarize this page and your summary will stream in within a few seconds.

---

Architecture

brief/
├── manifest.json          # MV3 config — permissions, entry points, side panel
├── background.js          # Service worker — opens side panel, listens for tab navigation
├── content.js             # Content script — extracts page text and metadata on request
├── sidepanel/
│   ├── panel.html         # 5-state UI shell (onboarding, ready, loading, summary, error)
│   ├── panel.css          # Design system — CSS custom properties, dark mode
│   └── panel.js           # State machine, streaming render, toggle caching
├── settings/
│   ├── settings.html      # Standalone settings page
│   ├── settings.css       # Settings styles
│   └── settings.js        # API key management, default mode selection
└── lib/
    ├── groq.js            # Groq API client — raw fetch with SSE streaming
    ├── extractor.js       # Shared extraction utilities
    └── prompts.js         # System prompt strings for Concise and Narrative modes

Tech choices:

• Manifest V3 — current Chrome extension standard, required for Side Panel API
• Vanilla JS — no frameworks, no build step, no node_modules. Load unpacked and go.
• Groq API — fast inference on Llama 3.3 70B. Free tier is generous for personal use.
• Raw fetch() + SSE — no SDK dependency. The entire extension is plain files.

---

Model

• Model: llama-3.3-70b-versatile
• Endpoint: https://api.groq.com/openai/v1/chat/completions
• Streaming: Yes (stream: true)
• Context window: ~128K tokens. Brief truncates page content to ~24,000 characters (~6,000 tokens) to stay well within free-tier limits.

---

License

MIT — see LICENSE for details.