Auto Translation Features#

Read Frog provides advanced auto translation capabilities that automatically detect and translate content on web pages—including content inside iframes. These features are highly configurable, allowing users and administrators to tailor translation behavior, shortcut keys, and coverage to specific needs and contexts.

Reliable Configuration and Fallbacks#

If the auto translation configuration is missing or invalid, Read Frog automatically falls back to default settings. This ensures reliability and prevents crashes or unexpected behavior. Enhanced error handling and logging distinguish between missing and invalid configurations for easier troubleshooting.

Default Translation Range: Main Content#

By default, Read Frog focuses translation on the main content of the page, avoiding non-essential elements. Only top-level <header>, <footer>, <nav>, and <aside> elements are excluded from translation in main mode—these typically represent site navigation, headers, and footers. However, when these same elements appear inside content containers (such as <article> or <main>), they are translated, as they typically contain article titles, metadata, or other content-related information.

Example behavior:

• A <header> at the top level of the page (site header) → not translated in main mode
• A <header> inside an <article> containing the article title → is translated in main mode
• A <footer> inside a <main> element with article metadata → is translated in main mode

This context-aware filtering was fixed in PR #983 to correctly handle article headers that were previously incorrectly excluded (issue #940). The fix uses the isInsideContentContainer() helper function to detect when <header>, <footer>, <nav>, or <aside> elements are nested within content containers, ensuring accurate translation of article-specific headers while still filtering out navigational elements.

You can adjust the translate.page.range setting to translate the entire page if needed. In development mode, the default translation range is set to 'all' for easier testing.

Minimum Characters Filter#

Read Frog includes a configurable filter to skip translating text nodes with fewer characters than a specified threshold. This helps reduce translation noise by ignoring very short fragments such as button labels, single characters, or navigation elements.

• Configuration:
  • The minCharactersPerNode option is available under translate.page.
  • Range: 0–1000 (0 disables the filter; default is 0).
  • Character count includes whitespace.
• UI:
  • Configurable in the Options > Translation page under "Minimum Characters Filter".
  • Includes input validation and localized descriptions.
• Behavior:
  • Applied to both bilingual and translation-only modes.
  • Text nodes with fewer characters than the threshold are skipped during translation.
• Migration:
  • Existing configurations are automatically migrated to include this field with a default value of 0.

Example configuration:

{
  "translate": {
    "page": {
      "minCharactersPerNode": 5
    }
  }
}

Exclusion of MathML Elements#

Mathematical formulas and notation are preserved by fully excluding all MathML elements from translation. All 32 MathML Core tags (such as math, mi, mo, mfrac, msub, msup, mrow, etc.) are recognized and excluded, ensuring mathematical expressions remain intact and unaltered.

Improved Handling of Academic Content#

Special handling is included for academic sites and code listings. For example, code blocks on arXiv.org (.ltx_listing) and Reddit-specific elements (such as faceplate-screen-reader-content > *, reddit-header-large *, shreddit-comment-action-row > *, and shreddit-post-flair) are excluded from translation. These custom selectors are centrally managed for maintainability.

GitHub PR review diff tables: As of version 1.31.2, GitHub PR review diff tables (table.diff-table) are properly excluded from page translation to improve translation quality and prevent translating code snippets in diff format. This ensures diff tables in GitHub PR reviews are skipped during translation traversal.

Enabling Auto Translation for URL Patterns#

Auto translation is triggered for web pages whose URLs match patterns specified in the autoTranslatePatterns array within the translate.page configuration. Domain pattern matching is precise and respects TLD boundaries:

• Only exact domains and subdomains are matched (e.g., x.com matches x.com and www.x.com, but not x.co, ax.com, or notx.com).
• Patterns do not match similar domains with different TLDs (e.g., x.com does not match x.co).
• Invalid URLs are ignored; only valid URLs are considered for matching.
• Patterns are case-insensitive and trimmed of whitespace.

Example configuration:

{
  "translate": {
    "page": {
      "autoTranslatePatterns": ["news.ycombinator.com"]
    }
  }
}

