Vlastní rozšíření pro Google Chrome

Vlastní rozšíření pro Google Chrome

Napsal Martin Roček28. března 2021

Napadla vás někdy nějaká funkce, která by se hodila jako rozšíření do vašeho prohlížeče, ale nevěděli jste kde začít? Přesně pro vás je tento návod. Ukážeme si jak vytvořit rozšíření, které uživateli umožní generovat libovolně velké obrázky z externí API. V závěru článku potom naleznete několik užitečných zdrojů, kam se vydat, pokud byste se chtěli věnovat tvorbě rozšíření více.

Základem je manifest

Nejdůležitějším souborem rozšíření je manifest.json jedná se o vstupní bod, z kterého prohlížeč pozná jméno rozšíření, verzi a také jaké soubory načíst a jaké funkce či práva rozšíření využívá. Úplně základní manifest.json by měl vypadat zhruba následovně:

1{
2  "name": "Generátor obrázků",
3  "version": "1.0.0",
4  "manifest_version": 2,
5  "description": "Vygeneruj libovolně velký obrázek.",
6
7  "icons": {
8    "16": "icons/icon-16.png",
9    "32": "icons/icon-32.png",
10    "48": "icons/icon-48.png",
11    "128": "icons/icon-128.png"
12  }
13}

Zastavím se pouze u dvou vlastností, a to manifest_version. Tato hodnota určuje nejen verzi, ale také dostupné funkce a očekávané vlastnosti souboru. V tuto chvíli je vhodné používat spíše verzi 2, přestože Google již oficiálně podporuje také verzi 3. Jednak obvykle při řešení složitějších problémů narazíte na řešení pro manifest verze 2 a jednak některé databáze rozšíření verzi 3 ještě stále nepodporují - například Microsoft.

Druhou hodnotou je pole icons, základní sada velikostí by měla být 16, 32, 48 a 128 pixelů. Nicméně, chrome.browserAction využívá i 24px. Lze se také setkat s hodnotami 19 a 38, ty by měly být v tuto chvíli již neaktuální a nepoužívají se viz Stack Overflow.

Zobrazení okna rozšíření

Tímto bychom měli sice nadefinované rozšíření, ale pokud bychom jej načetli do prohlížeče, nic by se nestalo. Za tímto účelem je potřeba přidat ještě další hodnotu do souboru manifest.json:

1...
2  "browser_action": {
3    "default_popup": "popup.html" .
4  }
5...

Hodnota browser_action definuje akce, které mají být dostupné v hlavním menu prohlížeče, tedy skrze ikonku rozšíření. Lze zde nadefinovat hodnoty pro ikonu, nápovědu, badge a popup. V tomto návodu si vystačíme pouze s popupem. Pokud by vás však zajímaly další možnosti, podívejte se například na web Chrome Developers.

Soubor popup.html by se měl nacházet ve stejné složce jako manifest.json, pro zjednodušení nebudu nijak strukturovat adresáře, nicméně je dobrým zvykem rozdělit jednotlivé části rozšíření do vlastních složek.

Obsah souboru popup.html je standardní HTML stránka, která může obsahovat odkaz na CSS styly nebo vlastní skripty.

1<!DOCTYPE html>
2<html lang="cs">
3  <head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>My first extension</title>
8    <link rel="stylesheet" href="style.css">
9  </head>
10  <body>
11    <h1>Generátor obrázků</h1>
12    <p>Generuj libovolně velký obrázek</p>
13    <input type="text" id="imageSize" placeholder="Rozměry, např. 360x200">
14    <img id="imagePreview" src="http://img.silencesys.com/360x200?text=360x200&color=4ddd9a&text-color=145b3a" alt="360x200">
15    <input id="imageLink" type="text">
16  </body>
17  <script src="popup.js"></script>
18</html>

V tomto případě tedy načítáme dva další externí soubory - style.css a popup.js. První by měl obsahovat design našeho rozšíření a v tomto návodu jej nebudu již dále zmiňovat. Druhý soubor potom obsahuje všechny důležité funkce. Krom souborů zobrazíme v našem rozšíření také nadpis, tedy název, text, dva inputy a obrázek.

Načtení rozšíření v prohlížeči

Než se pustíme do přidávání funkcí našemu rozšíření, vyzkoušíme jestli se načte v prohlížeči. Uvádím postupy pro dva nejčastější prohlížeče, nicméně pokud používat prohlížeč s chromiovým jádrem, postup bude stejný.

Google Chrome

  1. Do adresy prohlížeče zadáme chrome://extensions/ tímto se otevře nastavení rozšíření
  2. V pravém horním rohu nejprve přepneme do vývojářského módu (Developer mode)
  3. Zobrazí se panel s několika možnostmi: Načíst rozbalené (Load unpacked), Zabalit rozšíření (Pack extension) a Aktualizovat (Update). Zvolíme možnost Načíst rozbalené (Load unpacked).
  4. V otevřeném okně najdeme složku s rozšířením, kde se nachází soubor manifest.json a klikneme na otevřít.
  5. Rozšíření by se mělo zobrazit v seznamu rozšíření.

