I built a translation sidebar for Telegram Web

Following a conversation in another language can mean a lot of copying, switching tabs and trying to find your place again. I wanted the translation to stay beside the conversation, so I built a Chrome extension for Telegram Web.

Telegram Translation — Game Chat Translator is already published on the Chrome Web Store. It puts translated messages in a panel on the right side of Telegram's browser interface.

See the extension on the Chrome Web Store.

This is one of the small tools I have been building with AI-assisted development. The aim is practical: make an existing workflow easier without asking people to move their conversations to a new app.

Keeping the original conversation in view

The sidebar separates the original chat from its translations. It includes the sender's name and lets a reader jump between a translation and the corresponding message.

That connection matters more than simply producing translated text. A sentence without its speaker or surrounding replies can be hard to follow. Clicking either side is intended to bring the matching entry into view and highlight it.

The extension also lets the user change the target language, hide the panel and adjust its width. Its settings interface has Japanese and English text.

Reading and replying need different controls

Automatic translation helps a reader follow incoming messages. Translating a reply is a different operation: it changes words that someone else may receive.

For that operation, the extension has a selection popup. The user selects text in the input field, asks for a translation and chooses Replace to put the result into the editor. Sending the message remains a separate action.

This gives the writer a chance to check names, terminology and tone before sending. The source implementation does not press Telegram's Send button in the replacement handler.

The extension is for Telegram Web in Chrome. It is not a feature of Telegram's mobile or desktop applications.

The browser-extension structure

The local v1.0.0 project uses Manifest V3 and separates three jobs:

content.js     observes Telegram's page and displays the panel
background.js queues external translation requests
popup.js      manages language and panel settings

The content script uses a MutationObserver to find new message elements. An IntersectionObserver delays translation until a message stays in the observed area for about 300 milliseconds. The observed area includes a 300-pixel margin below the viewport, so this is near-viewport processing rather than a promise to translate only text already visible on screen.

The panel keeps a relationship between a message element and its translated entry. Channel changes clear the panel and trigger another scan. This is the part I find useful as a development example: the interface has to keep translations attached to their context while the underlying page changes.

My Discord translation project uses an inline presentation near the message. For Telegram, I chose a separate panel. Both layouts address the same problem, but they make different demands on space and on the connection between original and translated text.

What the tool does with text

Translation requires sending text to an external translation service. This is not an offline translator, and it is not an official Telegram or Google extension.

The Free edition has daily limits. The published store page explains the available features and limits; that is the place to check before installing. A local Pro package also exists, but a higher client-side allowance does not guarantee unlimited capacity from the translation service.

I have checked this description against the local v1.0.0 source and the published store page. I have not run a new end-to-end compatibility or speed benchmark for this English article. Telegram Web can change, so publication of the extension and a fresh compatibility test are separate facts.

Try it or use the idea in your own project

If you use Telegram Web for an international game community, an open-source project or a multilingual group, the idea is to keep the original discussion and its translation close enough to read together.

The Chrome Web Store listing is here. The earlier Japanese project introduction shows the original presentation.

For developers, the reusable idea is the connection between a changing page, a translated result and a reader's place in the conversation. It can be a better starting point than building another standalone chat application.

AI disclosure: An AI agent prepared and revised this English article from the owner's Japanese project article and local extension source. The public project article and Chrome Web Store listing were checked. It introduces an existing published project; it does not report new user results or measured time savings.