This can be managed in the configuration file or through the extension's UI under "Auto translate based on website patterns". Avoid overly broad patterns (such as ., com, /), which will not match all pages and may be ignored due to strict validation. Patterns should be specific domain names or subdomains. For more details, see configuration example.

Enabling Auto Translation Based on Language#

You can specify a list of languages in the autoTranslateLanguages array within the translate.page configuration. When a page's detected or source language matches any language in this list, auto translation will be triggered, even if the URL does not match any pattern in autoTranslatePatterns.

Note: If the detected source language of the content matches your configured target language, translation will be skipped for that content (for texts of at least 50 characters). This prevents unnecessary translation of text already in your target language.

Example configuration:

{
  "translate": {
    "page": {
      "autoTranslatePatterns": ["news.ycombinator.com"],
      "autoTranslateLanguages": ["jpn", "deu"]
    }
  }
}

This feature is available in the extension's UI under "Auto translate based on language". You can select one or more languages to trigger auto translation.

Optional: Configure language detection mode for improved accuracy. See Centralized Language Detection.

Centralized Language Detection#

Read Frog provides a unified language detection system configured globally in the General settings. This centralized configuration affects language detection behavior across multiple features:

• Auto-translate language detection: Determines which pages trigger automatic translation.
• Skip-language detection: Identifies content in languages you want to skip translating.
• TTS voice selection: Selects the appropriate voice for text-to-speech based on detected language.

Configuration#

Language detection is configured using the languageDetection object at the root level of the configuration:

{
  "languageDetection": {
    "mode": "llm",
    "providerId": "your-provider-id"
  }
}

Configuration fields:

• mode: Detection method to use
  • "basic" (default): Fast, free language detection using franc-based analysis. Recommended for most users.
  • "llm": AI-powered detection using your configured LLM provider. More accurate for complex or mixed-language content, but adds latency (~1-3 seconds) and minimal API costs (1-2 tokens per detection).
• providerId: Required when mode is "llm". Specifies which enabled LLM provider to use for detection (e.g., OpenAI, Gemini, DeepSeek, Anthropic).

UI Controls#

The language detection mode is configured in the Options page under General > Language Detection. The UI includes:

• Radio buttons to select between "Basic" and "LLM" detection modes.
• A provider selector (visible only when LLM mode is enabled) to choose which LLM provider handles detection.
• Status indicators:
  • 🟢 Green dot: LLM detection enabled and configured.
  • 🔵 Blue dot: Basic mode active (recommends enabling LLM for better accuracy).
  • 🟠 Orange dot: No LLM providers configured (LLM mode unavailable).

How it works#

• Basic mode: Uses franc-based detection with up to 3 attempts for robustness.
• LLM mode: Analyzes the page's title and up to 1500 characters of content using your configured LLM provider. If LLM detection fails, automatically falls back to basic detection.
• All features using language detection (auto-translate, skip-languages, TTS) now share this centralized configuration, ensuring consistent behavior.

Migration Note#

Deprecated configuration fields: Previous per-feature language detection toggles have been replaced by this centralized system:

• translate.page.enableLLMDetection (removed)
• translate.page.enableSkipLanguagesLLMDetection (removed)
• tts.detectLanguageMode (removed)

Existing configurations are automatically migrated to the new languageDetection structure. The migration script preserves your previous settings by:

• Setting mode to "llm" if any of the old LLM toggles were enabled and an LLM provider is available.
• Setting mode to "basic" otherwise.
• Selecting an appropriate providerId based on your translate provider configuration.

For more details, see the migration script documentation.

Configuring the Auto-Translate Shortcut Key#

The shortcut key for triggering auto translation of the entire page is configured under translate.page.shortcut. To customize, update the configuration:

{
  "translate": {
    "page": {
      "shortcut": "Alt+B"
    }
  }
}

Set the shortcut via the configuration file or the extension's options UI under "Page translation shortcut". The shortcut triggers translation of the main content of the current page. If unspecified, the default shortcut is used.

Portable Shortcut Format#

Shortcuts are stored as single strings using a portable format (e.g., "Mod+E", "Alt+Shift+T"):

