ananaBMaster
d0fc8e57fa
* feat(subtitles): add custom CSS and preset templates to the subtitle style page
The subtitle style page could only set fonts, sizes, weights and colours, so
effects like blurring the translation while training your listening had nowhere
to live. A custom CSS row at the bottom of that page now opens an editor with
the same live preview above it, plus a preset dropdown carrying three ready-made
templates — blur translation, dashed translation, and dim original — that append
into the editor so they can be stacked.
The picked font, size, weight and colour now reach the subtitle lines as inline
CSS variables consumed by an unlayered base rule, rather than as inline styles.
Inline styles outrank every stylesheet rule, so without this a user writing
`.subtitles-main { color: red }` would get nothing and have to discover
`!important` on their own.
The preview renders in a shadow root, the same way the real overlay does. That
is what contains the CSS being previewed: a rewriting pass over the selectors
leaks through at-rules that carry none, cannot stop `@keyframes` names from
hijacking the settings page's own animations, and adds specificity production
never adds. Layout is the one thing a shadow root does not contain, so the
light-DOM wrapper carries the containment for `position: fixed` and runaway
heights.
Config gains `videoSubtitles.style.customCSS`, with the v099 to v100 migration
and fixtures that go with it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* fix(translation): stop custom CSS from breaking the settings page it is previewed on
The custom CSS written for translated text was injected into the options page's
own document to render the preview, so it styled the settings UI as well. A rule
as ordinary as `* { display: none }` left the options page blank on every load —
editor and sidebar included — and because the CSS is saved in config it came
back on the next load too, with no way out through the UI.
The preview now renders inside a same-origin `srcdoc` frame. A frame is the only
container that is also a Document, which is what production injects into, so
unlike a shadow root it agrees with a real page on `:root` variables, `body`
selectors, `@font-face` and `@property` — a shadow root would hide the first
four and answer to `:host`, which production never does. A bounded-height frame
is also its own viewport, so `position: fixed` and runaway heights stay inside
it without any containment tricks.
Two supporting changes, both no-ops on a real page: `decorateTranslationNode`
resolves the node's own document rather than the ambient one, and the injector's
Document check uses `nodeType` because an iframe's Document fails `instanceof`
when tested from the parent realm.
The frame follows the extension's theme and reads its colours from the same
`--rf-*` tokens as the page around it, and the sample now inherits an ordinary
page's 16px rather than the settings page's 14px.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* fix(translation): apply the removal of custom CSS without needing a reload
Switching translated text back to a preset style, or emptying the custom CSS
box, only changed the marker attribute on the node — the stylesheet itself
stayed adopted until the page was reloaded. Anything the preset does not set
kept the old styling: the `border` preset sets no colour, so a cleared `color`
rule went on applying.
A reload eventually hid this on a real page. The options preview never reloads,
so there it reads as deleting the CSS having done nothing at all.
The withdrawal is guarded, so a root that never had custom CSS does not acquire
an empty stylesheet just for being styled by a preset.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
An open-source AI-powered language learning extension for browsers.
Supports immersive translation, article analysis, multiple AI models, and more.
Master languages effortlessly and deeply with AI, right in your browser.
Official Website · Tutorial · Changelog · Blog
Table of contents
TOC
- 📺 Demo
- 👋🏻 Getting Started & Join Our Community
- ✨ Features
- 🤝 Contribute
- 📜 Commercial License Grant
- ❤️ Sponsors
📺 Demo
👋🏻 Getting Started & Join Our Community
Read Frog's vision is to provide an easy-to-use, intelligent, and personalized language learning experience for language learners of all levels. This has become possible in the AI era, but there are few products on the market that meet this demand. Therefore, we decided to take matters into our own hands and ultimately make the world no longer reliant on human language instructors.
Whether you are a user or a developer, Read Frog will be an important part of your journey toward this vision. Please be aware that Read Frog is currently under active development, and feedback is welcome for any issues encountered.
Download
| Browser | Version | Download |
|---|---|---|
| Chrome | |
Chrome Web Store or 中国镜像 |
| Edge | |
Microsoft Edge Addons |
| Firefox |  |
Firefox Add-ons |
Community
 |
In Discord ask questions, and connect with developers. |
|---|---|
 |
