-
-
Your personal reading assistant with AI
Inspiration
A Journey Born from Personal Need
While browsing the web, we encounter phrases that resonate with us, insights we want to revisit, and passages that inspire us. However, these precious pieces of text were scattered across browser bookmarks, note-taking apps, and various services, making them extremely difficult to find when we actually needed them.
Additionally, while some sites like Medium provide estimated reading times such as "5 min read," these are only generalized averages that don't reflect individual reading speeds or patterns. There was no way to know how much I had actually read or how much more I needed to read.
To solve these inconveniences, I decided to create an extension with the following core features:
- Highlight Feature: Intuitively mark and manage important text
- Bookmark System: Quick access to highlights through favorites
- Reading Time Tracking: Calculate estimated reading time for most websites
- Personalized Progress: Measure actual reading time and visualize it in a battery-style indicator
User Voices: Liner's Direction Shift
While conceptualizing this project, I came across Korean user reviews of "Liner", a popular highlighting tool on the Chrome Web Store. Interestingly, many reviews repeatedly expressed the following complaint:
"The highlight feature used to be really great, but as AI features became emphasized, highlighting and managing highlights actually became more inconvenient."
I witnessed a phenomenon where the core user experience was diluted as the formerly simple and powerful highlight feature was reorganized around AI.
This led to a clear design philosophy:
- Prioritize the highlight feature above all else
- Position AI as an auxiliary tool
- Provide users with accessibility and convenience
The key was that AI should not be the protagonist, but rather a supporting actor that enriches the user's reading experience.
What it does
This Chrome extension is an all-in-one solution that revolutionizes the web reading experience:
Core Features
1. Smart Highlight System
- Intuitive Text Selection: Immediately highlight important text by dragging with mouse
- Various Color Options: Categorize with 5 pastel colors (yellow, green, blue, pink, purple)
- Persistent Storage: Safely store all highlights through Chrome Storage API
2. Bookmark and Management System
- Favorites Feature: Mark important highlights with stars for quick access
- Unified Dashboard: View all highlights at a glance in the popup UI
- Search and Filtering: Sort and filter by site and date
3. Personalized Reading Time Tracking
- Automatic Content Detection: Extract pure content excluding ads, sidebars, etc. using Readability.js
- Estimated Reading Time: Calculate based on average reading speed (200 words per minute)
- Personalized Recording: Visualize and save user's actual reading progress with battery icon
4. AI-Powered Auxiliary Features
- On-Device Summarization: Offline text summarization using Chrome's Built-in AI
- Multilingual Translation: Instant translation without network using Gemini Nano model
- Zero Cost: Completely free using only built-in browser AI without external APIs
How we built it
This project was built around an AI-driven development process. Instead of traditional development methods, I actively utilized AI tools to simultaneously achieve efficiency and adherence to best practices.
AI-Based Development Workflow
Step 1: Writing the PRD (Product Requirements Document)
To clarify the project's direction, I first wrote a detailed PRD document:
Contents:
- Problem to Solve: Difficulty managing scattered highlights, non-personalized reading times
- Direction for Improvement: Highlight-first design, AI positioned as auxiliary tool
- Key Required Features:
- Text highlighting and color management
- Chrome Storage-based persistent storage
- Reading time tracking and progress visualization
- AI summarization and translation features
- Automatic dark mode optimization
- Tech Stack: Chrome Extension Manifest V3, JavaScript ES6+, Readability.js
- Architecture Design: Content Script, Background Script (Service Worker), Popup UI
Step 2: Designing Popup Interface with AI UI Tools
Based on the PRD, I quickly prototyped the user interface using AI UI generation tools:
Tools Used:
Selected from multiple design options and iteratively refined
Step 3: AI-Based Task Extraction and Phased Development
I systematically developed by breaking down the complex project into small task units:
Task Extraction Process:
PRD Document → Request AI to extract tasks → Sort by priority → Execute step by step
Step 4: Teaching AI Best Practices
I defined and taught a development ruleset to ensure AI maintained consistent code quality:
Challenges we ran into
1. Complexity of TreeWalker Algorithm Implementation
Problem:
Initially, I thought simple innerHTML string manipulation would suffice, but the actual HTML structure of the web was far more complex:
- Nested
<div>,<span>,<strong>tags - Selection ranges spanning multiple block elements
- Conflicts between existing highlights and new highlights
Resolution Process:
- Learning and experimenting with TreeWalker API
- Systematically categorizing 4 types of text node cases
- Implementing separate split/wrap logic for each case
- Validation across extensive test sites (news, blogs, Medium, Wikipedia, etc.)
Result: Built a highlight system that works reliably on most websites.
2. Readability.js Integration: Content Extraction Difficulties
Problem:
- Medium: Content clearly defined with
<article>tags - General blogs/news: Lots of noise including sidebars, ads, comments, footers
- Direct pattern matching attempts → Failed due to different structures per site
Methods Tried:
- ❌ Adding more content tag patterns → Complexity and management issues requiring per-site registration
- ❌ Text density calculation → Low accuracy
- ✅ Readability.js → Algorithm optimized by Firefox over many years
Result: Successfully calculated reading time by extracting main content from most websites.
Accomplishments that we're proud of
1. Conquering the Complex TreeWalker Algorithm
Implemented a safely operating highlight system even within the web's complex HTML structures:
- Learning and experimenting with TreeWalker API
- Highlights that don't break even in nested tag structures
- Verified across various sites including news, blogs, Medium, Wikipedia
2. Achieving Versatility through Readability.js Integration
Successfully integrated the content extraction algorithm optimized by Firefox over many years:
- Accurately extracted content from dozens of diverse websites
- Automatically removed noise such as ads, sidebars, comments
- Works immediately without site-specific configuration
- Increased accuracy of reading time calculations
Through the experience of attempting and failing at direct pattern matching, I learned the importance of proven open source solutions.
3. Realizing an AI-Based Development Process
Innovated traditional development methods to simultaneously achieve efficiency and quality:
- Systematic design based on PRD documents: Clear goals and scope definition
- Utilizing AI UI tools: Rapid prototyping with Readdy.ai and v0.dev
- Automatic task extraction: Breaking down complex projects into small units
- Ruleset learning: Teaching AI coding rules to maintain consistent code quality
Proved that even a single developer can complete a production-level extension in a short time.
4. User Experience First Design Philosophy
Based on insights gained from analyzing Liner user reviews:
- Prioritized highlight feature placement
- Positioned AI as auxiliary tool to ensure user choice
- UI/UX focused on accessibility and convenience
- Intuitive interactions to minimize learning curve
The key differentiator is design that starts from user needs, not technology.
5. Achieving Zero Cost with On-Device AI
Implemented AI features that work completely offline without external APIs or servers:
- Utilizing Chrome Built-in AI (Gemini Nano)
- Zero network requests: Privacy protection and improved speed
- Zero usage cost: No API keys or subscription fees required
- Instant response: Millisecond-level processing without server round trips
What we learned
- Power of Simplicity: With sufficient use of AI, useful extension development is possible
- Leveraging Open Source: Importance of proven libraries like Readability.js
- Reducing Costs: AI services can be implemented offline using on-device AI models
What's next for dragpen
Chrome Sync Integration: Automatic highlight synchronization across multiple devices Smart Tagging: AI-based automatic category classification and tag suggestions Recommendation System: Discover popular highlights marked by other users
Built With
- claude
- cursor
- gemini-nano
- html
- javascript
- summarizer
- translator
- webpack
Log in or sign up for Devpost to join the conversation.