• Mod: A portable modifier that maps to Command on macOS and Control on Windows/Linux
• Valid modifiers: Mod, Control, Alt, Shift, Meta
• Requirements: Must include at least one modifier and one non-modifier key
• Examples: "Mod+E", "Alt+B", "Mod+Shift+T", "Control+Alt+D"

The UI displays shortcuts using platform-native conventions (e.g., "⌘E" on macOS, "Ctrl+E" on Windows), while the configuration uses the portable format internally for cross-platform compatibility.

Note: The page translation shortcut is distinct from the hover (node) translation shortcut. Configurations using the old array format (e.g., ["alt", "b"]) are automatically migrated to the new string format by the v065-to-v066 migration script.

Configuring Pre-Translate Range (Preload)#

Read Frog allows you to control how much content below the viewport is pre-translated using the translate.page.preload configuration. This feature helps reduce API usage and lets you tune scroll performance by specifying when translation should be triggered for content that is not yet visible.

Configuration Fields#

• margin (number, pixels): How far below the viewport to start translating content. Lower values save API costs but may cause delays when scrolling. Range: 0–5000 (default: 1000).
• threshold (number, 0–1): Percentage of element visibility required to trigger translation. Higher values delay translation until more of the element is visible. Range: 0–1 (default: 0).

Example configuration:

{
  "translate": {
    "page": {
      "preload": {
        "margin": 1000,
        "threshold": 0
      }
    }
  }
}

You can adjust these settings in the configuration file or through the extension's options UI under "Pre-translate Range". This allows you to balance API usage and translation responsiveness according to your needs.

• Preload Distance (margin): Increase for smoother scrolling and less delay, decrease to save API calls.
• Visibility Threshold: Increase to delay translation until more of the element is visible, decrease for earlier translation.

All existing configurations are automatically migrated to include this field with default values. For more details, see the migration script documentation.

Node (Hover) Translation Shortcut#

Configure a separate shortcut for node (hover) translation via translate.node.hotkey. This is available in the options UI under "Hover translation shortcut".

Enabling or Disabling Hover Translation#

Hover translation can be completely enabled or disabled using the translate.node.enabled toggle in the options page under "Node Translation Hotkey" settings. This toggle provides users with full control over the hover translation feature:

• When enabled (translateConfig.node.enabled = true): Hover translation works according to the configured hotkey. Event listeners for node translation are registered and respond to user input.
• When disabled (translateConfig.node.enabled = false): Hover translation is completely disabled and will not function, regardless of the hotkey configuration. Event listeners are not registered, and the hotkey selector is visually disabled (opacity reduced) and non-interactive when the toggle is turned off.

This control is particularly useful for users who prefer not to use the hover translation feature at all. When the configuration changes, node translation listeners are automatically torn down and rebuilt to reflect the new settings.

Availability: This feature is available as of version 1.28.0.

Performance Optimization#

The hover translation feature has been optimized for better performance:

• Mousemove throttling: Mouse position tracking uses a 300ms throttle with a distance threshold to reduce unnecessary event processing. This means there may be a slight delay in position updates, especially when moving the cursor slowly or making small movements.
• Lazy listener registration: Node translation event listeners are only registered when translate.node.enabled is true, reducing overhead when the feature is disabled.
• Configuration-aware teardown: When configuration changes, existing listeners are properly torn down and rebuilt with the new settings, ensuring clean state management and preventing memory leaks.

Hotkey Configuration#

Example configuration:

{
  "translate": {
    "node": {
      "enabled": true,
      "hotkey": "alt"
    }
  }
}

• Page translation shortcut: Triggers translation of the main content.
• Hover translation shortcut: Triggers translation of a single paragraph or element when hovering, using the configured modifier key.

Both shortcuts are customizable and fully internationalized in the options UI.

Automatic Tab Title Translation#

When page translation is enabled, Read Frog automatically translates the browser tab title (document.title) to keep it consistent with the translated page content. This feature enhances the user experience by ensuring that tab titles reflect the translated content, making it easier to identify and navigate between translated pages.

Key features:

