InfoBlend
A reading toolkit that defines, translates, and summarizes client-side without breaking website styles or requiring an API key.
Problem
I was reading with four extensions open and got tired of it, so I built one. Half of the existing extensions injected global CSS that broke websites, and the rest refused to work at all unless you gave them an API key right away.
Approach
I built one unified extension. If you don't provide a key, it uses a free tier for translation and runs extractive summarization offline. Figuring out Manifest V3 service workers and Shadow DOM isolation took work, but it keeps the extension completely isolated from host page styles.
Key decisions
- 01
Making it work for free
It's annoying when extensions are dead weight until you add a key. InfoBlend works fine out of the box with offline fallbacks.
- 02
Shadow DOM isolation
At first, host website stylesheets bled into the extension UI. I used Shadow DOM to completely wall off InfoBlend from the rest of the page.
- 03
Deleting bloat
I prototyped a full "chat with the page" feature, but it was sluggish and bloated. I scrapped it to keep the core reading flow instant.
Outcome
Published on Firefox Add-ons, supporting 17 languages with zero page layout interference.