GlossPlusOne (g+1)

What if every web-page on the internet can teach you a language?

Comment 2

Inspiration

I've become very interested in language learning but never been able to stick to one platform (Duolingo, Rosetta Stone, etc.) long enough to see the result. For some, these work just fine. But for most, it doesn't give a strong enough reason to be cared and fit into their daily life.

Recently I've learned about immersion and Krashen's i+1 hypothesis stating that, from my interpretation, more complex concepts in a language can be explained by simpler ones without having to un-immerse yourself from the language.

If a person acquires enough of the simpler concepts, they can start moving on to more and more complex words and phrases, and those can be added to the toolkit, allowing the person to acquire even more concepts in the future.

Immersion has proven to be the most effective way to learn a language as it gives you an actual reason to learn. However, besides having to actually travel to a country with native speakers or looking for a native friend who can speak in that language, the learning curve is still very high. It's like if you're dropped into a place of completely different dialogue without any basic knowledge.

What it does

GlossPlusOne (g+1) is a browser extension that's selectively replacing words and phrases within text content on any webpage, slowly building up until the user becomes fully immersed in the target language. Currently, I focus solely on text content, but it also has potential with other media-consumable formats such as video/audio streams.

Core Feature: Intelligent Text Selection, Embedded Context Translation, and UX Friendly Replacement

g+1 is designed to find and replace two types of text snippets with the translated version of those same snippets in the target language:

  1. Structural snippets: Words that provide flow and structure to sentences. For example, "that," "the," "is," "this," and other connective words that appear frequently

  2. Exploration snippets: General words, technical terms, or phrases that aren't used as often. For example, "bird," "software development," or "break a leg" g+1 focuses on replacing structural snippets early on so users can build up the tools to learn something more complex, including more structure and more exploration words and phrases.

Snippet Confidence Tracker

This is used to decide how strongly a snippet should be highlighted to indicate that it's newly acquired. As the confidence of a snippet gets higher, the snippet itself becomes more blended with everything around it, while lower confidence ones pop out more. Collective confidence is also used to determine when new batches of snippets should be acquired.

Hesitation Tracker

Users can hover over a snippet to see the original meaning in their native language. But by doing so, the confidence level of the snippet is reduced, pushing the highlight to become more prominent again, enforcing repetition without any friction.

Pronunciation Helper

Users can choose to listen to an accurate pronunciation of the snippet directly in the hovered popover.

Try Out (Self-Assessment)

Users can select any snippet of text to add them to the snippet bank (automatically translated). But most importantly, the user will have an option to try and translate the snippet themselves and get back a score, corrections, and feedback right in the webpage. These scores also contribute to the overall skill progression.

How I built it

Technology Stack:

Extension Core:

  • Chrome Extension (Manifest V3) + TypeScript for the extension and service workers
  • React, Tailwind, and Shadcn for UI components Storage & Data:
  • Browser local storage to store snippet bank with hardcoded snippets for basic tier
  • Informed snippets, or snippets that are currently in the website or the one that might be very important, are captured from the articles or websites or generated by llm based on user narrative context (interests, field of study/work, etc)
  • I'm planning on moving to a proper remote database in the future AI & Language Processing:
  • Gemini API for advanced relevant snippet extraction, generation, and contextual translations
  • Groq for LLM rate-limited fallback
  • Backboard.io for narrative memory about the user Audio:
  • ElevenLabs for voice generation (word/phrase pronunciation)

Architecture:

The extension operates in layers:

  • Content Scripts: Inject into webpages to scan and replace text snippets based on user's current learning level
  • Service Workers: Manage API calls, snippet confidence tracking, and state management
  • AI Router: Intelligently routes requests to Gemini with Groq as fallback when hitting rate limits
  • Storage Layer: Tracks snippet confidence, hesitation counts, and user progression
  • Audio Layer: Handles pronunciation requests with ElevenLabs integration

Challenges I ran into

Chrome Extension Webpage Extraction

