Language browser extension

Jan Stárek / 08.05.2026

Budoucnost práce: LanguageBar - doplněk do prohlížeče pro rychlý překlad a vysvětlení gramatiky

Co jsem řešil a proč?

Učím se německy a chyběl mi nástroj, který by mi pomáhal trénovat aktivní němčinu přímo při prohlížení webu. Protože jsem nenašel žádné řešení, které by odpovídalo mým představám, postavil jsem si ho sám s pomocí modelu Claude. Následující text popisuje, jak jsem k tomuto problému přistupoval, a obsahuje také odkaz na GitHub, kde si lze tento doplněk stáhnout.

Při čtení článků v češtině nebo angličtině mi často přicházela na mysl otázka: „Jak by se třeba tato věta nebo slovo řeklo německy?“ Zkopírovat větu do Google Translatoru nebo jiného překladače je poměrně zdlouhavé a stane se, že to člověk pak třeba ani neudělá.

Navíc Google Translate mi sice řekne, co dané slovo nebo věta znamená, ale neukáže mi:

  • jaký má slovo rod (der/die/das)
  • jaké je množné číslo
  • příkladovou větu, ve které je slovo použito
  • a hlavně proč je věta postavená tak, jak je


Tak jsem si sepsal, co bych chtěl:

 

  • Označit text v češtině/angličtině → překlad rovnou v dolní části obrazovky, jako titulky, do němčiny (případně jiného zvoleného jazyka)
  • Klik na slovo → rod, člen, množné číslo, příklady
  • Tlačítko „Gramatika“ → krátké vysvětlení v češtině, bez jazykovědného žargonu
  • Aby to celé bylo zdarma

 

Ukázka LanguageBar - rozkliknutí gramatiky

2. Čeho jsem chtěl dosáhnout a kam až jsem se dostal?

PDF Title

Cíl: mít přímo v prohlížeči nástroj, který mi z české nebo anglické věty rovnou ukáže německý překlad, slovníkový rozbor každého slova a krátké vysvětlení gramatiky – a to bez přepínání záložek, kopírování textu a hledání ve slovníku.

Kam jsem se dostal: funkční doplněk, který tohle dělá přesně podle mých představ. Běží v Chrome i Edge, načítá se okamžitě, využívá free Gemini API a funguje napříč libovolnou stránkou na webu.

Co mi to reálně přináší

Úspora času. Předtím jsem u jednoho článku přepínal mezi záložkami i třeba 5× za pár minut čtení.Teď to jde rychleji – označím, podívám se na lištu, čtu dál. Pocitově je rozdíl mezi „rušivým procesem“ a „plynulým čtením“.

Méně frustrace. A to je možná důležitější než čas. Když překlad trvá 30 sekund místo 3, je velká pravděpodobnost, že to vzdám. Tady je překlad rovnou pod kurzorem, takže u textu zůstanu.

Slovní zásoba se buduje pasivně. Tím, že u každého klikaného slova vidím rod, člen a příklad ve větě, postupně si to fixuju, aniž bych to musel cíleně biflovat. Klíčové je, že vidím slovo v živém kontextu, ne v izolovaném seznamu.

Gramatika v kontextu. Místo abych si pročítal abstraktní teorii, vidím jí na konkrétní větě, kterou jsem zrovna četl. Pro mě je to zatím nejúčinnější způsob učení gramatiky, protože okamžitě vím, k čemu je to dobré.

3. Jaké překážky jsem měl a jak jsem je překonal?

Free tier Gemini je limitovaný

Gemini 2.5 Flash Lite má ve free tieru limit 20 requestů za den na klíč. Pokud doplněk volá Gemini při každém překladu, tenhle limit vyčerpáš za pár minut čtení a začneš dostávat hlášku „(429)“.

Řešení 1: Doplněk volá Gemini jen na vyžádání. Překlad věty jde přes Google Translate (zdarma, bez limitu), Gemini se aktivuje jen když klikneš na slovo nebo na tlačítko GRAMATIKA. Při běžném čtení se Gemini nevolá vůbec.

Řešení 2: Můžeš si vytvořit dva API klíče ze dvou různých Google Cloud projektů a vložit je oba do nastavení. Když první narazí na limit, fallback skočí na druhý. Efektivně máš zdvojený free tier.

Gemini odpovídá v žargonu

Pokud Gemini necháš mluvit volně, často vrátí věty typu „Sloveso je v préteritu, doplněk v dativu…“ – což je sice správně, ale studentovi to moc nepomůže.

Řešení: Doplněk má strukturovaný prompt, který Gemini explicitně zakazuje žargon a vyžaduje JSON s předdefinovanými moduly (pozice slovesa, pády a členy, větný rámec, slovní volba).

Lišta se zavírala při kliku mimo

První verze měla zvyk lištu zavřít při kliku kamkoliv mimo. Když jsem chtěl scrollovat článek, lišta zmizela.

Řešení: Lišta zůstává otevřená dokud (a) neklikneš na X, (b) neuteče 20 sekund nečinnosti, nebo (c) neoznačíš nový text. Najetí myší na lištu pauzuje časovač.

Zde je ukázka jednotlivých iterací, kterými jsem si během celého procesu prošel: 

PDF Title

4. Jaké nástroje/frameworky jsem využil a proč?

Doplněk byl vytvořený za pomocí jazykového modelu Claude (verze Pro) v mnoha iteracích (cca 20).

Dle Claude:

  • Žádný build step. Čistý JavaScript, HTML, CSS. Žádný React, žádný Webpack.
  • Manifest V3 (moderní formát Chrome doplňků)
  • Shadow DOM pro UI – styly doplňku se neporvou se styly hostujícího webu
  • Google Translate (neoficiální endpoint) pro překlad věty
  • Gemini 2.5 Flash Lite pro slovníkový rozbor a gramatiku, lazy
  • Web Speech API pro výslovnost – funguje lokálně, bez síťových volání

5. Instalace doplňku

Potřebuješ
  • Chrome nebo Edge prohlížeč
  • Free Gemini API klíč z Google AI Studio – stačí Google účet
  • volitelně druhý API klíč z jiného Google Cloud projektu (Pro navýšení requestů  Gemini)
Postup instalace
  1. Stáhni si zip s doplňkem
  2. Rozbal ho někam, kde ti zůstane (např. Documents/LanguageBar/)
  3. Otevři chrome://extensions/ (nebo edge://extensions/)
  4. Zapni Vývojářský režim vpravo nahoře
  5. Klikni na Načíst rozbalený a vyber rozbalenou složku
  6. Klikni na ikonu doplňku → otevři Možnosti
  7. Vlož svůj Gemini API klíč
  8. Vyber 3 jazyky pro překlad (např. DE, EN, FR) a jazyk vysvětlení (např. CS pro češtinu)
  9. Ulož

A to je vše. Označ kdekoliv text a vyzkoušej.

Pro více informací a stažení, klikni níže:

6. Závěrem

Doplněk je funkční a používám ho denně. Stále ho ale aktivně testuji a možná přijdou další iterace – třeba automatický export slovíček do Google Sheets nebo krátký kvíz na slova z poslední čtené stránky. Uvidíme…

 

Pokud ho zkusíš, dej vědět, co ti funguje a co ne. Předem díky! 😉 

designed with ❤️ Jan Stárek