• Automatic translation: The tab title is translated when page translation starts, using the same translation provider, language settings, and AI content-aware configuration as page translation.
• Real-time updates: If the source page changes its title dynamically, the translated title updates automatically to reflect the change.
• Context-aware translation: When AI content-aware mode is enabled, the tab title translation uses the article context for improved accuracy.
• Automatic restoration: When page translation is disabled, the original source title is automatically restored.
• Top-level windows only: Tab title translation operates only in the top-level window (not in iframes), ensuring consistent behavior across different browsing contexts.
• Stale result handling: Uses a version counter to discard outdated translation results if the source title changes during translation, ensuring only the latest translation is applied.

How it works:

1. When page translation starts, the current tab title is translated using the page translation configuration.
2. A MutationObserver tracks changes to the source title. If the source page updates its title, a new translation is triggered automatically.
3. When page translation stops, the most recent source title is restored to the tab.
4. Translations are cached and deduplicated to minimize unnecessary API calls.

This feature requires no configuration and works automatically with all page translation modes.

Related Features#

Selection Translation Features#

Selection translation provides additional translation capabilities that complement automatic page translation. Users can translate selected text using multiple methods:

Selection Toolbar#

The selection toolbar appears when text is selected and provides quick access to translation:

• Pin support: Selection toolbar translation popovers can be pinned to keep them visible while you interact with other content on the page. This allows you to reference translations without losing them when clicking elsewhere.
• Target language selector: Quickly select a different target language directly from the selection toolbar translation popover without navigating to settings.
• Improved translation flow: Simplified translation workflow with better handling of stale requests, ensuring that only the most recent translation is displayed when multiple translations are triggered in quick succession.

Context Menu Integration#

In addition to the selection toolbar, users can trigger selection translation through the browser's right-click context menu:

• Selection translation entry: When text is selected, right-click to see a "Translate [selected text]" option in the context menu. This provides an alternative way to translate selected text without using the selection toolbar.
• Custom AI actions: Custom AI actions (such as dictionary lookup, rewriting, or other configured actions) also appear in the right-click context menu for selected text. These actions use the same popover and execution flow as the selection toolbar buttons, providing a consistent experience.
• Unified configuration: Context menu entries for translation and custom actions are controlled by the same configuration toggle (contextMenu.enabled) and share the same feature settings as the selection toolbar.

These features improve the overall translation experience when working with selected text alongside automatic page translation, offering multiple entry points to suit different workflows.

Performance Optimizations#

Read Frog includes several optimizations that improve the auto translation experience:

• Efficient resource management: The extension avoids re-fetching vocabulary, dictionary, and translation resources after page navigation, reducing unnecessary API calls and improving responsiveness.
• Optimized content script: Configuration is cached synchronously for faster response times in event handlers, and the selection UI is mounted lazily only when needed.
• Proper teardown: Event listeners and resources are properly cleaned up when translation is disabled or configuration changes, preventing memory leaks and ensuring consistent behavior.

How Auto Translation Triggers Work#

Auto translation is enabled for a page if either:

• The page URL matches any pattern in autoTranslatePatterns (using exact and subdomain matching only).
• The detected or source language matches any language in autoTranslateLanguages.

This allows flexible control by site, by language, or both. The shortcut key in translate.page.shortcut allows manual triggering regardless of these patterns.

Translation in Iframes and Shadow DOMs#

Read Frog's translation engine provides robust support for translating content inside iframes—including dynamically created or sandboxed iframes that Chrome's manifest-based injection may miss. Each iframe now runs its own content script, ensuring that translation features work reliably for all iframe content, regardless of when or how the iframe is loaded.

Performance Note#

The extension uses a synchronous cached configuration approach for improved responsiveness in event handlers. Configuration is loaded once during initialization and cached in memory, eliminating async overhead during keydown, mousemove, and mousedown events. This results in faster response times for all translation triggers while maintaining the same user-facing functionality.

How iframe translation works#

