ChromaTranslator-彩译

A Chrome build-in AI based translator extension，making translation simpler, more efficient.

Comment

Inspiration

Using Chrome built-in AI capability we can build the extensions with powerful features such as:

  • Zero Cost - No account registration, no API keys needed
  • Privacy Protected - Translation happens locally, no data sent to third-party servers
  • Offline Capable - Supports offline translation, no internet dependency
  • Unlimited Usage - No translation limits, use anytime, anywhere So I made this: ChromaTranslator.

What it does

  • ✅ Input Box Translation - Translate any text in the extension popup
  • ✅ Selected Text Translation - Select webpage text to show floating translation window
  • ✅ Full Webpage Translation - One-click translation of entire webpages with streaming updates and progress display
  • ✅ Settings Page - Configure default target language for selection and full-page translation

How we built it

  1. Using Chrome built-in AI as the core services, such as the Dectector AI API to auto detect the input contents' language, and the Translator AI API to translate the input contents to the target language.
  2. Using AI coding assitant tool to help designing the CSS layout
  3. Using typescript as the extension developent language, and compile it to the target release JavaScript files.

Challenges we ran into

  1. UI design and CSS layout I lack some experience in UI design and CSS layout, and it is difficult to design a modern and beautiful style layout.
  2. The quality of the built-in AI model ability translation is lacking

Accomplishments that we're proud of

  1. Good UI layout and interaction design, high product completion
  2. The core translation function meets the needs of most scenarios

What we learned

  1. In-depth understanding of the development of Chrome extension applications
  2. In-depth understanding of Chrome's built-in AI capabilities and usage scenarios
  3. Combined with Chrome's built-in AI capabilities, a real application has been implemented, I'm really proud of that, hope this extension can help some other people

What's next for ChromaTranslator-彩译

Add some other translate engine such as Google gemini to promote the quality of translation.

Built With

Share this project:

Updates