11 KiB

Raw Permalink Blame History Unescape Escape

Projekt rozšírenia prehliadača, časť 1: Všetko o prehliadačoch

Sketchnote od Wassima Cheghama

Kvíz pred prednáškou

Úvod

Rozšírenia prehliadača pridávajú do prehliadača ďalšie funkcie. Predtým, než si jedno vytvoríte, by ste sa mali trochu oboznámiť s tým, ako prehliadače fungujú.

O prehliadači

V tejto sérii lekcií sa naučíte, ako vytvoriť rozšírenie prehliadača, ktoré bude fungovať v prehliadačoch Chrome, Firefox a Edge. V tejto časti objavíte, ako prehliadače fungujú, a pripravíte základné prvky rozšírenia prehliadača.

Ale čo je to vlastne prehliadač? Je to softvérová aplikácia, ktorá umožňuje koncovému používateľovi pristupovať k obsahu zo servera a zobrazovať ho na webových stránkach.

✅ Trochu histórie: prvý prehliadač sa volal 'WorldWideWeb' a vytvoril ho Sir Timothy Berners-Lee v roku 1990.

Niektoré rané prehliadače, zdroj: Karen McGrane

Keď sa používateľ pripojí na internet pomocou adresy URL (Uniform Resource Locator), zvyčajne cez Hypertext Transfer Protocol pomocou adresy http alebo https, prehliadač komunikuje s webovým serverom a načíta webovú stránku.

V tomto momente zobrazí renderovací engine prehliadača stránku na zariadení používateľa, ktorým môže byť mobilný telefón, stolný počítač alebo notebook.

Prehliadače majú tiež schopnosť ukladať obsah do vyrovnávacej pamäte, aby sa nemusel zakaždým načítavať zo servera. Môžu zaznamenávať históriu prehliadania používateľa, ukladať 'cookies', čo sú malé kúsky dát obsahujúce informácie o aktivite používateľa, a mnoho ďalšieho.

Je veľmi dôležité si uvedomiť, že prehliadače nie sú všetky rovnaké! Každý prehliadač má svoje silné a slabé stránky a profesionálny webový vývojár musí rozumieť tomu, ako zabezpečiť, aby webové stránky fungovali dobre naprieč rôznymi prehliadačmi. To zahŕňa prispôsobenie sa malým obrazovkám, ako sú mobilné telefóny, ako aj používateľom, ktorí sú offline.

Veľmi užitočná webová stránka, ktorú by ste si mali uložiť do záložiek v akomkoľvek prehliadači, ktorý preferujete, je caniuse.com. Pri tvorbe webových stránok je veľmi užitočné používať zoznamy podporovaných technológií na caniuse, aby ste čo najlepšie podporili svojich používateľov.

✅ Ako zistíte, ktoré prehliadače sú najpopulárnejšie medzi používateľmi vašej webovej stránky? Skontrolujte svoje analytické údaje – môžete nainštalovať rôzne analytické balíky ako súčasť procesu vývoja webu a tie vám ukážu, ktoré prehliadače sú najviac používané.

Rozšírenia prehliadača

Prečo by ste chceli vytvoriť rozšírenie prehliadača? Je to užitočný nástroj, ktorý si môžete pripojiť k prehliadaču, keď potrebujete rýchly prístup k úlohám, ktoré často opakujete. Napríklad, ak často potrebujete kontrolovať farby na rôznych webových stránkach, ktoré navštevujete, môžete si nainštalovať rozšírenie prehliadača na výber farieb. Ak máte problém zapamätať si heslá, môžete použiť rozšírenie na správu hesiel.

Rozšírenia prehliadača sú tiež zábavné na vývoj. Zvyčajne spravujú obmedzený počet úloh, ktoré vykonávajú dobre.

✅ Aké sú vaše obľúbené rozšírenia prehliadača? Aké úlohy vykonávajú?

Inštalácia rozšírení

Predtým, než začnete s vývojom, pozrite sa na proces vytvárania a nasadzovania rozšírenia prehliadača. Hoci sa jednotlivé prehliadače v tomto procese trochu líšia, postup je podobný v Chrome a Firefoxe ako v tomto príklade pre Edge:

Poznámka: Uistite sa, že ste zapli režim vývojára a povolili rozšírenia z iných obchodov.

