Representer

AI page summary & follow-up chat for Chrome. Open source, bring your own key.

English · 简体中文

Representer is an open-source Chrome extension that summarizes any web page: an overview with a few highlighted takeaways, clickable terms and a “Key passage” quote, plus a section-by-section outline of key points. You can then keep asking questions about the page. It is BYOK: it works with any OpenAI-compatible API (OpenAI, OpenRouter, DeepSeek, Ollama, …), and all data stays in your browser.

Features

• ✨ AI summary + key points: content is extracted with defuddle. The model writes an overview with a couple of highlighted key phrases and a few clickable terms (click one to ask about it in the chat), a section outline with color-coded branches, and, when the page has a good one, a line quoted from it at the bottom (click to jump to it).
• 💬 Follow-up chat: ask about the summary and the original page. Replies stream in, and conversations are saved per page.
• 🌿 Side chats with /side: fork the current conversation into a side session, then switch or close it any time.
• ⚡ Custom Skills: turn your favorite prompts into one-click buttons with {{input}} / {{selection}} / {{page_title}} placeholders. Recently used Skills appear above the composer.
• 🎛️ Custom instructions: add your own system prompt (tone, focus, language). It's added on top of the built-in instructions for both summaries and chat, so the summary format never breaks.
• 🗂️ 24-hour cache: revisiting a page within 24h reuses its summary, so no tokens are spent. Use Re-summarize to regenerate.
• ⌨️ ⌘E / Ctrl+E: toggle the panel, which slides in with a spring animation. You can minimize it and drag to resize it (320–640px; the width is remembered).
• 🔝 Always on top: the panel renders in the browser's top layer, so site navbars and popups can't cover it. The rest of the page stays clickable.
• 🌐 i18n: English and 简体中文. The language follows the browser, or you can set it in Options.
• 🔑 BYOK, privacy first: requests go from the extension straight to the endpoint you configure, with no third-party servers in between.

Screenshots

Follow-up chat	Side chat (/side)
Custom Skills	Bring your own key

Install

Chrome Web Store: install Representer.

From source:

git clone https://github.com/Yaphet2015/Representer.git
cd Representer
npm install
npm run build        # output: .output/chrome-mv3

1. Open chrome://extensions and turn on Developer mode.
2. Click Load unpacked and choose .output/chrome-mv3.
3. Open the extension Options, enter a Base URL and API key, and pick a model (see Configuration).
4. On any page, press ⌘E (Mac) / Ctrl+E (Windows/Linux) or click the toolbar icon.

Shortcut note: you can change the shortcut at chrome://extensions/shortcuts. If Chrome refuses the key combination, Representer listens for ⌘E / Ctrl+E on the page itself. This fallback works on regular web pages only, not on chrome:// pages or the Chrome Web Store.

Configuration

Option	Description
Base URL	Any OpenAI-compatible endpoint, e.g. https://api.openai.com/v1, https://openrouter.ai/api/v1, or local Ollama http://localhost:11434/v1 (no key needed for local endpoints)
API Key	Stored only in chrome.storage.local on your machine
Model	Fetched automatically from GET /models. Searchable, and you can type a custom model name
Test connection	Sends a tiny request to the selected model and shows the latency or the error
Custom instructions	Optional system prompt added after the built-in instructions, for summaries, chat, side chats and Skills. Empty = default
Language	Auto / English / 简体中文

Skills can be added, edited, deleted and reordered in Options. Placeholders: {{input}} (composer text, or the page selection when the composer is empty), {{selection}} (the last text selected on the page), {{page_title}}. Type / in the composer to see all commands.

Development

npm run dev       # dev mode with HMR (launches Chrome with the extension)
npm run build     # production build
npm run compile   # type check
npm test          # Vitest unit tests
npm run zip       # package zip

Dev builds (npm run dev) add a Mock mode toggle in Options that returns sample summaries and replies, for testing the UI without a model. Production builds leave it out.

Stack: WXT · React · TypeScript · Tailwind CSS · Framer Motion · Shadow DOM · pi durable (OpenAI-compatible /chat/completions)

entrypoints/   background (messaging & streaming), content (Shadow DOM overlay), options
components/    UI (panel, chat, Skills, model picker…); bui/ holds base components adapted from Beautiful UI
lib/           pure logic: cache, sessions, Skills, messaging, storage, LLM calls, dev-only mock, parsing
tests/         Vitest unit tests

Releasing

New versions are published to the Chrome Web Store by GitHub Actions: run npm run release:patch, then git push --follow-tags. For the one-time setup (API credentials and repository secrets), see docs/RELEASING.md.

FAQ

• Where is my data? Settings, cached summaries, chats and Skills are all stored locally in chrome.storage.local. Nothing is uploaded except your requests to the endpoint you configured.
• Which models work? Any service compatible with OpenAI /chat/completions. Summaries need a model that reliably outputs JSON.
• Why won't the panel open on some pages? Chrome doesn't allow extensions on chrome:// pages or the Web Store.
• Privacy policy: PRIVACY.md

License & credits

• MIT License
• Some UI components are adapted from Beautiful UI (MIT); see components/bui/ and assets/beautifui.css.
• Content extraction by defuddle.