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.