feat(browser): add an in-app page translation button
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 395
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 776
Description
## Summary
Add a visible one-click page translation button to Cindy's embedded Browser toolbar.
## Motivation
When users read foreign-language sites such as [Visit Japan Web](https://services.digital.go.jp/visit-japan-web/), they currently need to copy the URL into an external browser or use a separate translation workflow. A built-in action would keep the task inside Cindy's Browser and make the feature discoverable.
## Proposed behavior
- Add a visible Languages/Translate button to the embedded Browser toolbar.
- Show the button with localized text in the supported UI locales; initially include English, Simplified Chinese, Japanese, and Korean.
- Enable it only for normal `http://` and `https://` pages; keep it disabled for blank pages and local/custom protocols.
- Translate the current page in the same Browser tab.
- Use Cindy's current interface locale as the default target language:
- `en` → English
- `zh` / `zh-CN` → Simplified Chinese
- `ja` → Japanese
- `ko` → Korean
- Preserve the original page URL as the translation source and avoid exposing browser credentials or local storage.
## Possible implementation
The current prototype builds a hosted translation URL without an API key:
`https://translate.google.com/translate?sl=auto&tl=&u=`
The implementation should use the latest browser state after address-bar navigation, not a stale WebView URL.
## Acceptance criteria
- The button is visible and discoverable in both Light and Dark themes.
- The button is localized in all supported locales.
- Blank/local pages cannot trigger translation.
- Navigation and encoded query parameters are handled safely.
- Unit tests cover language mapping, HTTP(S) validation, URL generation, button invocation, and disabled states.
- The maintainers confirm whether the hosted Google Translate view is acceptable, or replace it with a preferred translation mechanism.
## Related deliverable
A reusable Cindy Skill was prepared for the workflow: `cindy-browser-translate`. It opens a page in Cindy's built-in Browser and invokes the translation button for other developers and users.
Contributor guide
Research direction
Start at the embedded Browser toolbar and the address-bar navigation entry point, then review the related cindy-browser-translate Skill workflow. Define the locale mapping, HTTP(S) validation, safe URL generation, and button invocation before adding unit tests for those cases and disabled states. Done means a localized Light/Dark-theme button translates the current page in the same tab without exposing browser data, subject to maintainer approval of the hosted Google Translate view.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, internationalization, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100