feat: Optimize translation-hub to support split-screen mode#1681
Conversation
|
github-actions
Bot
added
feat
contrib-trust:new
Contributor trust score20/100 — New contributor This score estimates contributor familiarity with Outcome
Score breakdown
Signals used
Policy
Updated automatically when the PR changes or when a maintainer reruns the workflow. |
|
We use split-screen instead of adding DOM elements to the original webpage to avoid potential bugs in various components, such as using overlays within shadow DOM. These issues are really troublesome, so we ultimately decided to use split-screen. However, this does present some problems in Firefox, as the APIs are somewhat different. But we believe there are still not enough reasons for us to avoid using split-screen. |
|
I understand your concerns, but looking at it from another perspective, this simply makes translate-hub.html more convenient to use. This functionality is already built into the project, and I decided to implement this feature after noticing multiple user requests for quickly translating external text.Thinking more broadly, we will eventually need to support mobile and desktop, as well as Chrome, Edge, Firefox, Safari, and more. This does not conflict with a standalone app; it merely extends the existing experience. Many users won't download a dedicated app just for translation, so offering a seamless extension experience is crucial for user retention. Coming back to this specific feature, it is simply an extension of the current translation hub designed to meet user needs, and it works perfectly on mobile as well. |
# Conflicts: # src/utils/config/__tests__/example/v078.ts # src/utils/config/__tests__/migration-scripts/v077-to-v078.test.ts # src/utils/config/migration-scripts/v077-to-v078.ts # src/utils/constants/config.ts # src/utils/constants/translate.ts
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 70b51c5907
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
@mengxi-ream It now runs perfectly across Edge, Chrome, and Firefox. The feature supports native browser-level split-screen and seamlessly falls back to DOM rendering in case of any failures, ensuring a stable user experience. |
|
Sounds good! Will review this when I get time. This month gonna be busy for the notebase feature. So probably will review next month! Thank you for your effort! |
3 participants
Type of Changes
Description
The project itself has already fully implemented the translation hub (translation-hub.html). We can achieve split-screen usage without affecting its original features. To this end, I have made extensive improvements and optimizations:By default, the split-screen is rendered via DOM. This is the most compatible rendering method, which also guarantees a consistent user experience on Firefox, Safari, and mobile devices. Meanwhile, to avoid breaking the DOM, a split-screen option based on browser split-screen APIs is also provided. These two approaches are not mutually exclusive—the DOM approach can serve as a robust fallback to prioritize and protect the user experience.During the compatibility adjustment for Firefox, I encountered and addressed specific issues such as TTS being unavailable and failures in private browsing mode. Firefox now delivers the same seamless experience as Edge. Due to the strict content script restrictions in Firefox, the floating window can only fall back to calling the DOM split-screen, whereas the popup and shortcuts successfully implement the browser API-based split-screen.
Related Issue
Closes #1491 #1196 #1643 #831 #1044 #925 #1633 #1668 #831 #1633 #1044 #1577 #1580 #1687
How Has This Been Tested?
Screenshots
2026-06-12.174831.mp4
Checklist
Additional Information
After multiple rounds of testing, the translation hub (translation-hub.html) is now fully supported on Edge, Chrome, and Firefox. It can be accessed via split-screen using shortcuts, the popup, and the floating window, with all of its original functions completely preserved. Additionally, it now features streaming output, saves translation languages, remembers preferred translation services, supports custom shortcuts, and automatically falls back to DOM rendering when the side panel API fails—ensuring the user experience is always prioritized.