A Language Learning extension stopped supporting Firefox, so I rewrote the extension.
Hi all,
Long time no write.
A little while ago, the Toucan Language Learning Extension was bought out by Babbel and they subsequently dropped support for Safari and Firefox, streamlining their operations to just a Chrome(ium) Extension. Since then, I'd been planning to remake the extension at some point. A few weeks ago I finally decided to give it a shot.
It's my first time building an extension and I switched approaches a few times, so it's certainly not a pretty codebase, but I present to you Fluent Tab (pending publication on the Firefox Extension Store). The code for the extension can be viewed at GitHub.
What it does
I really liked Toucan for language learning because it allowed me to fit it into my day without much thought and gain valuable exposure to my target language. Fluent Tab works similarly - it translates words on webpages into your target language. By hovering over translated words, you can see the original English text (this was inspired directly by Toucan's design). You can mark words as learned or incorrect to stop seeing them, and you can also correct words via the incorrect button.
The extension has adjustable difficulty levels and customisable intensity - you can control what percentage of words get replaced from 1-30%. It supports 11 languages: French, Spanish, German, Italian, Portuguese, Russian, Japanese, Korean, Chinese, Dutch, and Polish. No particular choice there, just languages that seemed common to learn for English speakers. It also includes progress tracking, translation caching for performance, and data export/import.
Building it
This was my first time building a browser extension, and the development process took a few days spread over around three weeks. The biggest technical hurdle was probably the differences between regular JavaScript and browser extension JavaScript, particularly getting things to work across the background/content script boundary.
For styling, I used Tailwind for the pop-up (when you click the extension icon), but switched to writing custom CSS for the in-page elements since Tailwind doesn't really play nice with being injected into webpages.
I chose to target Firefox first since Chrome users can still use the original Toucan extension, and Firefox is my daily driver browser. For translations, I'm using DeepL's API.
What's next
Fluent Tab is currently pending publication on the Firefox Extension Store, primarily for my own use. Hopefully, there were some other Toucan users who also find it useful.
Thanks for reading and have a great day.
Like what I write? Subscribe to my Mailing List or RSS feed.
Comments? Questions? Feel free to send me an Email.
This post was last edited 4 weeks, 2 days ago.