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

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. A zatímco v roce 2023 jste AI popisovali jednotlivé soubory a kód ručně kopírovali, dnešní agentic nástroje (Claude Code, Cursor, asistenti přímo v prohlížeči) dokážou celou složku rozšíření vytvořit, načíst do Chromu a dokonce si samy vyzkoušet, jestli funguje. Pokud si před vlastní stavbou chcete osahat hotového browser agenta na reálném webu, hodí se i Claude for Chrome s rychlou instalací, cenou Pro a ukázkami workflow pro research a formuláře.

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 — což je v roce 2026, kdy prohlížeče jako Chrome aktivně omezují sledování, čím dál důležitější.

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. Od roku 2025 Chrome akceptuje výhradně Manifest V3 — sekce manifest_version musí být 3.

{
  "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 a side panel — uživatelské rozhraní

HTML soubor, který se zobrazí po kliknutí na ikonku rozšíření. Moderní alternativou k popupu je Side Panel API (od Chrome 114), který otevře postranní panel s trvalým rozhraním — ideální pro nástroje, které potřebují více místa (CRM karty, AI asistenti, poznámky).

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. Na rozdíl od starého background page z MV2 se service worker uspává, když je neaktivní — musíte s tím počítat při navrhování logiky.

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, ChatGPT nebo Cursor 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. Aktuální modely (Claude Sonnet 5, Opus 4.8, GPT-5) zvládnou kompletní strukturu i s ošetřením okrajových případů na první pokus.

Krok 2: Vytvoření souborů

Vytvořte složku text-kopirovat na ploše. Do ní uložte všechny soubory, které AI vygenerovala. Pokud používáte agentic nástroj jako Claude Code, vytvoří složku a všechny soubory za vás — vy jen potvrdíte.

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í. Agentic nástroje jako Claude Code tento reload a testování zvládají automaticky — popíšete, co se má stát, a nástroj sám upraví kód i ověří výsledek.

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 Web Store Developer Dashboard (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 několik 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. Manifest V3 má navíc přísnější CSP — žádný remote kód, vše musí být zabalené přímo v rozšíření.

Chyba: Manifest V2 už nefunguje

Chrome postupně vyřazoval MV2 od června 2024 a od roku 2025 jsou rozšíření Manifest V2 ze stabilního Chromu zcela odstraněna. Starší tutoriály a zastaralé AI odpovědi mohou generovat V2 kód (manifest_version: 2, background.scripts), který Chrome odmítne načíst. Vždy trvejte na Manifest V3 (manifest_version: 3, service worker místo background page).

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. V MV3 navíc platí princip minimálních oprávnění — žádoucí je používat volitelná oprávnění (optional_permissions) a žádat o ně až v době, kdy je rozšíření skutečně potřebuje.

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 Manifest V3 explicitně: Aktuální modely už MV3 znají, ale pro jistotu ho vždy uveďte — vyhněte se tak zastaralému V2 kódu.

Řekně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í.

Využijte agentic nástroje pro celý cyklus: Claude Code nebo Cursor dokážou nejen napsat kód, ale i rozšíření načíst, nasimulovat kliknutí, přečíst chybu z konzole a opravit ji — bez ručního kopírování mezi okny.

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. Jedinou pevnou hranicí je Manifest V3, který je dnes jedinou podporovanou verzí.

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 — a s agentic nástroji i výrazně méně.

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.