If you are in mainland China, you can add the WeChat account to join the WeChat group. |
[!IMPORTANT]
⭐️ Star Us, You will receive all release notifications from GitHub without any delay ~
Star History
✨ Features
Transform your everyday web reading into an immersive language learning journey with Read Frog's powerful features.
🪄 Custom AI Actions
Turn selected text into reusable AI tools that match the way you read and learn. Define your own prompts and structured output fields, choose a provider, model, and icon, then run the action directly from the selection toolbar for dictionary lookups, rewriting, summaries, explanations, or any workflow you design.
Start with the built-in Dictionary and Improve Writing templates, or build an action from scratch. Structured results can also be mapped and saved to Notebase for later study.
🧠 Flashcards & Spaced Repetition
Save vocabulary, definitions, example sentences, translations, and reading notes to Notebase, then turn them into flashcards with customizable card templates. Content you discover while reading becomes study material without interrupting your flow.
Review due cards online and rate each one Again, Hard, Good, or Easy. Read Frog's spaced-repetition scheduler uses your feedback to decide when each card should appear again—right before you are likely to forget it.
🔄 Bilingual / Translation Only
Switch seamlessly between two translation display modes. Bilingual mode shows the original text alongside its translation, perfect for learning and comparison. Translation-only mode replaces the original text entirely for a cleaner reading experience.
The extension automatically re-translates all visible content when you switch modes while translation is active, ensuring a smooth transition without needing to refresh the page.
✨ Selection Translation
Select any text on a webpage to reveal a smart toolbar with powerful options. Translate streams the translation in real-time. Explain provides detailed explanations tailored to your language level. Speak reads the text aloud using text-to-speech.
The toolbar intelligently positions itself to stay within the viewport, supports drag interactions, and works across all websites. Perfect for quick lookups while reading.
🧠 Context-Aware Translation
Enable AI to understand the full context of what you're reading. When activated, Read Frog extracts the page title and a concise Markdown version of the page content, providing this context to the AI for more accurate, contextually-appropriate translations.
This means technical terms get translated correctly within their domain, literary expressions maintain their nuance, and ambiguous phrases are interpreted based on the surrounding content rather than in isolation.
🎬 Subtitle Translation
Translate YouTube subtitles directly in the video player. Watch foreign language content with translations displayed alongside the original subtitles, making video content accessible for language learning.
🔊 Text-to-Speech (TTS)
Listen to any selected text with high-quality AI voices. Powered by Edge TTS — completely free, with 150+ voices across 80+ languages including Chinese, English, Japanese, Korean, and many more. Adjust rate, pitch, and volume to your preference.
Automatic language detection (basic or LLM-powered) with per-language voice mapping ensures the right voice for every language. Smart sentence-aware chunking handles long text by splitting at natural boundaries and prefetching the next chunk for seamless playback. Perfect for pronunciation practice and auditory learning.
📦 Batch Requests
Save up to 70% on API costs with intelligent request batching. Read Frog groups multiple translation requests into single API calls, reducing overhead and token usage while maintaining translation quality.
The system includes smart retry logic with exponential backoff and automatic fallback to individual requests if batch processing fails. All handled transparently in the background.
🤖 20+ AI Providers
Connect to 20+ AI providers through Vercel AI SDK: OpenAI, DeepSeek, Anthropic Claude, Google Gemini, xAI Grok, Groq, Mistral, Ollama, and many more. Configure custom endpoints, API keys, and model settings for each provider.
Plus free translation options: Google Translate, Microsoft Translate, and DeepLX for cost-free basic translations.
🤝 Contribute
Contributions of all types are more than welcome.
- Promote Read Frog to your friends and family.
- Report issues and feedback.
- Contribute code.
Contribute Code
Project Structure: DeepWiki
Ask AI to understand the project: Dosu
Check out the Contribution Guide for more details.
ReadFrog is dual-licensed under GPLv3 and a commercial license.
See CONTRIBUTING.md for contributor licensing terms.
|
|
|---|
📜 Commercial License Grant
Meituan Tabbit Browser Team: Free license (at no cost) for closed-source commercial use, limited to v1.21.3 and earlier versions (commit 724863f). Granted on March 3, 2026, 9:00 AM (Vancouver Time, UTC-8).
❤️ Sponsors
Every donation helps us build a better language learning experience. Thank you for supporting our mission!
