An AI-powered browser extension that turns chaotic Reddit browsing into a focused insights workflow, with AI filtering, local search, and a chat interface inside a polished shadow-root overlay.
Reddix
A browser extension that turns chaotic Reddit browsing into a focused insights workflow — with AI-powered filtering, local search, and a chat interface, all inside a polished shadow-root overlay.
About The Project
Reddix is a Chrome extension that injects an intelligent overlay directly into Reddit pages, letting you extract, search, filter, and chat with posts and comments without ever leaving the page. It's built around a shadow-root UI so the overlay never bleeds into or gets disturbed by Reddit's own styles, and a type-safe tRPC layer over Chrome messaging so content scripts never talk to the LLM directly.
Key Features
- Shadow-root overlay — a non-intrusive, scoped UI injected directly into the Reddit page
- Type-safe RPC between content scripts and the background worker via tRPC over Chrome messaging
- AI-powered relevance filtering using Groq — surface only what matters from a noisy feed
- AI chat interface for asking questions about visible posts/comments, with structured Markdown responses
- Dual insight modes — separate workflows for posts and comments, both triggered via the right-click context menu
- Instant local search with zero network round-trips
Development Progress
StatusIn progress
Core post and comment extraction, AI filtering, AI chat for posts, and the shadow-root overlay system are working. Comment chat, a settings page for user-provided API keys, response streaming, and broader DOM-extraction robustness are still on the roadmap.
Technology Stack
- WXT (extension framework)
- React 19
- TypeScript
- Tailwind CSS
- shadcn/ui + Radix
- tRPC v10 + trpc-chrome
- SuperJSON
- Zod
- Axios
- Groq (LLM provider)
Architecture
A right-click context menu triggers the content script to scrape the page's shreddit-post or shreddit-comment elements, then mounts a shadow-root overlay rendering the extracted data. From inside that overlay, both the AI filter and AI chat panels talk to a tRPC router running in the background script over a persistent Chrome runtime port — the content script itself never touches the Groq API directly. AI filtering returns a lightweight JSON array of indices, which get mapped back onto the already-extracted DOM data rather than re-scraping the page.
AI Capabilities
| Mode | Procedures | Output |
|---|---|---|
| AI Filtering | analyzePosts, analyzeComments | JSON indices mapped back to the original items, narrowing the list in place |
| AI Chat | chatAboutPosts, chatAboutComments | Markdown-formatted natural language, rendered inline in the chat panel |
Technical Highlights
tRPC Over Chrome Runtime
All AI procedures are routed through a background tRPC router over a long-lived Chrome port, rather than letting content scripts call the LLM directly — keeping the untrusted page context fully separated from API access.
Shadow-Root UI Injection
The overlay is mounted into a shadow DOM, so its styles are completely isolated from Reddit's own CSS and vice versa — no leakage in either direction.
Index-Based AI Filtering
Instead of asking the model to return full post/comment objects, it returns a compact array of indices that get mapped back onto already-extracted data — avoiding any need to re-scrape the page after filtering.
Problems Faced
-
Untrusted DOM Data : Scraped Reddit DOM content is treated as untrusted input — every payload passes through Zod schemas before it reaches a tRPC procedure, protecting the AI layer from malformed or unexpected page structure.
-
Resilient Selectors : Reddit's custom-element architecture (
shreddit-post,shreddit-comment) required building extraction logic durable enough to survive layout variations across different pages and subreddits. -
Keeping Content Scripts Untrusted : Since content scripts run in the context of the page itself, all LLM calls had to be gated through the background script — meaning no API key or request logic could live anywhere a malicious page script might reach it.
Key Learnings
-
Typed Boundaries Across Extension Contexts : Using tRPC and Zod across the content-script/background-worker boundary turned what's normally a loosely-typed message-passing mess into a fully type-safe API surface.
-
Shadow DOM as a Real Isolation Tool : Shadow roots solved style isolation cleanly enough that the overlay can be mounted and unmounted repeatedly without ever conflicting with the host page's CSS.
-
Designing AI Output for UI Constraints : Returning index arrays instead of full objects, and enforcing strict Markdown formatting in chat prompts, kept the AI layer lightweight and made its output trivial to render reliably inside the overlay.
What's Next
- Comment chat UI (
chatAboutComments+ a chat panel variant) - Better Markdown rendering for chat responses
- A settings page for user-provided Groq API keys via
chrome.storage - Improved DOM extraction robustness across Reddit layout variants
- Rate limiting and request cancellation for in-flight AI queries
- Streamed AI responses for lower perceived latency