10 KiB

Raw Permalink Blame History Unescape Escape

Nettleserutvidelsesprosjekt Del 1: Alt om nettlesere

Sketchnote av Wassim Chegham

Quiz før forelesning

Introduksjon

Nettleserutvidelser legger til ekstra funksjonalitet i en nettleser. Men før du bygger en, bør du lære litt om hvordan nettlesere fungerer.

Om nettleseren

I denne serien med leksjoner vil du lære hvordan du bygger en nettleserutvidelse som fungerer i Chrome, Firefox og Edge. I denne delen vil du oppdage hvordan nettlesere fungerer og sette opp elementene til nettleserutvidelsen.

Men hva er egentlig en nettleser? Det er et program som lar en sluttbruker få tilgang til innhold fra en server og vise det på nettsider.

✅ Litt historie: Den første nettleseren het 'WorldWideWeb' og ble laget av Sir Timothy Berners-Lee i 1990.

Noen tidlige nettlesere, via Karen McGrane

Når en bruker kobler seg til internett ved hjelp av en URL (Uniform Resource Locator)-adresse, vanligvis via Hypertext Transfer Protocol med en http- eller https-adresse, kommuniserer nettleseren med en webserver og henter en nettside.

På dette tidspunktet viser nettleserens renderingsmotor siden på brukerens enhet, som kan være en mobiltelefon, stasjonær PC eller bærbar datamaskin.

Nettlesere har også evnen til å mellomlagre innhold slik at det ikke trenger å hentes fra serveren hver gang. De kan registrere historikken til en brukers nettleseraktivitet, lagre 'cookies', som er små datastykker som inneholder informasjon brukt til å lagre en brukers aktivitet, og mer.

En veldig viktig ting å huske om nettlesere er at de ikke er like! Hver nettleser har sine styrker og svakheter, og en profesjonell webutvikler må forstå hvordan man får nettsider til å fungere godt på tvers av nettlesere. Dette inkluderer å håndtere små skjermstørrelser som en mobiltelefon, samt en bruker som er offline.

Et veldig nyttig nettsted som du sannsynligvis bør bokmerke i nettleseren du foretrekker å bruke, er caniuse.com. Når du bygger nettsider, er det veldig hjelpsomt å bruke caniuse sine lister over støttede teknologier slik at du best kan støtte brukerne dine.

✅ Hvordan kan du finne ut hvilke nettlesere som er mest populære blant brukerne av nettstedet ditt? Sjekk analysene dine – du kan installere ulike analyseverktøy som en del av webutviklingsprosessen, og de vil fortelle deg hvilke nettlesere som brukes mest av de ulike populære nettleserne.

Nettleserutvidelser

Hvorfor vil du bygge en nettleserutvidelse? Det er en praktisk ting å legge til i nettleseren når du trenger rask tilgang til oppgaver du ofte gjentar. For eksempel, hvis du ofte trenger å sjekke farger på ulike nettsider du besøker, kan du installere en fargevelger-utvidelse. Hvis du har problemer med å huske passord, kan du bruke en passordhåndteringsutvidelse.

Nettleserutvidelser er også morsomme å utvikle. De har en tendens til å håndtere et begrenset antall oppgaver som de utfører godt.

✅ Hva er dine favorittutvidelser for nettlesere? Hvilke oppgaver utfører de?

Installere utvidelser

Før du begynner å bygge, ta en titt på prosessen med å bygge og distribuere en nettleserutvidelse. Selv om hver nettleser varierer litt i hvordan de håndterer denne oppgaven, er prosessen lik i Chrome og Firefox som i dette eksempelet på Edge:

Merk: Sørg for å slå på utviklermodus og tillate utvidelser fra andre butikker.

I hovedsak vil prosessen være:

bygg utvidelsen din ved å bruke npm run build
naviger i nettleseren til utvidelsespanelet ved å bruke "Innstillinger og mer"-knappen (ikonet ...) øverst til høyre
hvis det er en ny installasjon, velg load unpacked for å laste opp en ny utvidelse fra bygge-mappen (i vårt tilfelle er det /dist)
eller, klikk reload hvis du laster inn en allerede installert utvidelse på nytt

✅ Disse instruksjonene gjelder for utvidelser du bygger selv; for å installere utvidelser som er utgitt i nettleserens utvidelsesbutikk, bør du navigere til disse butikkene og installere utvidelsen du ønsker.

Kom i gang

Du skal bygge en nettleserutvidelse som viser karbonavtrykket i din region, inkludert energiforbruket og kilden til energien. Utvidelsen vil ha et skjema som samler inn en API-nøkkel slik at du kan få tilgang til CO2 Signal sitt API.

Du trenger:

en API-nøkkel; skriv inn e-posten din i boksen på denne siden, så får du en nøkkel tilsendt
koden for din region som tilsvarer Electricity Map (i Boston, for eksempel, bruker jeg 'US-NEISO').
startkoden. Last ned start-mappen; du vil fullføre koden i denne mappen.
NPM - NPM er et verktøy for pakkebehandling; installer det lokalt, og pakkene som er oppført i package.json-filen din vil bli installert for bruk i webprosjektet ditt

✅ Lær mer om pakkebehandling i denne utmerkede læringsmodulen

Ta et øyeblikk til å se gjennom kodebasen:

✅ Når du har API-nøkkelen og regionkoden klar, lagre dem et sted i en notat for fremtidig bruk.

Bygg HTML for utvidelsen

Denne utvidelsen har to visninger. En for å samle inn API-nøkkelen og regionkoden:

Og den andre for å vise regionens karbonforbruk:

La oss starte med å bygge HTML for skjemaet og style det med CSS.

I /dist-mappen bygger du et skjema og et resultatområde. I index.html-filen fyller du ut det avgrensede skjemaområdet:

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

Dette er skjemaet der den lagrede informasjonen din vil bli lagt inn og lagret i lokal lagring.

Deretter oppretter du resultatområdet; under den siste skjema-tagen legger du til noen div-er:

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

På dette tidspunktet kan du prøve en bygging. Sørg for å installere pakkene som er nødvendige for denne utvidelsen:

npm install

Denne kommandoen bruker npm, Node Package Manager, til å installere webpack for byggeprosessen til utvidelsen din. Du kan se resultatet av denne prosessen ved å se i /dist/main.js - du ser at koden har blitt samlet.

For nå bør utvidelsen bygges, og hvis du distribuerer den i Edge som en utvidelse, vil du se et skjema pent vist.

Gratulerer, du har tatt de første stegene mot å bygge en nettleserutvidelse. I de neste leksjonene vil du gjøre den mer funksjonell og nyttig.

🚀 Utfordring

Ta en titt på en nettleserutvidelsesbutikk og installer en utvidelse i nettleseren din. Du kan undersøke filene dens på interessante måter. Hva oppdager du?

Quiz etter forelesning

Gjennomgang og selvstudium

I denne leksjonen lærte du litt om historien til nettleseren; benytt anledningen til å lære om hvordan oppfinnerne av World Wide Web så for seg bruken av den ved å lese mer om dens historie. Noen nyttige nettsteder inkluderer:

The History of Web Browsers

History of the Web

Et intervju med Tim Berners-Lee

Oppgave

Restyle utvidelsen din

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi tilstreber nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

10 KiB Raw Permalink Blame History Unescape Escape