Zoro Reader

Color-preserving, AI-native PDF & document reader extension with zero-config ChatGPT streaming, ZML scientific widgets, and native in-browser Anki .apkg deck generation

Comment

Inspiration

As researchers, students, and engineers, we read dense PDFs every day—machine learning papers, biology specs, and math textbooks. Existing browser PDF tools forced compromises:

  • Destructive Dark Mode: Standard extensions apply a naive filter: invert(1) across the document, turning medical scans, microscopy figures, and engineering schematics into unreadable color-inverted negatives.
  • Disconnected AI Workflows: Interrogating a paper required manually copying text back and forth between browser tabs or paying for rigid third-party API wrappers.
  • Frictionful Retention: Creating review flashcards from paper highlights required tedious manual copying into desktop Anki.

We built Zoro Reader to unite reading, color-preserving visual fidelity, deep ChatGPT integration, and spaced-repetition memory retention into a single cohesive workspace.

What it does

Zoro Reader is a modern, high-performance document reading extension for Chrome, Brave, and Edge that supports PDFs, EPUBs, DOCX, and PPTX files.

  • Color-Preserving Scientific Dark Mode: Uses CSS mix-blend-mode: difference and HSL color isolation to invert page backgrounds while preserving the true original colors of embedded figures, medical imagery, and research charts.
  • Zero-Config ChatGPT Automation: Communicates with ChatGPT in a background tab with zero external API key requirements. Handles both authenticated and logged-out ChatGPT sessions, automatically bypassing transient login popups and streaming answers live.
  • Zoro Scholar ZML & KaTeX Suite: Parses AI responses into rich ZML (Zoro Markup Language) widgets, including key takeaway blocks, styled callout cards, step-by-step walkthroughs, and LaTeX math equations.
  • Native In-Browser Anki .apkg Deck Generation: Compiles highlights or AI summaries into native SQLite-backed .apkg flashcard decks using sql.js (WebAssembly SQLite) and jszip right inside your browser—no external server needed.
  • Precision Text Search: Fast text searching across document pages with geometry-matched highlight bounding boxes and smooth navigation.

How we built it

Zoro Reader is engineered using React 19, TypeScript, Tailwind CSS v4, and Vite under Chrome Manifest V3.

  • Core Viewer & Canvas Theme Engine: Document rendering is handled by pdfjs-dist, epubjs, docx-preview, and pptx-preview. Custom canvas filters patch rendering layers to isolate text background luminance from image pixels.
  • Background Automation & DOM Stream Bridge: A Manifest V3 background service worker (ChatGptAutomation.ts) manages a dedicated ChatGPT browser tab. A content script bridge (chatgpt-stream-bridge.ts) injected at document_start uses DOM mutation listeners and dual-path messaging (chrome.runtime.Port + chrome.runtime.sendMessage) to stream Markdown tokens line-by-line.
  • In-Browser SQLite Deck Builder: Uses sql.js (WebAssembly SQLite) to initialize Anki's native database schema (col, notes, cards) in browser memory, packaging .anki2 databases into downloadable .apkg archives using jszip.

Challenges we ran into

  1. Manifest V3 Service Worker Suspensions: Chrome Manifest V3 service workers enter idle suspension after 30 seconds. Standard runtime.sendMessage calls sent during worker wake-up were prone to being dropped. We resolved this by building a resilient dual-path state restore system using chrome.storage.local and persistent ports.
  2. Logged-Out ChatGPT Interface Divergence: Authenticated ChatGPT uses a rich contenteditable div, while logged-out ChatGPT uses a standard <textarea> element with React event hooks and login popups. We built a dual-mode composer automation engine that applies prototype setters (HTMLTextAreaElement.prototype), dispatches synthetic event chains, and automatically dismisses modal popups via DOM mutation listeners.
  3. In-Browser Anki .apkg Compilation: Generating binary SQLite database files inside a browser extension without a backend server required carefully compiling sql.js WebAssembly modules and managing raw ArrayBuffers before zip compression.

Accomplishments that we're proud of

  • True Color-Preserving Dark Mode: Achieving seamless dark mode rendering that keeps research charts, medical images, and microscopy figures visually accurate.
  • Zero API-Key AI Integration: Delivering instant, live-streaming ChatGPT assistance directly within the reader sidebar without requiring users to configure paid API keys.
  • Serverless Anki Deck Export: Generating fully compliant, native .apkg flashcard packages entirely client-side.
  • Polished, Fluid Design: Crafting a clean, glassmorphic dark-theme UI with responsive sidebars, smooth zooming, and distraction-free Focus Mode.

What we learned

  • Building resilient browser automation requires multi-tier fallback selectors and direct DOM object reference comparisons (Set<Element>) rather than static CSS rules.
  • Careful color perception engineering dramatically improves long-duration technical reading comfort.
  • WebAssembly (sql.js) unlocks incredible client-side capabilities in modern browser extensions, making backend-free data processing possible.

What's next for Zoro Reader

*Bug fixes and polishing, making it more usable, and reducing the broken features

  • AnkiConnect Direct Sync: Adding direct one-click syncing to desktop Anki via the local AnkiConnect API port alongside .apkg file downloads.
  • Bi-directional PDF Annotation Export: Exporting PDF highlights and visual drawings back into native PDF annotation layers.

Built With

  • anki-.apkg
  • chatgpt-automation
  • chrome
  • docx-preview
  • epubjs
  • katex
  • manifest-v3
  • pdfjs-dist
  • react-19
  • sql.js
  • tailwind-css
  • typescript
  • vite
  • webassembly
Share this project:

Updates