11 KiB

Raw Permalink Blame History Unescape Escape

Projekt rozšíření prohlížeče, část 1: Vše o prohlížečích

Sketchnote od Wassim Chegham

Kvíz před lekcí

Úvod

Rozšíření prohlížeče přidávají do prohlížeče další funkce. Než však začnete jedno vytvářet, měli byste se nejprve dozvědět něco o tom, jak prohlížeče fungují.

O prohlížeči

V této sérii lekcí se naučíte, jak vytvořit rozšíření prohlížeče, které bude fungovat v prohlížečích Chrome, Firefox a Edge. V této části zjistíte, jak prohlížeče fungují, a vytvoříte základní strukturu rozšíření prohlížeče.

Co je to vlastně prohlížeč? Je to softwarová aplikace, která umožňuje koncovému uživateli přistupovat k obsahu ze serveru a zobrazovat jej na webových stránkách.

✅ Trocha historie: první prohlížeč se jmenoval 'WorldWideWeb' a byl vytvořen Sirem Timothym Berners-Leem v roce 1990.

Některé rané prohlížeče, via Karen McGrane

Když se uživatel připojí k internetu pomocí adresy URL (Uniform Resource Locator), obvykle prostřednictvím Hypertext Transfer Protocol pomocí adresy http nebo https, prohlížeč komunikuje s webovým serverem a načte webovou stránku.

V tomto okamžiku zobrazovací modul prohlížeče stránku vykreslí na zařízení uživatele, což může být mobilní telefon, stolní počítač nebo notebook.

Prohlížeče také dokážou ukládat obsah do mezipaměti, takže jej není nutné pokaždé načítat ze serveru. Mohou zaznamenávat historii prohlížení uživatele, ukládat 'cookies', což jsou malé datové soubory obsahující informace o aktivitě uživatele, a mnoho dalšího.

Je velmi důležité si uvědomit, že prohlížeče nejsou všechny stejné! Každý prohlížeč má své silné a slabé stránky a profesionální webový vývojář musí rozumět tomu, jak zajistit, aby webové stránky fungovaly dobře napříč různými prohlížeči. To zahrnuje přizpůsobení malým obrazovkám, jako jsou mobilní telefony, i uživatelům, kteří jsou offline.

Velmi užitečná webová stránka, kterou byste si měli uložit do záložek v jakémkoli prohlížeči, který preferujete, je caniuse.com. Při vytváření webových stránek je velmi užitečné používat seznamy podporovaných technologií na caniuse, abyste mohli co nejlépe podpořit své uživatele.

✅ Jak zjistíte, které prohlížeče jsou nejpopulárnější mezi uživateli vašeho webu? Zkontrolujte svou analytiku – můžete nainstalovat různé analytické nástroje jako součást svého vývojového procesu a ty vám ukážou, které prohlížeče jsou nejvíce používány.

Rozšíření prohlížeče

Proč byste chtěli vytvořit rozšíření prohlížeče? Je to užitečný nástroj, který si můžete připojit k prohlížeči, když potřebujete rychlý přístup k úkolům, které často opakujete. Například pokud často potřebujete kontrolovat barvy na různých webových stránkách, můžete si nainstalovat rozšíření pro výběr barev. Pokud máte potíže s pamatováním hesel, můžete použít rozšíření pro správu hesel.

Vytváření rozšíření prohlížeče je také zábavné. Obvykle se zaměřují na omezený počet úkolů, které zvládají velmi dobře.

✅ Jaká jsou vaše oblíbená rozšíření prohlížeče? Jaké úkoly plní?

Instalace rozšíření

Než začnete vytvářet, podívejte se na proces vytváření a nasazení rozšíření prohlížeče. I když se jednotlivé prohlížeče v tomto procesu mírně liší, postup je podobný v Chrome a Firefoxu jako v tomto příkladu pro Edge:

Poznámka: Ujistěte se, že jste zapnuli režim vývojáře a povolili rozšíření z jiných obchodů.

