Vytvořte si vlastní Chrome rozšíření za 30 minut s pomocí AI

Každý den trávíte hodiny v prohlížeči. Kopírujete texty, přepínáte záložky, vyplňujete formuláře, ručně formátujete obsah. Co kdybyste si za odpoledne vytvořili vlastní Chrome rozšíření, které tuto rutinu automatizuje? S pomocí AI to zvládnete i bez zkušeností s programováním.

Chrome rozšíření jsou malé programy běžící přímo v prohlížeči. V roce 2026 je jejich tvorba s AI asistencí dostupná komukoli — nepotřebujete znát JavaScript, stačí vědět, co chcete vytvořit.

Proč si vytvořit vlastní rozšíření místo hledání hotového

Chrome Web Store nabízí tisíce rozšíření. Proč tedy vyrábět vlastní?

Přizpůsobení: Hotová rozšíření dělají, co jejich autoři zamýšleli — ne přesně to, co potřebujete vy. Vlastní rozšíření je šité přesně na váš workflow.

Soukromí: Mnoho populárních rozšíření sbírá data o vašem chování. Vlastní kód vidíte a kontrolujete vy.

Firemní specifika: Potřebujete rozšíření, které pracuje s vaším interním systémem, CRM nebo specifickým formátem dat? Žádné hotové řešení toto nezvládne.

Rychlost: Namísto hledání správného nástroje, čtení recenzí a testování ho rovnou vytvoříte — za méně času, než trvá instalace a konfigurace existujícího řešení.

Anatomie Chrome rozšíření

Než začneme tvořit, hodí se pochopit strukturu. Každé Chrome rozšíření se skládá z několika souborů:

manifest.json — průkazka rozšíření

Povinný konfigurační soubor, který Chrome potřebuje pro každé rozšíření. Definuje název, verzi, oprávnění a hlavně to, jaké soubory rozšíření obsahuje.

