Re:Leaf is a Chrome extension that transforms messy web articles into a beautiful, distraction-free ebook experience. It replaces infinite scrolling with paginated navigation, allowing you to focus on reading.
- No more scrolling: Read content in distinct pages.
- View Modes: Toggle between Single Page (centered) and Two Page (book spread) views.
- Intuitive Navigation: Use arrow keys (
←,→) or click the left/right edges of the screen to turn pages.
- Light: Classic white paper look.
- Sepia: Warm tones for easier reading.
- Dark: High contrast dark mode for night reading.
- Forest / Mint: Soothing green variants.
- Gray: Neutral gray dark mode.
- Typography: Adjust Font Size and Line Height.
- Layout: Fine-tune Vertical and Horizontal Margins.
- Immersive Mode: The UI automatically hides when you're reading to minimize distractions.
- Universal Support: Works on major news sites (BBC, The Verge, Naver News) and general articles (Wikipedia, Medium).
- Clean Extraction: Intelligently strips ads, sidebars, popups, and non-content media (like video placeholders) while preserving article structure and images.
- Clone this repository:
git clone https://github.com/gyedongjeon/releaf.git
- Open Chrome and navigate to
chrome://extensions. - Enable Developer mode (toggle in the top right).
- Click Load unpacked.
- Select the
releafdirectory you just cloned. - The 🍃 icon should appear in your toolbar.
- Navigate to any article page.
- Click the Re:Leaf extension icon.
- The page will transform into the reader view.
- Hover over the bottom center to access the Menu Bar:
- Settings: Change themes, font size, margins, and page view.
- Page Counter: See your current progress.
- Close: Return to the original web page.
- Tech Stack: Vanilla JavaScript, CSS variables for theming, SVG icons (Lucide style).
- Testing: Run unit tests with Jest:
npm test - Linting/Verify: Use the provided scripts in
scripts/to verify parsing logic on real-world HTML.