Webové rozšíření pro Chrome - není třeba předchozí zkušenosti s kódováním: 6 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:19

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í!