Math Shield banner

Math Shield

3 devlogs
9h 47m 48s

When I was translating physics questions from my favorite Russian website, the mathematical formulas kept getting messed up. So I had the idea of creating an extension to protect these formulas and be able to solve the problems without having to k…

When I was translating physics questions from my favorite Russian website, the mathematical formulas kept getting messed up. So I had the idea of creating an extension to protect these formulas and be able to solve the problems without having to keep copying them into ChatGPT.

I learned a bit about browser extensions using Google’s tutorial and created Math Shield. The idea is to translate mathematical expressions, including units and subscripts, without breaking their display.

When it’s ready, the extension could help many people from different countries who want to learn from technical materials.

This project uses AI

I used ChatGPT for debugging and to generate the logo

Demo Repository

Loading README...

Samuel

Last fixes:
Spacing bug: Fixed an issue where formulas were sticking to surrounding text after translation.
Unit translation: Reworked unit handling to correctly convert prefix + base units, enabling much more units.

Now the extension is basically finished. Formulas stay intact, and problems are finally readable. The next step would be to generalize to more languages.

Attachment
0
Samuel

The goal was simple: translate without breaking formulas.
My approach was straightforward: find LaTeX tags like \text{} and \mathrm{}, send the content to Google Translate, replace it inside the LaTeX source, and let MathJax re-render.
First problem: MathJax wasn’t updating
My content script runs in an isolated context while MathJax lives in the page’s main context. To fix that, I introduced a background.js script. Instead of calling MathJax directly, content.js sends a message and background.js injects code into the MAIN world where MathJax actually lives.
Second problem: units were being mistranslated
Sending some units to the Google Translate API was producing wrong or inconsistent results, so I built a dictionary mapping each Cyrillic unit directly to its Latin equivalent, bypassing the API entirely for those cases.
Third problem: formulas were still visually broken
Even after the translations were correct, the rendered math was displaced and overlapping with surrounding text. After inspecting the DOM directly, I found that Google Translate was reaching inside the MathJax-rendered elements and wrapping text nodes in tags, duplicating content. The fix was to mark all MathJax elements as notranslate before the Translate engine could touch them..
What’s next
Fix remaining small bugs, drop the hardcoded unit dictionary in favor of a smarter approach, and generalize the extension to work with other languages beyond Russian.

Attachment
0
Samuel

For now, I only used the class notranslate to keep the formulas intact, which helps a little with the visualization, but some parts inside the expressions still end up in Russian, line physics units and subcripts. I’m now trying to deal with these.

Attachment
0