V podstate bude proces nasledovný:

vytvorte svoje rozšírenie pomocou npm run build
v prehliadači prejdite na panel rozšírení pomocou tlačidla "Nastavenia a ďalšie" (ikona ...) v pravom hornom rohu
ak ide o novú inštaláciu, vyberte load unpacked, aby ste nahrali nové rozšírenie z jeho zložky build (v našom prípade je to /dist)
alebo kliknite na reload, ak znovu načítavate už nainštalované rozšírenie

✅ Tieto pokyny sa týkajú rozšírení, ktoré si sami vytvoríte; na inštaláciu rozšírení, ktoré boli vydané v obchode s rozšíreniami prehliadača, by ste mali prejsť do týchto obchodov a nainštalovať si rozšírenie podľa vášho výberu.

Začnite

Vytvoríte rozšírenie prehliadača, ktoré zobrazí uhlíkovú stopu vášho regiónu, ukazujúc spotrebu energie vášho regiónu a zdroj tejto energie. Rozšírenie bude obsahovať formulár, ktorý zhromaždí API kľúč, aby ste mohli pristupovať k API CO2 Signal.

Potrebujete:

API kľúč; zadajte svoj e-mail do poľa na tejto stránke a kľúč vám bude zaslaný
kód pre váš región zodpovedajúci Electricity Map (napríklad v Bostone používam 'US-NEISO').
štartovací kód. Stiahnite si zložku start; budete dopĺňať kód v tejto zložke.
NPM - NPM je nástroj na správu balíkov; nainštalujte si ho lokálne a balíky uvedené vo vašom súbore package.json budú pripravené na použitie vo vašom webovom projekte

✅ Viac o správe balíkov sa dozviete v tomto vynikajúcom module Learn

Venujte chvíľu prehliadnutiu kódu:

✅ Keď budete mať svoj API kľúč a kód regiónu pripravený, uložte si ich niekam do poznámky na neskoršie použitie.

Vytvorte HTML pre rozšírenie

Toto rozšírenie má dva pohľady. Jeden na zhromaždenie API kľúča a kódu regiónu:

A druhý na zobrazenie uhlíkovej spotreby regiónu:

Začnime vytvorením HTML pre formulár a jeho naštýlovaním pomocou CSS.

V zložke /dist vytvorte formulár a oblasť pre výsledky. V súbore index.html vyplňte vyznačenú oblasť formulára:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

Toto je formulár, kde budú vaše uložené informácie zadané a uložené do lokálneho úložiska.

Ďalej vytvorte oblasť pre výsledky; pod posledným tagom formulára pridajte niekoľko divov:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

V tomto bode môžete skúsiť zostaviť projekt. Uistite sa, že ste nainštalovali závislosti balíkov tohto rozšírenia:

npm install

Tento príkaz použije npm, správcu balíkov Node, na inštaláciu webpacku pre proces zostavenia vášho rozšírenia. Výstup tohto procesu môžete vidieť v súbore /dist/main.js - uvidíte, že kód bol zbalený.

Zatiaľ by sa malo rozšírenie zostaviť a po jeho nasadení do Edge ako rozšírenia by ste mali vidieť pekne zobrazený formulár.

Gratulujeme, urobili ste prvé kroky k vytvoreniu rozšírenia prehliadača. V ďalších lekciách ho urobíte funkčnejším a užitočnejším.

🚀 Výzva

Pozrite sa na obchod s rozšíreniami prehliadača a nainštalujte si jedno do svojho prehliadača. Môžete preskúmať jeho súbory zaujímavými spôsobmi. Čo objavíte?

Kvíz po prednáške

Prehľad a samoštúdium

V tejto lekcii ste sa dozvedeli niečo o histórii webového prehliadača; využite túto príležitosť na to, aby ste sa dozvedeli viac o tom, ako si tvorcovia World Wide Web predstavovali jeho využitie, prečítaním si viac o jeho histórii. Niektoré užitočné stránky zahŕňajú:

História webových prehliadačov

História webu

Rozhovor s Timom Berners-Leem

Zadanie

Zmeňte štýl svojho rozšírenia

Upozornenie:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

11 KiB Raw Permalink Blame History Unescape Escape