• Manifest-based injection: Content scripts are declared with allFrames: true so that Chrome injects them into all frames when possible.
• Programmatic injection fallback: For dynamically created or sandboxed iframes that Chrome misses, Read Frog uses the webNavigation and scripting APIs to inject content scripts as soon as new iframes finish loading.
• Site control for blank iframes: When the extension encounters temporary document types (such as about:blank or about:srcdoc), it resolves site control against the nearest ancestor frame with a real URL. This ensures that temporary blank iframes belonging to disabled sites do not bypass disabled-site rules and receive translation functionality.
• Per-document injection tracking: The extension uses documentId-based deduplication to prevent duplicate script injections into the same iframe document, even when the iframe navigates or reloads.
• Double-injection prevention: Window flags (__READ_FROG_HOST_INJECTED__, __READ_FROG_SELECTION_INJECTED__) ensure that scripts are only injected once per frame, even if both manifest and programmatic injection occur.
• Late-loading iframe support: Content scripts check if page translation is already enabled for the tab and start automatically if needed.
• Permissions: The extension requests scripting, webNavigation, and *://*/* host permissions to enable programmatic injection and cross-origin iframe access.
• No manual iframe traversal: The translation engine no longer traverses iframes from the main frame. Each iframe is responsible for its own translation logic, improving reliability and performance.

This approach ensures that translation works for all iframe content, including complex sites like edX, embedded widgets, and dynamically inserted frames. Iframes belonging to disabled sites will not receive translation functionality, even if they start as about:blank or about:srcdoc documents before being populated with content.

How Shadow DOM translation and style injection works#

Read Frog now fully supports translating and styling content inside Shadow DOMs, such as those used by custom web components. Previously, translation styles were only injected at the document level, which meant translated content inside Shadow Roots was not styled correctly due to style encapsulation.

Key features of Shadow DOM support:

• Automatic detection of Shadow Roots: When translated content is inserted, Read Frog detects if it is inside a ShadowRoot using node.getRootNode().
• Direct style injection: Styles are injected directly into the containing ShadowRoot using the adoptedStyleSheets API when available. This ensures that translation styles (both preset and custom) apply correctly inside shadow boundaries.
• CSS variable inheritance: For Shadow DOM contexts, CSS variables are inherited by replacing :root selectors with :host in injected stylesheets, ensuring consistent theming.
• Fallback for older browsers: If adoptedStyleSheets is not supported, a <style> element is injected into the ShadowRoot as a fallback.
• No style duplication: Stylesheets are marked and managed to prevent duplicate injection into the same root.
• Unified style injector: All style injection logic is handled by a unified module, ensuring consistent behavior across Document and ShadowRoot contexts.

User impact:

• Translated content inside web components and Shadow DOMs is now styled identically to content in the main document.
• Custom translation styles and presets work seamlessly inside ShadowRoots.
• No manual configuration is required—Shadow DOM support is automatic.

This enhancement ensures that translation coverage and styling are reliable across all modern web architectures, including sites that use Shadow DOM for encapsulation.

Float Layout Handling in Bilingual Mode#

When translating content that appears alongside floated elements (such as floated images, sidebars, or information boxes), Read Frog intelligently detects these float contexts and applies special styling to maintain proper text wrapping and layout flow. This is particularly important on sites like Wikipedia that extensively use CSS float-based layouts.

How float detection works:

• Automatic detection: During translation insertion, the extension checks for floated siblings (CSS float: left or float: right) within the same parent container.
• Vertical overlap detection: The algorithm determines if the floated element vertically overlaps with the paragraph being translated by comparing their bounding rectangles.
• Adaptive styling: When an active float affects the translation target, block translations receive special styling (display: block instead of inline-block) to ensure translations wrap correctly around floated content.

User impact:

• Bilingual translations on pages with complex float-based layouts maintain readable text flow.
• Translated paragraphs beside floated images or info boxes remain properly positioned and do not drop below the floated content unexpectedly.
• No manual configuration is required—float detection is automatic and applies only when needed.

Auto Translation Improvements#

Recent improvements include:

