DEV Community

pBinder
pBinder

Posted on

I built a local-first Chrome extension for translating selected text and saving vocabulary

I recently built Vocabinet, a Chrome extension for people who read foreign-language content online and want a faster way to translate words or phrases without leaving the page.

The idea came from a small frustration: when I’m reading an article, blog post, or documentation in another language, the lookup flow is usually too disruptive. I either open a new tab, paste text into a translator, or translate the page and lose the original reading context.

I wanted a lighter workflow:

  • highlight text on a webpage
  • translate the selected word or phrase
  • optionally save it to a vocabulary list
  • search saved vocabulary later
  • export the list as CSV

What it does

Vocabinet lets you translate selected text directly on the page using Chrome’s built-in Translator API.

The current workflow includes:

  • selected-text translation
  • keyboard shortcut support
  • optional double-click quick translate
  • local vocabulary saving
  • search and delete for saved items
  • CSV export
  • text-to-speech for source text

The core workflow does not require an account.

Why Chrome’s built-in Translator API?

I wanted the extension to be local-first where possible and avoid building the first version around a paid translation API.

Chrome’s built-in Translator API makes that possible, although it also comes with some constraints:

  • users need a supported desktop Chrome version
  • some language pairs depend on Chrome’s local support
  • a language pack may need to download on first use
  • it does not work on Chrome internal pages like chrome://

That tradeoff felt worthwhile for a tool focused on quick reading assistance and personal vocabulary capture.

Why include vocabulary saving?

Translation alone is useful, but it often becomes a dead end. You look up a word, understand the sentence, and then forget the word later.

So I added a simple local vocabulary list. When a translation is useful, you can save it and come back to it later. For now, export is CSV because it is simple and portable.

I’m considering whether direct Anki export should be added next.

A few things I learned while building it

Building a Chrome extension around selected text sounds simple, but there are a lot of small UX details:

  • selections disappear easily when users click elsewhere
  • double-click lookup can be helpful, but it can also become annoying if it appears too aggressively
  • translation errors need to be clear because language availability depends on the browser/device
  • keyboard shortcuts are faster for power users, but many users still expect a visible popup flow
  • permission scope matters a lot for user trust

The extension currently uses limited permissions and keeps the vocabulary list local.

What I’d like feedback on

I’m especially interested in feedback from people who read in other languages online:

  • Is selected-text translation the right workflow?
  • Would double-click lookup be useful or distracting?
  • Is CSV export enough, or would Anki export be expected?
  • Is local-only storage a benefit, or would sync matter more?
  • Are there any permission or onboarding concerns?

Chrome Web Store:
https://chromewebstore.google.com/detail/bmchpdngcmmalcpdlingddcmlfcddiia

Thanks for reading. I’d appreciate any feedback from language learners, Chrome extension builders, or anyone who has worked with browser-based translation tools.

Top comments (0)