{
  "manifest_version": 3,
  "name": "Můj nástroj",
  "version": "1.0",
  "description": "Popis rozšíření",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

Content scripts — kód na stránkách

Soubory JavaScript, které se spouštějí na webových stránkách. Mohou číst a měnit obsah libovolné stránky — přidávat tlačítka, upravovat text, extrahovat data.

Popup — vyskakovací okno

HTML soubor, který se zobrazí po kliknutí na ikonku rozšíření. Typické UI pro nastavení nebo ovládání rozšíření.

Service worker — běh na pozadí

Skript běžící na pozadí, i když nemáte otevřenou žádnou konkrétní stránku. Používá se pro komunikaci s API, ukládání dat a komplexnější logiku.

Adresářová struktura

moje-rozsireni/
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── background.js (service worker)
└── icon.png

Krok za krokem: Vytvoření rozšíření s AI

Ukážeme si postup na konkrétním příkladu: vytvoříme rozšíření pro rychlé kopírování čistého textu z webových stránek — bez HTML tagů, bez formátování, jen čistý text.

Krok 1: Popis zadání pro AI

Otevřete Claude nebo ChatGPT a napište prompt:

Vytvoř mi Chrome rozšíření (Manifest V3), které dělá toto:
- Přidá tlačítko do pravého dolního rohu na každé stránce
- Po kliknutí zkopíruje celý text stránky do schránky (bez HTML tagů)
- Zobrazí notifikaci "Text zkopírován!" po úspěšném zkopírování
- Tlačítko bude mít modrý kruhový design s ikonou kopírování

Potřebuji: manifest.json, content.js, a pokud potřeba, 
background.js. Vysvětli, co každý soubor dělá.

AI vygeneruje všechny potřebné soubory s komentáři.

Krok 2: Vytvoření souborů

Vytvořte složku text-kopirovat na ploše. Do ní uložte všechny soubory, které AI vygenerovala. Typický výstup pro naše rozšíření bude vypadat takto:

manifest.json:

{
  "manifest_version": 3,
  "name": "Kopírovat text stránky",
  "version": "1.0",
  "description": "Zkopíruje čistý text z jakékoli stránky",
  "permissions": ["activeTab", "clipboardWrite"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

content.js:

// Vytvoříme tlačítko
const button = document.createElement('button');
button.textContent = '📋';
button.style.cssText = `
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
`;

// Přidáme funkci kopírování
button.addEventListener('click', () => {
  const text = document.body.innerText;
  navigator.clipboard.writeText(text).then(() => {
    button.textContent = '✅';
    setTimeout(() => button.textContent = '📋', 2000);
  });
});

document.body.appendChild(button);

Krok 3: Načtení do Chrome

1. Otevřete Chrome a přejděte na chrome://extensions/
2. V pravém horním rohu zapněte Režim vývojáře (Developer mode)
3. Klikněte na Načíst rozbalené rozšíření (Load unpacked)
4. Vyberte vaši složku text-kopirovat
5. Rozšíření se okamžitě aktivuje

Přejděte na libovolnou webovou stránku — v pravém dolním rohu uvidíte modré tlačítko. Kliknutím zkopírujete celý text stránky.

Krok 4: Iterativní vylepšování

První verze málokdy splní vše, co chceme. Tady AI vynikne nejvíce — rychlé iterace:

Rozšíření funguje, ale tlačítko se zobrazuje i na stránkách 
s přihlášením a ruší formuláře. Přidej: 
1. Možnost zakázat rozšíření pro konkrétní doménu (pravý klik na ikonku)
2. Keyboard shortcut Alt+C jako alternativa k tlačítku

Vložte aktualizovaný kód do souborů, přejděte zpět na chrome://extensions/ a klikněte na tlačítko Reload (kruhová šipka) u vašeho rozšíření. Změny se okamžitě projeví.

Praktické příklady pro české firemní uživatele

Příklad 1: Formátování emailů

Pracujete v obchodním týmu a každý den kopírujete adresy z různých systémů? Vytvořte rozšíření, které:

• Přidá tlačítko na stránkách LinkedIn Sales Navigator
• Po kliknutí extrahuje jméno, pozici a email kontaktu
• Zkopíruje je ve formátu pro váš CRM systém

Prompt pro AI:

Vytvoř Chrome rozšíření, které na stránce linkedin.com/in/* 
přidá tlačítko "Export do CRM". Po kliknutí extrahuje 
jméno profilu a pracovní pozici, a zkopíruje je 
ve formátu: "Jméno | Pozice | [URL profilu]"

Příklad 2: Cenový agregátor pro nákupčí

Pokud pravidelně porovnáváte ceny na Heuréce, Alze a Mallovi:

Vytvoř Chrome rozšíření, které na produktových stránkách 
Alza.cz a Mall.cz přidá tlačítko "Zkontrolovat ceny". 
Po kliknutí otevře novou záložku s Heuréka.cz 
prohledanou na název produktu (extrahovaný z nadpisu stránky).

Příklad 3: Automatický překlad odborných termínů

Pro finance nebo právní oddělení pracující s anglickými dokumenty:

Vytvoř Chrome rozšíření, které:
- Při výběru textu na jakékoli stránce zobrazí malý tooltip
- Tooltip obsahuje tlačítko "Přeložit + vysvětlit"
- Po kliknutí zavolá OpenAI API s vybraným textem a požadavkem 
  na překlad do češtiny s vysvětlením kontextu
- Výsledek zobrazí ve vyskakovacím okně

(Toto rozšíření bude vyžadovat vlastní OpenAI API klíč v nastavení.)

Příklad 4: Automatické vyplňování formulářů

Pro HR oddělení nebo obchodní zástupce, kteří opakovaně vyplňují stejné informace:

Vytvoř Chrome rozšíření se storage pro uložení firemních 
šablon dat (název firmy, IČO, adresa, kontaktní osoba). 
Na jakékoli stránce přidej klávesovou zkratku Ctrl+Shift+F, 
která otevře panel pro výběr šablony a vyplní aktivní 
input field vybraným údajem.

Pokročilé techniky: Přidávání funkcí iterativně

Nejlepší způsob práce s AI při tvorbě rozšíření je iterativní přístup. Začněte minimálním funkčním rozšířením a přidávejte funkce postupně.

Přidání nastavení (options page)

K mému existujícímu rozšíření přidej stránku nastavení (options.html), 
kde si uživatel může:
- Zapnout/vypnout rozšíření globálně
- Přidat seznam domén, kde rozšíření nebude aktivní
- Změnit barvu tlačítka
Nastavení musí přetrvat po restartu prohlížeče 
(používej chrome.storage.sync).

Komunikace s API

Aktualizuj content.js tak, aby po stisku tlačítka poslal 
extrahovaný text na POST https://api.muj-server.cz/analyze 
s Authorization headerem "Bearer {API_KEY}", 
kde API_KEY je načten z chrome.storage.local. 
Výsledek API zobrazí v overlay na stránce.

Debugging a oprava chyb

Pokud rozšíření nefunguje správně:

1. Otevřete chrome://extensions/
2. Klikněte na Inspect views: service worker nebo Inspect views: background page
3. Nebo stiskněte F12 na stránce, kde rozšíření běží
4. Zkopírujte chybovou hlášku z konzole
5. Vložte ji do AI s dotazem na opravu

Moje Chrome rozšíření hází tuto chybu v konzoli:
[vložte chybovou hlášku]

Zde je aktuální kód content.js:
[vložte kód]

Co je špatně a jak to opravit?

Publikování na Chrome Web Store vs. soukromé použití

Soukromé použití (doporučeno pro firemní nástroje)

Pro interní firemní nástroje není potřeba publikovat na Chrome Web Store. Distribuujte rozšíření jako ZIP soubor nebo přes Google Workspace admin konzoli pro celou organizaci.

Výhody soukromého nasazení:

• Žádný review proces (okamžité nasazení)
• Žádné poplatky ($5 jednorázový poplatek pro developer účet)
• Soukromý kód není přístupný veřejnosti
• Snadné aktualizace přes IT oddělení

Publikování na Chrome Web Store

Pokud chcete sdílet rozšíření s ostatními nebo ho monetizovat:

1. Zaregistrujte se jako developer na chrome.google.com/webstore/devconsole (jednorázový poplatek $5)
2. Připravte ikonky (128x128, 48x48, 16x16 px)
3. Vytvořte screenshoty a popis
4. Nahrajte ZIP soubor se všemi soubory rozšíření
5. Odešlete k review (typicky 2-7 dní pro nové rozšíření)

Nejčastější chyby a jak se jim vyhnout

Při tvorbě prvního rozšíření narazíte na několik typických problémů. Zde jsou nejčastější a jejich řešení:

Chyba: Content Security Policy (CSP)

Mnoho moderních webů blokuje vkládání externího kódu. Projevuje se chybou:

Refused to execute inline script because it violates the following Content Security Policy directive

Řešení: Nepoužívejte inline event handlery (onclick="..."). Místo toho přidávejte event listenery programaticky v JS souboru.

Chyba: Manifest V3 vs V2

Od roku 2023 Chrome vyžaduje Manifest V3. Starší tutoriály a AI modely mohou generovat V2 kód, který Chrome odmítne. Ujistěte se, že prompt pro AI explicitně zmiňuje Manifest V3.

Chyba: Oprávnění nejsou deklarována

Pokud rozšíření potřebuje přístup k záložkám, clipboardu nebo storage, musí být tato oprávnění deklarována v manifest.json v sekci permissions. Zapomenutá oprávnění způsobí runtime chybu.

Přetrvávající stav mezi stránkami

Pro ukládání dat mezi relacemi vždy používejte chrome.storage.local nebo chrome.storage.sync — ne localStorage, který je vázaný na konkrétní stránku a Chrome extensions ho mají přístupný jen v omezeném kontextu.

Tipy pro produktivní spolupráci s AI

Kvalita vygenerovaného kódu závisí hodně na kvalitě promptu. Několik osvědčených postupů:

Buďte konkrétní v technických požadavcích: Místo „přidej tlačítko" napište „přidej tlačítko do pravého dolního rohu stránky, které bude viditelné jen na stránkách linkedin.com, s modrým pozadím (#2563eb) a bílou ikonou."

Zmiňte, co nechcete: „Nechci, aby se rozšíření spouštělo na stránkách google.com a youtube.com."

Řekněte, co má být perzistentní: „Uživatelova konfigurace musí přetrvat po restartu Chrome — použij chrome.storage.sync."

Iterujte po malých krocích: Po každém funkčním milestone rozšíření otestujte. Neopravujte vše najednou — izolujte problém a požádejte AI o opravu konkrétního chování.

Závěr

Tvorba vlastního Chrome rozšíření s pomocí AI je v roce 2026 dostupná opravdu každému. Nepotřebujete předchozí zkušenosti s JavaScriptem — stačí jasně popsat, co chcete vytvořit, a mít trpělivost s iterativním laděním.

Postup je vždy stejný: definujte konkrétní problém, který chcete řešit, nechte AI vygenerovat kód, načtěte rozšíření v developer mode a iterativně vylepšujte. Celý cyklus od nápadu k funkčnímu nástroji trvá typicky 15–30 minut.

Nejlepší první rozšíření je to, které řeší jeden konkrétní opakující se úkol ve vašem každodenním workflow. Vyberte si jeden takový úkol, popište ho AI a vytvořte svůj první nástroj ještě dnes.