Chrome extension webpage extraction is hard due to the non-linearity of HTML arrangement. It's difficult to differentiate between page elements versus the actual content. Web pages don't follow a predictable structure—content can be nested in divs, spans, article tags, or buried under layers of layout elements. I needed to extract meaningful text without grabbing navigation menus, ads, or UI elements.

Intelligent Word and Phrase Replacement

Determining when, how, and what to replace words and phrases within a webpage was a significant challenge. I needed to balance:

Which snippets to replace first (structural vs. exploration)

How many replacements to make without overwhelming the user Ensuring replacements maintain grammatical correctness in mixed-language sentences Respecting the user's current confidence level with each snippet

Gemini API Rate Limiting

Running into Gemini API rate limiting too often became a major bottleneck. During development and testing, I was constantly hitting the free tier limits, especially when extracting relevant snippets from articles and generating contextual translations. This forced us to implement Groq as a fallback provider and rethink how I batched our API requests.

Accomplishments that I'm proud of

Informed Phrase Replacement Following Krashen's i+1 Research

I built an agent orchestration system that implements language acquisition theory directly into the browsing experience. By intelligently replacing snippets based on the user's current level (i) and introducing slightly more complex concepts (+1), I'm allowing users to feel the immersion experience of learning a language directly in their browser while doing what's important to them. This enforces subconscious rewiring of the brain, easing the user into the new language without forcing them to change their daily habits.

Frictionless Assessment

I developed a system to determine user skill level from their interaction with the webpage and the words themselves. Instead of making users sit through traditional tests, the extension tracks hesitation (hovering to see translations), confidence build-up over time, and performance in the "Try Out" self-assessment feature. The learning assessment happens naturally as part of browsing.

What I learned

Technical Skills

  • React for Browser Extensions: Learning how to use React to develop a Chrome extension was a new experience. The architecture differs significantly from web apps, especially with Manifest V3's service worker model.
  • LLM Provider Integration: Integrating with Gemini API taught us about managing token limits, prompt engineering for specific outputs, and handling rate limiting gracefully.
  • Backboard's Powerful Memory Management: I discovered how effective Backboard is for maintaining narrative memory about the user, allowing us to personalize the learning experience across sessions.

Development Process

  • How to Utilize Antigravity in Agentic Coding: This hackathon was a journey in learning how to work effectively with AI coding agents. I learned when to lean on Antigravity for scaffolding and implementation versus when to step in with our own problem-solving.

Product & Language Learning Theory

  • Implementing Krashen's i+1 hypothesis in a real product deepened our understanding of language acquisition theory
  • The importance of frictionless user experience in educational tools—every bit of friction reduces engagement

What's next for GlossPlusOne (g+1)

Immediate Improvements

  • Polish Text Extraction: Minimize token input being sent to LLMs by improving our content extraction algorithm to better filter out non-essential page elements
  • Better Content Differentiation: Implement a more sophisticated webpage content extraction system that can better determine which words and phrases are worth replacing versus which are UI elements or navigation

Enhanced Assessment Features

  • Additional Frictionless Assessment: Expand on the passive skill tracking to capture more learning signals from user behavior
  • Pronunciation Practice Self-Test: Use state-of-the-art speech analysis services to provide users with quick pronunciation correction for phrases

Language & Technical Expansion

  • Right-to-Left Language Support: Deal with RTL languages like Arabic, which require different text handling and UI considerations
  • Progressive Definition Localization: Implement the feature where definitions themselves become more and more in the target language as the user acquires necessary words or phrases to explain them—keeping the immersion going even in the learning aids

Production & Scalability

  • Centralized Server Architecture: Make everything production-ready with a centralized server for more efficient processing, word bank generation (which can be reused across users with similar preferences), and informed replacement decisions
  • Automatic Progression to Sentence Replacement: Implement automatic switching from phrase replacement to sentence replacement for better embedded context translation once the ratio of target language phrases in the user's bank is high enough

Built With

Share this project:

Updates