Why?
- I have been learning new languages from time to time. Most people experience that some time in their life.
- Modern browsers offer the possibility to translate whole web pages to your desired target language. These ML-based approaches have been getting significantly better in translating various languages back and forth.
- I have very limited knowledge in web-technologies but am eager to learn.
I wanted to see the translation and the original text at the same time. Since all HTML-based webpages are made up of elements, I had the idea to build this extension.
What?
This browser extension (available on github) contains two modes for translating your daily web:
- Translate page
- will translate every elements text content found on the current web page. Details for which elements to consider can be set in the extension options.
- Individual
- hover over any part of the webpage and click to translate the contained elements individually.
Currently, the extension simply copies the element, translates the text and adds the new text below. This simple approach worked very well on webpages with a nice structure of heading h1, h2, ... and paragraph p elements. Especially simple language news pages are a good source to learn the new language since they usually pack every information in a separate paragraph.
Options
You can choose your target language, while the tool auto-detects the text’s source language. Headings, paragraphs and other tags can be activated and deactivated separately. If you want to save on translated characters or are already more advanced in the language, specific parts of the webpage may be sufficient.
Microsoft Translator
During this project I learned that good ML-based translation is still mainly done by big companies, and usually comes with a cost. Microsoft’s Translator is a great way to get free translations. Because it is included in the Cognitive Services which are part of the Azure cloud computing service, there are a few steps to set everything up (see detailed steps in the readme). Nevertheless, it provides one of the best translations at no cost and does not involve Google - which might be a plus for some of you.
Browser support
There is a thing called Chromium. Chromium-based browsers have a high market share and good development support. The extension has been tested in Chrome and Edge.
Design
I quickly started using the extension myself so I wanted it to look good as well. Therefore, I created a small logo for the address bar. It’s loosely related to the initials of multilingual web but also resembles individual pages and elements in the web.
The extension popup and options follow the same color scheme. Since the highlighting of elements only adds text color and a border, it works on dark and light websites. Unless the background is some type of green, it is fairly readable on both. The translated text’s styling might be adjustable in future versions. But of course the best way to add your two cents is via github. I made the repository public so that more advanced web developers can add their wisdom.