• Full support for translation inside all iframes, including dynamic and sandboxed frames.
• Improved performance by batching translation wrappers.
• Full exclusion of MathML elements.
• Default translation range set to 'main'; 'all' in development mode.
• Exclusion of code listings and custom elements from translation traversal.
• Exclusion of Reddit-specific UI/accessibility elements.
• Exclusion of decorative and non-content elements (SVG, SCRIPT, STYLE, etc.): Elements that are not meant to be translated, such as SVG graphics, script tags, and style tags, are now filtered out during translation traversal. This prevents visual artifacts (such as stray dots) and ensures only meaningful content is translated.
• Exclusion of elements with aria-hidden="true", sr-only, or visually-hidden classes: Elements marked as aria-hidden or with classes commonly used to visually hide content (such as sr-only and visually-hidden) are excluded from translation traversal. Screen-reader-only content and other visually hidden elements are properly skipped during auto-translation. This prevents hidden or accessibility-only elements from affecting block/inline determination and ensures only visible content is translated, maintaining proper accessibility behavior.
• Exclusion of YouTube-specific UI elements and metadata: Navigation bars, masthead, guide, metadata panels, channel name, comments header, reply/more buttons, badges, and other non-content selectors on www.youtube.com are now excluded from translation. This ensures only real content is translated and prevents broken labels. The following selectors are used for exclusion:
  • #masthead-container *, #guide-inner-content *, #metadata *, #channel-name, .translate-button, .yt-lockup-metadata-view-model__metadata, .yt-spec-avatar-shape__badge-text, .shortsLockupViewModelHostOutsideMetadataSubhead, ytd-comments-header-renderer, #top-row, #header-author, #reply-button-end, #more-replies, #info, #badges *
• Only relevant content is translated, not entire ancestor nodes.
• Recursive translation is avoided for already translated nodes.
• Custom DOM rule filtering supports any CSS selector.
• Faster, GPU-accelerated spinner animation that is properly isolated from host page CSS, ensuring it maintains its circular shape and respects accessibility settings.
• Updated translation prompt for better quality.
• Auto translation can be triggered by detected language.
• Default settings are used if configuration is missing or invalid.
• Shortcut key managed under translate.page.shortcut.
• Font families applied to translated content wrapper and children.
• New: Automatic tab title translation that keeps browser tabs consistent with translated page content, with real-time updates and automatic restoration.
• New: Centralized language detection system with unified configuration affecting auto-translate, skip-languages, and TTS voice selection.
• New: Translation is skipped if the detected source language matches the target language (for texts of at least 50 characters).
• New: Domain pattern matching now strictly respects TLD boundaries (e.g., x.com does not match x.co).
• New: Fallback values are used for empty title or summary fields in translation prompts.
• New: The default translation node style for new installs is now set to textColor.
• New: Minimum Characters Filter to skip translating short text nodes, configurable in settings.
• New: Floating button drag is now smooth and responsive, with storage writes deferred until drag ends for better performance.
• New: Float layout handling in bilingual mode preserves text flow around floated elements on sites like Wikipedia, with automatic detection and adaptive styling.

Site-Specific Block Translation Selectors#

Read Frog supports site-specific CSS selectors that force block-style translation for designated elements. This is managed via the CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP configuration, which maps hostnames to arrays of CSS selectors. When an element matches a selector for the current site, its translation will always appear as a block (on a new line below the original text), regardless of other inline/block rules.

How it works:

• The translation insertion logic prioritizes these selectors: if an element matches a site-specific block selector, block translation is applied before other rules.
• This is useful for sites where inline translation would disrupt layout or readability, such as commit messages on GitHub or article paragraphs on engoo.com.

Examples:

• On github.com, the selector .react-directory-row-commit-cell * ensures that commit messages are always translated as blocks below the original text.
• On engoo.com, the selector #windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm * forces block translation for article paragraphs in the exercise-2 section, ensuring translations are rendered as separate blocks for better readability.
• On www.reddit.com, the selector shreddit-post-text-body forces block translation for Reddit post body content, ensuring post text is translated as block paragraphs instead of being squeezed into a single inline translation area.
• On www.youtube.com, the selector yt-attributed-string > span forces block translation for YouTube comments, ensuring comment text is translated as blocks for better readability.

Configuration:

