Obsah:
2025 Autor: John Day | [email protected]. Naposledy změněno: 2025-01-13 06:57
Rozšíření pro Chrome jsou malé programy vytvořené tak, aby zlepšovaly uživatelské procházení. Další informace o rozšířeních Chrome naleznete na adrese
K vytvoření webového rozšíření pro Chrome je nutné kódování, takže je velmi užitečné zkontrolovat HTML, JavaScript a CSS na níže uvedeném webu:
www.w3schools.com/default.asp (školy w3 jsou dobrým webem pro kódování zdrojů)
Nevíte, jak kódovat? Nebojte se, tento návod vám pomůže s orientací.
Nejlepší na Chrome Extensions je, že je lze přizpůsobit. Nelze dělat jen jednu konkrétní věc, buďte tedy kreativní.
Zásoby
Potřebné zásoby jsou uvedeny níže:
- Počítač s textovým editorem (používám Poznámkový blok)
- Google Chrome
A to je vše!
Krok 1: Vytvořte adresář
Nejprve vytvořte složku pro uložení všech souborů a pojmenujte ji „přípona“. Jméno lze v případě potřeby později změnit.
Krok 2: Vytvořte manifestní soubor a zakódujte jej
Soubor manifestu je velmi důležitou součástí rozšíření. Říká rozšíření přesně, co dělat a být. Soubory manifestu jsou formátovány v JSON. Prvním krokem je otevření textového editoru a uložení nového souboru jako 'manifest.json'.
Dále zadejte níže uvedený skript:
{
"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}
Za hodnotami si pamatujte čárky!
Až to napíšete, uložte soubor manifestu a přejděte na chrome: // extensions (jako prohlížeč by měl být použit Chrome). Až budete v chrome: // extensions, zapněte vývojářský režim. Poté stiskněte tlačítko „Načíst rozbaleno“a vyberte složku „přípona“.
buben, prosím…
Jé! To je rozšíření, kromě … svého druhu nudného. V tuto chvíli to nedělá doslova nic, ale brzy to bude super.
Krok 3: Vytvořte ikony a aktualizujte manifest
Jeden web, který funguje dobře pro kreslení ikon, je https://www.piskelapp.com/. K dispozici jsou také další kreslící programy. Ikony by měly být čtvercové. Tento projekt bude používat ikony 16x16, 32x32, 48x48 a 128x128. Jakmile je ikona vytvořena, vytvořte složku s názvem „obrázky“ve složce rozšíření a vložte ikonu do této složky. Možná by bylo dobré pojmenovat obrázek podle jeho velikosti. Například 'icon32.png'. Nový kód je níže:
{
"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp
Odkaz na kód manifestu najdete na
Krok 4: Přidejte vyskakovací okno
Toto rozšíření bude mít vyskakovací okno. Popup je soubor HTML (Hypertext Markup Language), takže je dobré se nejprve naučit základy HTML, CSS a JavaScript.
Nejprve uložte dokument jako soubor „popup.html“do složky rozšíření.
Dále upravte soubor manifestu tak, aby po kliknutí zobrazoval 'popup.html'. Nový kód je níže:
{
"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp
Nezapomeňte na čárku!
Nyní, pokud je do popup.html přidán následující kód HTML, zobrazí se po kliknutí „Hello World“.
Ahoj světe
Krok 5: Aby to vypadalo dobře a bylo to interaktivní
Pokud je napsán základní řádek HTML, je hotovo úplné minimum. Pokud je přidán CSS (Cascading Style Sheets), bude vypadat chladněji a pokud je přidán JavaScript, pak může být interaktivnější. Tento tutoriál nebude podrobně vysvětlovat HTML, JavaScript a CSS, ale existuje spousta zdrojů online. Níže je uveden kód jednoduchého programu „Hello World“, poté barevnějšího programu:
Ahoj světe
Ahoj světe
#hello {barva pozadí: #000000; barva: #ff0000; ohraničení: 8px začátek #86a3b2; poloměr ohraničení: 50px; transform: rotate (57deg); čalounění: 10px; uživatelský výběr: žádný; kurzor: nitkový kříž; přechod: transformace 2 s; } #hello: hover {transform: rotate (-417deg); }
Tento druhý příklad by mohl být pro začátečníka velmi matoucí. Ale to vám mělo ukázat, jak důležité jsou CSS pro program/rozšíření. Nyní by bylo vhodné si dát pauzu a naučit se nějaké kódování HTML5 a jako referenci použít developer.chrome.com. Může to chvíli trvat, ale lze udělat velké rozšíření.
Krok 6: Publikování v Internetovém obchodě Chrome
Pokud někdo vytvořil opravdu skvělé rozšíření a chce jej sdílet se světem, může jej publikovat. To je koneckonců smysl prodloužení. Tento tutoriál se pokusil vysvětlit pouze soubor manifestu a způsob jeho použití a měl pouze program „Hello World“.
První věc, kterou musíte udělat, aby byla přípona veřejná, je vytvořit složku rozšíření do souboru zip. Druhá věc, kterou musíte udělat, je přejít na https://chrome.google.com/webstore/category/extensions a přihlásit se k účtu Google. Poté klikněte na tlačítko ozubeného kola nastavení a poté klikněte na „hlavní panel pro vývojáře“. Stisknutím tlačítka 'Nová položka' nahrajte soubor zip. Jakmile jste tam, je nutné upravit záznam v obchodu, soukromí a ceny. Rozšíření lze snadno publikovat, pokud je odesláno ke kontrole.
Nyní, když je rozšíření dokončeno, pokračujte v kódování!