V podstatě bude proces následující:

vytvořte své rozšíření pomocí npm run build
v prohlížeči přejděte na panel rozšíření pomocí tlačítka "Nastavení a další" (ikona ...) v pravém horním rohu
pokud jde o novou instalaci, zvolte load unpacked pro nahrání nového rozšíření z jeho složky sestavení (v našem případě je to /dist)
nebo klikněte na reload, pokud znovu načítáte již nainstalované rozšíření

✅ Tyto pokyny se týkají rozšíření, která si sami vytvoříte; pro instalaci rozšíření, která byla vydána v obchodě s rozšířeními prohlížeče, byste měli přejít do těchto obchodů a nainstalovat rozšíření dle vašeho výběru.

Začněte

Vytvoříte rozšíření prohlížeče, které zobrazí uhlíkovou stopu vašeho regionu, včetně spotřeby energie a zdroje této energie. Rozšíření bude obsahovat formulář, který shromáždí API klíč, abyste mohli přistupovat k API CO2 Signal.

Potřebujete:

API klíč; zadejte svůj e-mail do pole na této stránce a klíč vám bude zaslán
kód vašeho regionu odpovídající Electricity Map (například v Bostonu používám 'US-NEISO').
výchozí kód. Stáhněte si složku start; budete doplňovat kód v této složce.
NPM - NPM je nástroj pro správu balíčků; nainstalujte jej lokálně a balíčky uvedené ve vašem souboru package.json budou připraveny k použití ve vašem webovém projektu

✅ Více o správě balíčků se dozvíte v tomto vynikajícím modulu Learn

Věnujte chvíli prozkoumání kódu:

✅ Jakmile budete mít svůj API klíč a kód regionu připravený, uložte si je někam do poznámek pro budoucí použití.

Vytvořte HTML pro rozšíření

Toto rozšíření má dvě zobrazení. Jedno pro zadání API klíče a kódu regionu:

A druhé pro zobrazení uhlíkové stopy regionu:

Začněme vytvořením HTML pro formulář a jeho stylováním pomocí CSS.

Ve složce /dist vytvořte formulář a oblast pro výsledky. V souboru index.html vyplňte vyznačenou oblast formuláře:

<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ář, kde budou vaše uložené informace zadány a uloženy do místního úložiště.

Dále vytvořte oblast pro výsledky; pod poslední značku formuláře přidejte několik divů:

<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 okamžiku můžete zkusit sestavení. Ujistěte se, že jste nainstalovali závislosti balíčků tohoto rozšíření:

npm install

Tento příkaz použije npm, správce balíčků Node, k instalaci webpacku pro proces sestavení vašeho rozšíření. Výstup tohoto procesu můžete vidět v /dist/main.js - uvidíte, že kód byl sloučen.

Prozatím by se mělo rozšíření sestavit a pokud jej nasadíte do Edge jako rozšíření, zobrazí se vám formulář úhledně zobrazený.

Gratulujeme, udělali jste první kroky k vytvoření rozšíření prohlížeče. V dalších lekcích jej uděláte funkčnějším a užitečnějším.

🚀 Výzva

Podívejte se na obchod s rozšířeními prohlížeče a nainstalujte si jedno do svého prohlížeče. Můžete zkoumat jeho soubory zajímavými způsoby. Co objevíte?

Kvíz po lekci

Přehled a samostudium

V této lekci jste se dozvěděli něco o historii webového prohlížeče; využijte této příležitosti k tomu, abyste se dozvěděli více o tom, jak si vynálezci World Wide Webu představovali jeho využití, přečtením dalších informací o jeho historii. Některé užitečné stránky zahrnují:

Historie webových prohlížečů

Historie webu

Rozhovor s Timem Berners-Leem

Zadání

Upravte styl svého rozšíření

Prohlášení:
Tento dokument byl přeložen pomocí služby pro automatický překlad Co-op Translator. I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.

11 KiB Raw Permalink Blame History Unescape Escape