• The selector map is centrally managed and can be extended for other sites as needed.
• Example entry:
  Copy

  export const CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP: Record<string, string[]> = {
    'github.com': [
      '.react-directory-row-commit-cell *',
    ],
    'engoo.com': [
      '#windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *',
    ],
    'www.reddit.com': [
      'shreddit-post-text-body',
    ],
    'www.youtube.com': [
      'yt-attributed-string > span',
    ],
  }
  

Translation Priority:

• The priority order for translation style is:
  1. Site-specific block selector (customForceBlock)
  2. Forced inline translation
  3. Forced block translation
  4. Inline translation node
  5. Block translation node

This feature enables more precise control over translation rendering for complex or content-sensitive sites.

Managing Ignored Tabs#

Certain tabs are excluded from translation, such as about:blank, chrome://newtab/, and extension URLs. This is managed using Jotai atoms. For details, see ignored tab management.

Configuration and User Experience#

Configure auto translation patterns, shortcut keys, node styles, and minimum characters filter via the options page or configuration file. Node style controls visual presentation, not auto translation triggers. For new installs, the default translation node style is now set to textColor. Proper configuration ensures seamless, dynamic translation coverage. Default settings maintain functionality if issues occur.

Recommended Practices#

• Specify only the domains you want auto translated in autoTranslatePatterns (exact domains or subdomains).
• Specify only the languages you want auto translated in autoTranslateLanguages.
• Set a shortcut key in translate.page.shortcut that suits your workflow.
• Use the minimum characters filter to skip short, non-essential text nodes.
• Avoid broad or invalid patterns; only valid domain names are matched.
• Regularly review and update your patterns, languages, shortcut, and minimum characters setting in the "Auto translate" settings.

For further customization and troubleshooting, refer to auto-translation.ts and the AutoTranslateWebsitePatterns, AutoTranslateLanguages, and shortcut configuration components.

Note: Existing configurations using the old customAutoTranslateShortcutKey field are automatically migrated to translate.page.shortcut. The v065-to-v066 migration also converts the shortcut format from string arrays to portable hotkey strings. The minimum characters filter is also automatically added to all configs with a default value of 0. Per-feature language detection toggles (translate.page.enableLLMDetection, translate.page.enableSkipLanguagesLLMDetection, tts.detectLanguageMode) have been replaced by the centralized languageDetection configuration.

Academic and Scientific Content:
Read Frog preserves the integrity of academic and scientific documents by excluding MathML elements and code listings from translation, ensuring mathematical notation and code remain unaltered.

For more details on MathML exclusion and academic content handling, see issue #555.

If you encounter issues with formula rendering or content preservation, report them via the project's issue tracker.

Technical Note:

• Domain pattern matching for auto translation now uses exact and subdomain logic, with strict URL validation. Only valid URLs are considered, and patterns must be valid domain names. Substring matches are no longer used, preventing false positives (e.g., x.com does not match ax.com).
• Translation in iframes is now handled by injecting content scripts into each iframe, using both manifest-based and programmatic injection for full coverage. Manual iframe traversal from the main frame is no longer used.
• The extension requests scripting, webNavigation, and *://*/* host permissions to support programmatic injection and cross-origin iframe access.
• The floating button drag experience is now smooth and responsive, with storage writes deferred until the drag operation ends for improved performance.

For implementation details, see auto-translation.ts.

If you have questions about domain pattern configuration, iframe translation, or matching logic, consult the documentation or open an issue for support.

Site-Specific Block Translation Selector Reference:

• github.com: .react-directory-row-commit-cell *
• engoo.com: #windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *
• www.reddit.com: shreddit-post-text-body
• www.youtube.com: yt-attributed-string > span

These selectors ensure translations are rendered as blocks for improved readability and layout integrity on supported sites.

Iframe Translation Support:
Read Frog now reliably translates content inside all iframes, including dynamically created and sandboxed frames, by injecting content scripts into each iframe using both manifest and programmatic methods. This ensures comprehensive translation coverage for complex web applications and embedded content.

Floating Button Drag Improvement:
The floating button can now be dragged smoothly, with position updates stored only after the drag ends. This results in a more responsive UI and reduces unnecessary storage operations during dragging.

For any further questions or feedback, please refer to the project's documentation or open an issue.