Microsoft Edge

  1. Do adresy prohlížeče zadáme edge://extensions/ tímto se otevře nastavení rozšíření
  2. V levém panelu, úplně dole, se nachází přepínání vývojářského módu (Developer mode), zapneme jej
  3. V pravém panelu s rozšířeními se vpravo zobrazí několik možností Načíst rozbalené (Load unpacked), Zabalit rozšíření (Pack extension) a Aktualizovat (Update). Zvolíme možnost Načíst rozbalené (Load unpacked).
  4. V otevřeném okně najdeme složku s rozšířením, kde se nachází soubor manifest.json a klikneme na otevřít
  5. Rozšíření by se mělo zobrazit v seznamu rozšíření.

Pokud se rozšíření zobrazilo v seznamu rozšíření, mělo by se také zobrazit v hlavním panelu prohlížeče. Kliknutím na ikonku rozšíření, by se měl zobrazit popup, který jsme nadefinovali v předchozím kroku. Tím by bylo rozšíření úspěšně načteno v prohlížeči.

Interakce

Pokud se vše povedlo, přišel čas rozšíření trochu oživit. Otevřeme tedy soubor popup.js a přidáme do něj několik funkcí.

Vlastní rozměry obrázku

První input v zobrazení by měl sloužit pro zadávání rozměrů obrázku, náhled by se měl potom ideálně aktualizovat po stisknutí klávesy enter. Způsobů, jak toho docílit, je spousta, já v tomto návodu zvolil event onkeypress. Nicméně, rozšíření neumožňují přidávat funkce k eventům v HTML stránce, a tak atribut onkeypress použít nemůžeme. Namísto toho je potřeba event zaregistrovat v JavaScript souboru, a to následujícím způsobem:

1const imageSizeInput = document.getElementById('imageSize')
2imageSizeInput.addEventListener('keypress', updateImageSize)

Pomocí getElementById získáme DOM element z HTML stránky a následně skrze funkci addEventListener přidáme eventu keypress funkci, jež má být volána vždy po stisknutí nějaké klávesy. Abychom předešli tomu, že se bude náhled aktualizovat s každým stisknutím klávesy, můžeme použít například následující podmínku if (event.key === 'Enter') tím zajistíme, že se funkce spustí jen pokud uživatel stiskne klávesu enter.

1function updateImageSize (event) {
2  if (event.key === 'Enter') {
3    resizeImage(event.target.value)
4  }
5}

Předtím než se pustíme do definování funkce resizeImage je ještě potřeba najít v dokumentu dva další elementy, a to obrázek a input, který bude obsahovat odkaz na obrázek. Na začátek souboru tedy přidáme následující dva řádky:

1const imagePreview = document.getElementById('imagePreview')
2const imageLinkInput = document.getElementById('imageLink')

Teď už nám nic nebrání v nadefinování funkce resizeImage, která upraví zdroj obrázku a nahradí hodnotu inputu s odkazem na obrázek.

1function resizeImage (size) {
2  imagePreview.src = `http://img.silencesys.com/${size}?text=${size}&color=4ddd9a&text-color=145b3a`
3  imagePreview.alt = size
4  imageLinkInput.value = imagePreview.src
5}

Interakce by tedy byla hotova, aby se ovšem změny projevily i v rozšíření v prohlížeči, je potřeba rozšíření aktualizovat. Za tímto účelem otevřeme stránku s rozšířeními - chrome://extensions/ resp. edge://extensions/ a u našeho rozšíření klikneme na tlačítko Načíst znovu (Reload). Rozšíření by tak mělo načíst změny a po kliknutí na ikonku v panelu prohlížeče, úpravě velikosti v prvním inputu a stisknutím klávesy enter by mělo dojít k aktualizaci obrázku za nový.

Vzhled rozšíření

Jak jsem psal na začátku, cílem tohoto návodu není design rozšíření, ale spíše ilustrace základního procesu a navedení, jak začít. Z toho důvodu nebudu popisovat, jak by mohlo rozšíření vypadat, ale naopak upozorním na pár věcí. Popup okno rozšíření by nemělo být menší než 25x25 a větší než 800x600 pixelů. Obecně lze použít jakákoliv CSS, která jsou prohlížeči podporována.

Další zdroje

Gratuluji k úspěšnému vytvoření vašeho rozšíření pro Google Chrome a Microsoft Edge. Pokud vás celý proces zaujal a chtěli byste se dozvědět více, doporučuji navštívit následující stránky Chrome Developer a Microsoft Edge documentation.