10 KiB

Raw Permalink Blame History

Projekt razširitve brskalnika, 1. del: Vse o brskalnikih

Skica avtorja Wassim Chegham

Predhodni kviz

Uvod

Razširitve brskalnika dodajajo dodatno funkcionalnost brskalniku. Preden začnete graditi svojo razširitev, se je dobro naučiti nekaj o tem, kako brskalniki delujejo.

O brskalniku

V tej seriji lekcij se boste naučili, kako zgraditi razširitev brskalnika, ki bo delovala v brskalnikih Chrome, Firefox in Edge. V tem delu boste odkrili, kako brskalniki delujejo, in pripravili osnovne elemente razširitve brskalnika.

Kaj pa sploh je brskalnik? To je programska aplikacija, ki omogoča končnemu uporabniku dostop do vsebine s strežnika in njeno prikazovanje na spletnih straneh.

✅ Malo zgodovine: prvi brskalnik se je imenoval 'WorldWideWeb' in ga je leta 1990 ustvaril Sir Timothy Berners-Lee.

Nekateri zgodnji brskalniki, prek Karen McGrane

Ko se uporabnik poveže z internetom z uporabo URL (Uniform Resource Locator) naslova, običajno prek protokola Hypertext Transfer Protocol z naslovom http ali https, brskalnik komunicira s spletnim strežnikom in pridobi spletno stran.

Na tej točki brskalnikov mehanizem za upodabljanje prikaže stran na uporabnikovi napravi, ki je lahko mobilni telefon, namizni računalnik ali prenosnik.

Brskalniki imajo tudi sposobnost shranjevanja vsebine v predpomnilnik, da je ni treba vsakič znova pridobiti s strežnika. Lahko beležijo zgodovino uporabnikovega brskanja, shranjujejo 'piškotke', ki so majhni delci podatkov, ki vsebujejo informacije o uporabnikovi aktivnosti, in še več.

Pomembno je vedeti, da vsi brskalniki niso enaki! Vsak brskalnik ima svoje prednosti in slabosti, profesionalni spletni razvijalec pa mora razumeti, kako narediti spletne strani, ki dobro delujejo v različnih brskalnikih. To vključuje obravnavo majhnih zaslonov, kot je mobilni telefon, pa tudi uporabnika, ki je brez povezave.

Zelo uporabna spletna stran, ki jo je dobro shraniti med zaznamke v brskalniku, ki ga uporabljate, je caniuse.com. Ko gradite spletne strani, je zelo koristno uporabiti sezname podprtih tehnologij na caniuse, da najbolje podprete svoje uporabnike.

✅ Kako lahko ugotovite, kateri brskalniki so najbolj priljubljeni med uporabniki vaše spletne strani? Preverite svojo analitiko - lahko namestite različne analitične pakete kot del svojega procesa spletnega razvoja, ki vam bodo povedali, kateri brskalniki so najbolj uporabljeni.

Razširitve brskalnika

Zakaj bi želeli zgraditi razširitev brskalnika? To je priročno orodje, ki ga lahko dodate brskalniku, ko potrebujete hiter dostop do nalog, ki jih pogosto ponavljate. Na primer, če pogosto preverjate barve na različnih spletnih straneh, ki jih uporabljate, lahko namestite razširitev za izbiro barv. Če imate težave z zapomnitvijo gesel, lahko uporabite razširitev za upravljanje gesel.

Razširitve brskalnika so tudi zabavne za razvoj. Običajno obvladujejo omejeno število nalog, ki jih opravljajo zelo dobro.

✅ Katere so vaše najljubše razširitve brskalnika? Katere naloge opravljajo?

Namestitev razširitev

Preden začnete graditi, si oglejte postopek gradnje in uvajanja razširitve brskalnika. Čeprav se vsak brskalnik nekoliko razlikuje v tem, kako upravlja ta postopek, je postopek na Chrome in Firefox podoben temu primeru na Edge:

