Highlight text and Grammar Analysis Result
Extension Popup for setting configuration
Highlight text and Summarizer Result

Inspiration

As a non-native English speaker, I've always struggled with pronunciation and grammar. Traditional learning apps felt like homework—they required me to stop what I was doing and dedicate time to study. I wanted something effortless that could help me learn while I was already reading articles, watching videos, or browsing social media. That's when I realized: what if my browser could be my teacher? What if every English text I encountered could become a learning opportunity without any extra effort? Summer was born from this simple desire—to make English learning so seamless that it happens naturally while you're doing what you already love.

What it does

Summer is an AI-powered Chrome extension that serves as your personal English learning companion. Simply select any text on a webpage, and Summer instantly provides:

Grammar Analysis: Concise feedback highlighting key grammar patterns and sentence structures—perfect for understanding why sentences work the way they do
Smart Translation: Quick translations between multiple languages to clarify meaning
Pronunciation Guide: Phonetic transcriptions and audio examples for correct pronunciation, addressing one of the hardest parts of learning English
Text Summarization: Digestible summaries of lengthy content

All features appear in a clean, non-intrusive modal that keeps you in your learning flow—no switching apps, no breaking focus.

How we built it

I built Summer using modern web technologies optimized for performance and user experience:

Frontend: React 19 with TypeScript for type-safe, efficient UI
Build System: Vite 7 with @crxjs/vite-plugin for fast Chrome extension development
AI Integration: Chrome's Built-in AI APIs (Prompt API, Translator API, Summarizer API) for fast, private on-device processing
UI/UX: Radix UI primitives with TailwindCSS 4 for accessible, beautiful interfaces
Form Handling: React Hook Form with Zod validation for robust user settings

I carefully tuned the AI parameters (temperature: 0.8, topK: 5) to generate natural, educational responses that feel conversational rather than robotic—because learning should feel like having a helpful friend, not a strict teacher.

Challenges we ran into

AI Response Formatting: Getting consistent, structured output from Chrome's Prompt API required extensive prompt engineering and JSON schema design
Content Script Injection: Managing the lifecycle of the translation modal across different websites with varying DOM structures and CSS conflicts
Selection Detection: Creating a smooth UX for text selection that doesn't interfere with native browser behavior or other extensions
API Availability: Chrome's built-in AI APIs are experimental and only available in Canary/Dev channels, requiring careful feature detection and fallbacks 5.Performance Optimization: Ensuring the extension doesn't slow down page loads while remaining instantly responsive to user interactions
Pronunciation Accuracy: Generating reliable phonetic transcriptions that actually help learners pronounce words correctly
Solo Development: Balancing design decisions, coding, and documentation all on my own while keeping the scope manageable

Accomplishments that we're proud of

Truly Effortless Learning: Summer requires zero extra steps—just highlight and learn, making it perfect for busy people who struggle to find time for traditional study
Solving Real Pain Points: Directly addressing the pronunciation and grammar challenges that make English so difficult for non-native speakers
AI-First Approach: Leveraging Chrome's built-in AI means fast responses, privacy (no data leaves the device), and no API costs
Educational Design: The grammar feedback is concise and practical (2-3 bullet points) rather than overwhelming, based on how people actually learn
Seamless Integration: Summer feels native to the browser—it enhances rather than disrupts the browsing experience

What we learned

User Pain Points Matter: Building from personal experience helped me focus on features that truly solve problems, not just what's technically impressive
Prompt Engineering: Crafting effective prompts is an art—small wording changes dramatically affect AI output quality
Browser Extension Limitations: Working within Chrome extension security constraints (Manifest V3) requires creative solutions
AI API Best Practices: Experimental learning with Chrome's experimental AI APIs taught me about temperature, topK, and response formatting
Effortless Design: The best learning tools are the ones you don't notice—they just work when you need them
Solo Development Skills: Managing an entire project alone taught me to make quick decisions, prioritize ruthlessly, and ship iteratively
TypeScript at Scale: Strong typing caught numerous bugs during development and made refactoring much safer

What's next for Summer

More Languages: Expand beyond English to support learners of Korean, French, Mandarin, and more
Screenshot Mode: Capture any text from images, videos, or non-selectable content and get instant translations and grammar analysis—perfect for learning from YouTube videos, PDFs, or social media posts
Vocabulary Building: Track new words users encounter and create personalized flashcard decks based on actual reading habits
Speaking Practice: Interactive pronunciation exercises with real-time feedback
Progress Tracking: Analytics dashboard showing grammar patterns mastered, pronunciation improvements, and learning streaks
Personalized Learning Paths: AI that adapts to individual weak points—if you struggle with past tense, Summer will give extra attention to those patterns
Community Features: Share interesting sentences and grammar discoveries with other learners