# fluentread | ThinkStu | Knowledge Base | Instagit

Open Immersive Translate. A revolutionary open-source browser translation plugin that enables everyone to have a native-like reading experience. 开源的沉浸式翻译，一款革命性的浏览器翻译插件，让所有人都能够拥有母语般的阅读体验。

GitHub Stars: 6.4k

Repository: https://github.com/bistutu/fluentread

---

## Articles

### [FluentRead's Plugin-Based Architecture for Adding Translation Services: A Complete Guide](/bistutu/fluentread/what-are-the-benefits-of-fluentreads-plugin-based-architecture-for-adding-translation-services)

Discover FluentRead's plugin-based architecture for easy translation service integration. Add new services by implementing a standard function signature and updating config files. No core logic modification needed.

- Tags: deep-dive
- Published: 2026-02-26

### [How the Translation Status Panel Works in FluentRead: Vue 3 Queue Visualization Explained](/bistutu/fluentread/how-is-the-translation-status-panel-implemented-in-fluentread)

Discover how FluentRead's Vue 3 translation status panel visualizes the translation queue with real-time updates and event tracking. Learn its implementation details.

- Tags: internals
- Published: 2026-02-26

### [How FluentRead Differs from Other Bilingual Translation Extensions: Architecture Deep Dive](/bistutu/fluentread/how-does-fluentread-differ-from-other-bilingual-translation-extensions)

Explore FluentRead's unique queue-driven, modular architecture. Discover its persistent local caching and DOM injection, setting it apart from traditional translation extensions.

- Tags: architecture
- Published: 2026-02-26

### [What Technology Powers the Popup UI in FluentRead? Vue 3 and Element Plus Explained](/bistutu/fluentread/what-technology-is-used-for-the-popup-ui-in-fluentread)

Discover the Vue 3 and Element Plus technology behind FluentReads popup UI. This article explains the components and framework powering this feature explained.

- Tags: deep-dive
- Published: 2026-02-26

### [How FluentRead Manages Hotkey Conflicts and Custom Hotkey Assignments](/bistutu/fluentread/how-does-fluentread-manage-hotkey-conflicts-or-custom-hotkey-assignments)

Discover how FluentRead handles hotkey conflicts and custom hotkey assignments. Learn about its conflict validation and reliable runtime detection for a seamless user experience.

- Tags: how-to-guide
- Published: 2026-02-26

### [Can FluentRead Translate Text in Input Boxes? A Complete Technical Guide](/bistutu/fluentread/can-fluentread-translate-text-in-input-boxes)

Yes FluentRead translates input box text. Discover how to enable this feature for <input>, <textarea>, and contentEditable elements with custom triggers. Get the complete guide.

- Tags: how-to-guide
- Published: 2026-02-26

### [How FluentRead Implements Context Menu Integration for Translations](/bistutu/fluentread/how-does-fluentread-handle-context-menu-integration-for-translations)

Discover how FluentRead integrates context menus for seamless translations. Learn about its use of browser APIs and state management for on-demand translation features.

- Tags: how-to-guide
- Published: 2026-02-26

### [File Structure for Translation Service Implementations in FluentRead: A Modular Architecture Guide](/bistutu/fluentread/what-is-the-file-structure-for-translation-service-implementations-in-fluentread)

Discover FluentRead's modular file structure for translation service implementations. Learn how isolated modules under entrypoints/service organize engine modules and centralize dispatching.

- Tags: architecture
- Published: 2026-02-26

### [How FluentRead Implements Translation Caching: A Deep Dive into the Browser Extension's LocalStorage Strategy](/bistutu/fluentread/how-does-fluentread-implement-translation-caching)

Discover how FluentRead implements translation caching using browser localStorage to avoid redundant calls to remote translation services. Learn about its efficient strategy for faster translations.

- Tags: deep-dive
- Published: 2026-02-26

### [Where Are User Preferences and API Credentials Stored in FluentRead?](/bistutu/fluentread/where-are-user-preferences-and-api-credentials-stored-in-fluentread)

Discover where FluentRead stores user preferences and API credentials. Learn about Chrome extension storage and secure GM_setValue for sensitive data handling.

- Tags: internals
- Published: 2026-02-26

### [How FluentRead's Configuration System Works: A Deep Dive into Extension State Management](/bistutu/fluentread/how-does-fluentreads-configuration-system-work)

Explore FluentRead's configuration system. Learn how it manages extension state using a singleton Config object, default loading, browser storage persistence, and live watchers for seamless synchronization.

