10 KiB

Raw Permalink Blame History

Projekt proširenja preglednika, 1. dio: Sve o preglednicima

Sketchnote autora Wassim Chegham

Kviz prije predavanja

Uvod

Proširenja preglednika dodaju dodatnu funkcionalnost pregledniku. No, prije nego što izradite jedno, trebali biste naučiti malo o tome kako preglednici rade.

O preglednicima

U ovom nizu lekcija naučit ćete kako izraditi proširenje preglednika koje će raditi na preglednicima Chrome, Firefox i Edge. U ovom dijelu otkrit ćete kako preglednici funkcioniraju i postaviti osnovne elemente proširenja preglednika.

Ali što je zapravo preglednik? To je softverska aplikacija koja omogućuje krajnjem korisniku pristup sadržaju sa servera i prikazivanje tog sadržaja na web stranicama.

✅ Malo povijesti: prvi preglednik zvao se 'WorldWideWeb', a stvorio ga je Sir Timothy Berners-Lee 1990. godine.

Neki rani preglednici, putem Karen McGrane

Kada se korisnik poveže na internet koristeći URL (Uniform Resource Locator) adresu, obično putem Hypertext Transfer Protocol-a s http ili https adresom, preglednik komunicira s web poslužiteljem i dohvaća web stranicu.

U tom trenutku, mehanizam za renderiranje preglednika prikazuje stranicu na korisnikovom uređaju, koji može biti mobilni telefon, stolno računalo ili prijenosno računalo.

Preglednici također imaju mogućnost predmemoriranja sadržaja kako ga ne bi morali dohvaćati sa servera svaki put. Oni mogu bilježiti povijest korisnikovih aktivnosti pregledavanja, pohranjivati 'kolačiće', male dijelove podataka koji sadrže informacije o korisnikovim aktivnostima, i još mnogo toga.

Važno je zapamtiti da svi preglednici nisu isti! Svaki preglednik ima svoje prednosti i nedostatke, a profesionalni web programer mora razumjeti kako učiniti da web stranice dobro funkcioniraju na različitim preglednicima. To uključuje prilagodbu za male zaslone, poput onih na mobilnim telefonima, kao i za korisnike koji su offline.

Vrlo korisna web stranica koju biste trebali označiti u svom omiljenom pregledniku je caniuse.com. Kada izrađujete web stranice, vrlo je korisno koristiti popise podržanih tehnologija na caniuse kako biste najbolje podržali svoje korisnike.

✅ Kako možete saznati koji su preglednici najpopularniji među korisnicima vaše web stranice? Provjerite svoju analitiku - možete instalirati razne pakete za analitiku kao dio procesa razvoja web stranice, a oni će vam reći koji se preglednici najviše koriste.

Proširenja preglednika

Zašto biste željeli izraditi proširenje preglednika? To je praktičan dodatak pregledniku kada trebate brz pristup zadacima koje često ponavljate. Na primjer, ako često trebate provjeravati boje na raznim web stranicama, mogli biste instalirati proširenje za odabir boja. Ako imate problema s pamćenjem lozinki, mogli biste koristiti proširenje za upravljanje lozinkama.

Izrada proširenja preglednika također je zabavna. Obično upravljaju ograničenim brojem zadataka koje obavljaju vrlo dobro.

✅ Koja su vaša omiljena proširenja preglednika? Koje zadatke obavljaju?

Instalacija proširenja

Prije nego što počnete izrađivati, pogledajte proces izrade i implementacije proširenja preglednika. Iako se svaki preglednik malo razlikuje u načinu upravljanja ovim zadatkom, proces je sličan na Chromeu i Firefoxu kao u ovom primjeru na Edgeu:

Napomena: Obavezno uključite način za razvojne programere i dopustite proširenja iz drugih trgovina.

U osnovi, proces će biti sljedeći:

izradite svoje proširenje koristeći npm run build
u pregledniku otvorite stranicu za proširenja koristeći gumb "Postavke i više" (ikona ...) u gornjem desnom kutu
ako je riječ o novoj instalaciji, odaberite load unpacked kako biste učitali novo proširenje iz njegove mape za izgradnju (u našem slučaju to je /dist)
ili kliknite reload ako ponovno učitavate već instalirano proširenje

✅ Ove upute odnose se na proširenja koja sami izrađujete; za instalaciju proširenja koja su objavljena u trgovini proširenja preglednika, trebali biste otići na te trgovine i instalirati proširenje po svom izboru.

Početak

Izradit ćete proširenje preglednika koje prikazuje ugljični otisak vaše regije, pokazujući potrošnju energije i izvor energije u vašoj regiji. Proširenje će imati obrazac koji prikuplja API ključ kako biste mogli pristupiti API-ju CO2 Signal.

Potrebno vam je:

API ključ; unesite svoju e-poštu u okvir na ovoj stranici i ključ će vam biti poslan
kod za vašu regiju koji odgovara Electricity Map (u Bostonu, na primjer, koristim 'US-NEISO').
početni kod. Preuzmite mapu start; dovršit ćete kod u ovoj mapi.
NPM - NPM je alat za upravljanje paketima; instalirajte ga lokalno i paketi navedeni u vašoj datoteci package.json bit će instalirani za korištenje u vašem web projektu

✅ Saznajte više o upravljanju paketima u ovom izvrsnom modulu za učenje

Odvojite trenutak da pregledate kodnu bazu:

✅ Kada imate svoj API ključ i kod regije, spremite ih negdje u bilješku za buduću upotrebu.

Izrada HTML-a za proširenje

Ovo proširenje ima dva prikaza. Jedan za prikupljanje API ključa i koda regije:

I drugi za prikaz potrošnje ugljika u regiji:

Počnimo s izradom HTML-a za obrazac i njegovim stiliziranjem pomoću CSS-a.

U mapi /dist izradit ćete obrazac i područje za rezultate. U datoteci index.html, popunite označeno područje za obrazac:

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

Ovo je obrazac gdje će se unijeti i spremiti vaše spremljene informacije u lokalnu pohranu.

Zatim izradite područje za rezultate; ispod završne oznake obrasca dodajte nekoliko divova:

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

U ovom trenutku možete pokušati izgraditi proširenje. Obavezno instalirajte ovisnosti paketa ovog proširenja:

npm install

Ova naredba koristit će npm, alat za upravljanje paketima Node, za instalaciju webpacka za proces izgradnje vašeg proširenja. Izlaz ovog procesa možete vidjeti u /dist/main.js - vidjet ćete da je kod spakiran.

Za sada bi se proširenje trebalo izgraditi i, ako ga implementirate u Edge kao proširenje, vidjet ćete uredno prikazan obrazac.

Čestitamo, napravili ste prve korake prema izradi proširenja preglednika. U sljedećim lekcijama učinit ćete ga funkcionalnijim i korisnijim.

🚀 Izazov

Pogledajte trgovinu proširenja preglednika i instalirajte jedno u svoj preglednik. Možete istražiti njegove datoteke na zanimljive načine. Što otkrivate?

Kviz nakon predavanja

Pregled i samostalno učenje

U ovoj lekciji naučili ste malo o povijesti web preglednika; iskoristite ovu priliku da saznate više o tome kako su izumitelji World Wide Weba zamislili njegovu upotrebu čitajući više o njegovoj povijesti. Neki korisni izvori uključuju:

Povijest web preglednika

Povijest weba

Intervju s Timom Berners-Leejem

Zadatak

Preoblikujte svoje proširenje

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.

10 KiB Raw Permalink Blame History