Opomba: Prepričajte se, da ste vklopili način za razvijalce in omogočili razširitve iz drugih trgovin.

V bistvu bo postopek takšen:

zgradite svojo razširitev z uporabo npm run build
v brskalniku se pomaknite na razdelek razširitev z uporabo gumba "Nastavitve in več" (ikona ...) v zgornjem desnem kotu
če gre za novo namestitev, izberite load unpacked, da naložite novo razširitev iz njene mape za gradnjo (v našem primeru je to /dist)
ali pa kliknite reload, če ponovno nalagate že nameščeno razširitev

✅ Ta navodila se nanašajo na razširitve, ki jih sami zgradite; za namestitev razširitev, ki so bile objavljene v trgovini razširitev brskalnika, se pomaknite na te trgovine in namestite razširitev po svoji izbiri.

Začnite

Zgradili boste razširitev brskalnika, ki prikazuje ogljični odtis vaše regije, prikazuje porabo energije vaše regije in vir energije. Razširitev bo imela obrazec, ki zbira ključ API, da lahko dostopate do API-ja CO2 Signal.

Potrebujete:

ključ API; vnesite svoj e-poštni naslov v polje na tej strani in poslali vam ga bodo
kodo za vašo regijo, ki ustreza Electricity Map (v Bostonu, na primer, uporabljam 'US-NEISO').
začetno kodo. Prenesite mapo start; v tej mapi boste dokončali kodo.
NPM - NPM je orodje za upravljanje paketov; namestite ga lokalno in paketi, navedeni v vaši datoteki package.json, bodo nameščeni za uporabo pri vašem spletnem projektu

✅ Več o upravljanju paketov se naučite v tem odličnem modulu Learn

Vzemite si trenutek in si oglejte osnovno kodo:

✅ Ko imate ključ API in kodo regije pripravljeno, ju shranite nekam v beležko za prihodnjo uporabo.

Zgradite HTML za razširitev

Ta razširitev ima dva pogleda. Prvi za zbiranje ključa API in kode regije:

In drugi za prikaz ogljične porabe regije:

Začnimo z gradnjo HTML-ja za obrazec in oblikovanjem s CSS.

V mapi /dist boste zgradili obrazec in območje za rezultate. V datoteki index.html zapolnite označeno območje obrazca:

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

To je obrazec, kjer bodo shranjene informacije vnesene in shranjene v lokalno shrambo.

Nato ustvarite območje za rezultate; pod zadnjo oznako obrazca dodajte nekaj 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>

Na tej točki lahko poskusite zgraditi. Prepričajte se, da ste namestili odvisnosti paketa te razširitve:

npm install

Ta ukaz bo uporabil npm, upravitelja paketov Node, za namestitev webpacka za proces gradnje vaše razširitve. Izid tega procesa si lahko ogledate v /dist/main.js - videli boste, da je koda združena.

Za zdaj bi se morala razširitev zgraditi, in če jo uvedete v Edge kot razširitev, boste videli lepo prikazan obrazec.

Čestitamo, naredili ste prve korake k gradnji razširitve brskalnika. V naslednjih lekcijah jo boste naredili bolj funkcionalno in uporabno.

🚀 Izziv

Oglejte si trgovino z razširitvami brskalnika in namestite eno v svoj brskalnik. Datoteke lahko preučite na zanimive načine. Kaj odkrijete?

Kviz po predavanju

Pregled in samostojno učenje

V tej lekciji ste se naučili nekaj o zgodovini spletnega brskalnika; izkoristite to priložnost, da se naučite, kako so si izumitelji svetovnega spleta zamislili njegovo uporabo, tako da preberete več o njegovi zgodovini. Nekaj uporabnih strani vključuje:

Zgodovina spletnih brskalnikov

Zgodovina spleta

Intervju s Timom Berners-Leejem

Naloga

Preoblikujte svojo razširitev

Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni prevod s strani človeka. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.

10 KiB Raw Permalink Blame History