- Tags: deep-dive
- Published: 2026-02-26

### [FluentRead Translation Services: Complete Guide to Supported Providers and APIs](/bistutu/fluentread/what-translation-services-are-supported-by-fluentread)

Discover FluentRead translation services. Connect to 30+ providers including Google, DeepL, OpenAI, Gemini, and Claude for seamless multilingual content.

- Tags: api-reference
- Published: 2026-02-26

### [How FluentRead Manages Multiple Translation API Calls and Prevents Rate Limiting](/bistutu/fluentread/how-does-fluentread-manage-multiple-translation-api-calls-and-prevent-rate-limiting)

Learn how FluentRead efficiently handles multiple translation API calls and avoids rate limiting with its queue-based architecture, smart retries, and caching.

- Tags: internals
- Published: 2026-02-26

### [FluentRead Background Script Explained: How background.ts Powers the Extension](/bistutu/fluentread/what-is-the-role-of-the-background-script-background-ts-in-fluentread)

Discover how FluentRead's background.ts script orchestrates context menus, tab states, message routing, and Microsoft Translator authentication to power your reading experience.

- Tags: internals
- Published: 2026-02-26

### [FluentRead Content Script Explained: How content.ts Orchestrates Page Translation](/bistutu/fluentread/what-is-the-role-of-the-content-script-content-ts-in-fluentread)

Discover how FluentRead's content.ts script orchestrates page translation by injecting UI components and managing translation triggers on matched websites.

- Tags: internals
- Published: 2026-02-26

### [FluentRead Browser Extension Architecture: Content Script and Background Script Design](/bistutu/fluentread/how-is-the-browser-extension-architecture-structured-in-fluentread)

Explore the FluentRead browser extension architecture. Discover how content and background scripts manage UI, global state, and translation services for a seamless reading experience. Learn about its design.

- Tags: architecture
- Published: 2026-02-26

### [How FluentRead Handles Full Page Translation: A Technical Deep Dive](/bistutu/fluentread/how-does-fluentread-handle-full-page-translation)

Discover how FluentRead achieves full page translation with a technical deep dive into its three-stage pipeline using background scripts content scripts and a dynamic translation engine.

- Tags: deep-dive
- Published: 2026-02-26

### [How to Customize Hotkeys for Translation in FluentRead: A Complete Guide](/bistutu/fluentread/can-i-customize-hotkeys-for-translation-in-fluentread)

Customize translation hotkeys in FluentRead with ease. Learn how to set preset or custom key combinations for a seamless translation experience. Get started with our complete guide.

- Tags: how-to-guide
- Published: 2026-02-26

### [How the Floating Ball UI Works in FluentRead: Vue 3 Component Architecture](/bistutu/fluentread/how-does-the-floating-ball-ui-work-in-fluentread)

Explore how the floating ball UI works in FluentRead. Learn about its Vue 3 component architecture, drag-and-drop features, and event system for seamless translation.

- Tags: architecture
- Published: 2026-02-26

### [How to Trigger a Translation in FluentRead: 3 Methods Explained](/bistutu/fluentread/what-are-the-different-ways-to-trigger-a-translation-in-fluentread)

Discover the 3 easy ways to trigger a translation in FluentRead: input shortcuts, hotkeys, and mouse gestures. Customize your translation experience today.

- Tags: how-to-guide
- Published: 2026-02-26

### [How to Configure FluentRead to Use Your Own AI API Keys: A Complete Guide](/bistutu/fluentread/how-can-i-configure-fluentread-to-use-my-own-ai-api-keys)

Learn how to configure FluentRead with your own AI API keys. This guide explains setting custom keys via the UI or programmatically for enhanced privacy and control in your application.

- Tags: how-to-guide
- Published: 2026-02-26

### [AI Services FluentRead Integrates With: Complete Technical Reference](/bistutu/fluentread/what-ai-services-does-fluentread-integrate-with)

Discover the AI services FluentRead integrates with, including OpenAI GPT-4o, Google Gemini, and Anthropic Claude. Enhance your reading experience with powerful AI translation.

- Tags: api-reference
- Published: 2026-02-26

### [How FluentRead Handles Bilingual Translation Display: Architecture and Implementation](/bistutu/fluentread/how-does-fluentread-handle-bilingual-translation-display)

Discover how FluentRead masterfully displays bilingual translations using a Vue.js tooltip. Explore the architecture and implementation behind its configurable selectionTranslatorMode.

- Tags: architecture
- Published: 2026-02-26