19 KiB

Raw Blame History

Nettleserutvidelsesprosjekt Del 1: Alt om nettlesere

Sketchnote av Wassim Chegham

Quiz før forelesning

Introduksjon

Nettleserutvidelser er små applikasjoner som forbedrer din opplevelse av å surfe på nettet. Akkurat som Tim Berners-Lees opprinnelige visjon om et interaktivt nett, utvider utvidelser nettleserens funksjonalitet utover enkel dokumentvisning. Fra passordhåndteringsverktøy som holder kontoene dine sikre til fargevelgere som hjelper designere med å finne perfekte nyanser, løser utvidelser daglige utfordringer ved nettlesing.

Før vi bygger din første utvidelse, la oss forstå hvordan nettlesere fungerer. Akkurat som Alexander Graham Bell måtte forstå lydoverføring før han oppfant telefonen, vil kunnskap om nettleserens grunnleggende funksjoner hjelpe deg med å lage utvidelser som integreres sømløst med eksisterende nettlesersystemer.

Ved slutten av denne leksjonen vil du forstå nettleserarkitektur og ha startet byggingen av din første utvidelse.

Forstå nettlesere

En nettleser er i hovedsak en sofistikert dokumenttolker. Når du skriver "google.com" inn i adressefeltet, utfører nettleseren en kompleks serie operasjoner - den ber om innhold fra servere over hele verden, og deretter tolker og gjengir den koden til de interaktive nettsidene du ser.

Denne prosessen speiler hvordan den første nettleseren, WorldWideWeb, ble designet av Tim Berners-Lee i 1990 for å gjøre hyperlenkede dokumenter tilgjengelige for alle.

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

Noen tidlige nettlesere, via Karen McGrane

Hvordan nettlesere behandler nettinnhold

Prosessen mellom å skrive inn en URL og se en nettside involverer flere koordinerte trinn som skjer i løpet av sekunder:

sequenceDiagram
    participant User
    participant Browser
    participant DNS
    participant Server
    
    User->>Browser: Types URL and presses Enter
    Browser->>DNS: Looks up server IP address
    DNS->>Browser: Returns IP address
    Browser->>Server: Requests web page content
    Server->>Browser: Sends HTML, CSS, and JavaScript
    Browser->>User: Renders complete web page

Dette oppnår prosessen:

Oversetter den menneskeleselige URL-en til en server-IP-adresse gjennom DNS-oppslag
Etablerer en sikker forbindelse med webserveren ved hjelp av HTTP- eller HTTPS-protokoller
Ber om spesifikt nettinnhold fra serveren
Mottar HTML-markup, CSS-styling og JavaScript-kode fra serveren
Gjengir alt innhold til den interaktive nettsiden du ser

Nettleserens kjernefunksjoner

Moderne nettlesere tilbyr en rekke funksjoner som utviklere av utvidelser kan dra nytte av:

Funksjon	Formål	Muligheter for utvidelser
Gjengivelsesmotor	Viser HTML, CSS og JavaScript	Innholdsmodifikasjon, stylinginjeksjon
JavaScript-motor	Utfører JavaScript-kode	Egendefinerte skript, API-interaksjoner
Lokal lagring	Lagrer data lokalt	Brukerpreferanser, hurtiglagret data
Nettverksstabel	Håndterer webforespørsler	Forespørselsmonitorering, dataanalyse
Sikkerhetsmodell	Beskytter brukere mot skadelig innhold	Innholdsfiltrering, sikkerhetsforbedringer

Å forstå disse funksjonene hjelper deg med:

Identifisere hvor din utvidelse kan tilføre mest verdi
Velge de riktige nettleser-API-ene for utvidelsens funksjonalitet
Designe utvidelser som fungerer effektivt med nettlesersystemer
Sikre at utvidelsen din følger beste praksis for nettlesersikkerhet

Tverrnettleserutvikling

Ulike nettlesere implementerer standarder med små variasjoner, på samme måte som ulike programmeringsspråk kan håndtere den samme algoritmen forskjellig. Chrome, Firefox og Safari har hver sine unike egenskaper som utviklere må ta hensyn til under utvikling av utvidelser.

💡 Tips: Bruk caniuse.com for å sjekke hvilke webteknologier som støttes på tvers av ulike nettlesere. Dette er uvurderlig når du planlegger funksjonene til utvidelsen din!

Viktige hensyn for utvikling av utvidelser:

Test utvidelsen din på tvers av Chrome, Firefox og Edge-nettlesere
Tilpass deg ulike nettleserutvidelses-API-er og manifestformater
Håndter varierende ytelsesegenskaper og begrensninger
Tilby alternativer for nettleserspesifikke funksjoner som kanskje ikke er tilgjengelige

✅ Innsikt fra analyse: Du kan finne ut hvilke nettlesere brukerne dine foretrekker ved å installere analysepakker i dine webutviklingsprosjekter. Disse dataene hjelper deg med å prioritere hvilke nettlesere du skal støtte først.

Forstå nettleserutvidelser

Nettleserutvidelser løser vanlige utfordringer ved nettlesing ved å legge til funksjonalitet direkte i nettleserens grensesnitt. I stedet for å kreve separate applikasjoner eller komplekse arbeidsflyter, gir utvidelser umiddelbar tilgang til verktøy og funksjoner.

Dette konseptet speiler hvordan tidlige datapionerer som Douglas Engelbart forestilte seg å utvide menneskelige evner med teknologi - utvidelser utvider nettleserens grunnleggende funksjonalitet.

Populære utvidelseskategorier og deres fordeler:

Produktivitetsverktøy: Oppgavehåndteringsverktøy, notatapper og tidssporere som hjelper deg med å holde deg organisert
Sikkerhetsforbedringer: Passordhåndteringsverktøy, annonseblokkerere og personvernsverktøy som beskytter dataene dine
Utviklerverktøy: Kodeformaterere, fargevelgere og feilsøkingsverktøy som effektiviserer utviklingen
Innholdsforbedring: Lesemodus, videonedlastere og skjermbildeverktøy som forbedrer din nettopplevelse

✅ Refleksjonsspørsmål: Hva er dine favorittnettleserutvidelser? Hvilke spesifikke oppgaver utfører de, og hvordan forbedrer de din opplevelse av å surfe på nettet?

Installere og administrere utvidelser

Å forstå prosessen med å installere utvidelser hjelper deg med å forutse brukeropplevelsen når folk installerer din utvidelse. Installasjonsprosessen er standardisert på tvers av moderne nettlesere, med små variasjoner i grensesnittdesign.

Viktig: Sørg for å slå på utviklermodus og tillate utvidelser fra andre butikker når du tester dine egne utvidelser.

Utviklingsutvidelsesinstallasjon

Når du utvikler og tester dine egne utvidelser, følg denne arbeidsflyten:

# Step 1: Build your extension
npm run build

Hva denne kommandoen oppnår:

Kompilerer kildekoden din til filer som er klare for nettleseren
Pakker JavaScript-moduler i optimaliserte pakker
Genererer de endelige utvidelsesfilene i /dist-mappen
Forbereder utvidelsen din for installasjon og testing

Steg 2: Naviger til nettleserutvidelser

Åpne nettleserens administrasjonsside for utvidelser
Klikk på "Innstillinger og mer"-knappen (ikonet ...) øverst til høyre
Velg "Utvidelser" fra rullegardinmenyen

Steg 3: Last inn din utvidelse

For nye installasjoner: Velg load unpacked og velg din /dist-mappe
For oppdateringer: Klikk reload ved siden av din allerede installerte utvidelse
For testing: Aktiver "Utviklermodus" for å få tilgang til flere feilsøkingsfunksjoner

Produksjonsutvidelsesinstallasjon

✅ Merk: Disse utviklingsinstruksjonene er spesifikt for utvidelser du bygger selv. For å installere publiserte utvidelser, besøk de offisielle nettleserutvidelsesbutikkene som Microsoft Edge Add-ons store.

Forstå forskjellen:

Utviklingsinstallasjoner lar deg teste upubliserte utvidelser under utvikling
Butikkinstallasjoner gir verifiserte, publiserte utvidelser med automatiske oppdateringer
Sideloading tillater installasjon av utvidelser fra utenfor offisielle butikker (krever utviklermodus)

Bygge din karbonfotavtrykk-utvidelse

Vi skal lage en nettleserutvidelse som viser karbonfotavtrykket til energiforbruket i din region. Dette prosjektet demonstrerer essensielle konsepter for utvikling av utvidelser samtidig som det skaper et praktisk verktøy for miljøbevissthet.

Denne tilnærmingen følger prinsippet om "learning by doing" som har vist seg effektivt siden John Deweys pedagogiske teorier - en kombinasjon av tekniske ferdigheter med meningsfulle virkelige applikasjoner.

Prosjektkrav

Før du begynner utviklingen, la oss samle de nødvendige ressursene og avhengighetene:

Nødvendig API-tilgang:

CO2 Signal API-nøkkel: Skriv inn e-postadressen din for å motta din gratis API-nøkkel
Regionkode: Finn din regionkode ved hjelp av Electricity Map (for eksempel bruker Boston 'US-NEISO')

Utviklingsverktøy:

Node.js og NPM: Pakkehåndteringsverktøy for å installere prosjektavhengigheter
Startkode: Last ned start-mappen for å begynne utviklingen

✅ Lær mer: Forbedre dine ferdigheter innen pakkehåndtering med dette omfattende Learn-modulet

Forstå prosjektstrukturen

Å forstå prosjektstrukturen hjelper deg med å organisere utviklingsarbeidet effektivt. Akkurat som Biblioteket i Alexandria ble organisert for enkel kunnskapshenting, gjør en godt strukturert kodebase utviklingen mer effektiv:

project-root/
├── dist/                    # Built extension files
│   ├── manifest.json        # Extension configuration
│   ├── index.html           # User interface markup
│   ├── background.js        # Background script functionality
│   └── main.js              # Compiled JavaScript bundle
└── src/                     # Source development files
    └── index.js             # Your main JavaScript code

Hva hver fil gjør:

manifest.json: Definerer metadata, tillatelser og inngangspunkter for utvidelsen
index.html: Oppretter brukergrensesnittet som vises når brukere klikker på utvidelsen
background.js: Håndterer bakgrunnsoppgaver og nettleserhendelser
main.js: Inneholder den endelige bundlingen av JavaScript etter byggeprosessen
src/index.js: Huser din hovedutviklingskode som blir kompilert til main.js

💡 Organiseringstips: Lagre API-nøkkelen og regionkoden din i et sikkert notat for enkel referanse under utviklingen. Du trenger disse verdiene for å teste utvidelsens funksjonalitet.

✅ Sikkerhetsmerknad: Aldri legg inn API-nøkler eller sensitive opplysninger i kodebasen din. Vi viser deg hvordan du håndterer dette sikkert i de neste stegene.

Lage utvidelsens grensesnitt

Nå skal vi bygge brukergrensesnittkomponentene. Utvidelsen bruker en to-skjerms tilnærming: en konfigurasjonsskjerm for første oppsett og en resultatskjerm for datavisning.

Dette følger prinsippet om progressiv avsløring som brukes i grensesnittdesign siden datamaskinens tidlige dager - å avsløre informasjon og alternativer i en logisk rekkefølge for å unngå å overvelde brukere.

Oversikt over utvidelsesvisninger

Oppsettsvisning - Førstegangsbruker konfigurasjon:

Resultatvisning - Visning av karbonfotavtrykkdata:

Lage konfigurasjonsskjemaet

Oppsettskjemaet samler inn brukerens konfigurasjonsdata ved første bruk. Når det er konfigurert, lagres denne informasjonen i nettleserens lagring for fremtidige økter.

I /dist/index.html-filen, legg til denne skjema-strukturen:

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

Hva dette skjemaet gjør:

Oppretter en semantisk skjema-struktur med riktige etiketter og input-assosiasjoner
Aktiverer nettleserens autofullføringsfunksjonalitet for forbedret brukeropplevelse
Krever at begge feltene fylles ut før innsending ved hjelp av attributtet required
Organiserer input med beskrivende klassenavn for enkel styling og JavaScript-målretting
Gir klare instruksjoner til brukere som setter opp utvidelsen for første gang

Lage resultatvisningen

Deretter lager vi resultatområdet som skal vise karbonfotavtrykkdata. Legg til denne HTML-en under skjemaet:

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

Hva denne strukturen gir:

loading: Viser en lastemelding mens API-data hentes
errors: Viser feilmeldinger hvis API-kall mislykkes eller data er ugyldige
data: Holder rådata for feilsøking under utvikling
result-container: Presenterer formatert karbonfotavtrykkinformasjon til brukere
clear-btn: Lar brukere endre sin region og rekonfigurere utvidelsen

Sette opp byggeprosessen

La oss nå installere prosjektavhengighetene og teste byggeprosessen:

npm install

Hva denne installasjonsprosessen oppnår:

Laster ned Webpack og andre utviklingsavhengigheter spesifisert i package.json
Konfigurerer byggeverktøyet for å kompilere moderne JavaScript
Forbereder utviklingsmiljøet for bygging og testing av utvidelsen
Aktiverer kodebundling, optimalisering og tverrnettleserkompatibilitetsfunksjoner

💡 Innsikt om byggeprosessen: Webpack samler kildekoden din fra /src/index.js til /dist/main.js. Denne prosessen optimaliserer koden din for produksjon og sikrer nettleserkompatibilitet.

Teste fremgangen din

På dette tidspunktet kan du teste utvidelsen din:

Kjør byggekommandoen for å kompilere koden din
Last utvidelsen inn i nettleseren din ved hjelp av utviklermodus
Bekreft at skjemaet vises korrekt og ser profesjonelt ut
Sjekk at alle skjemaelementer er riktig justert og funksjonelle

Hva du har oppnådd:

Bygget den grunnleggende HTML-strukturen for utvidelsen din
Opprettet både konfigurasjons- og resultatgrensesnitt med riktig semantisk markup
Satt opp en moderne utviklingsarbeidsflyt med bransjestandardverktøy
Forberedt grunnlaget for å legge til interaktiv JavaScript-funksjonalitet

Du har fullført den første fasen av utviklingen av nettleserutvidelsen. Akkurat som brødrene Wright først måtte forstå aerodynamikk før de oppnådde flyvning, forbereder forståelsen av disse grunnleggende konseptene deg på å bygge mer komplekse interaktive funksjoner i neste leksjon.

GitHub Copilot Agent Challenge 🚀

Bruk Agent-modus for å fullføre følgende utfordring: Beskrivelse: Forbedre nettleserutvidelsen ved å legge til validering av skjema og funksjoner for tilbakemelding til brukeren, for å forbedre brukeropplevelsen når API-nøkler og regionkoder legges inn.

Oppgave: Lag JavaScript-valideringsfunksjoner som sjekker om API-nøkkelfeltet inneholder minst 20 tegn, og om regionkoden følger riktig format (som 'US-NEISO'). Legg til visuell tilbakemelding ved å endre farge på inputfeltets kantlinjer til grønn for gyldige inndata og rød for ugyldige. Legg også til en funksjon for å vise/skjule API-nøkkelen av sikkerhetshensyn.

Lær mer om agentmodus her.

🚀 Utfordring

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

Quiz etter forelesning

Gjennomgang og selvstudium

I denne leksjonen lærte du litt om historien til nettleseren; bruk denne anledningen til å lære mer om hvordan oppfinnerne av World Wide Web forestilte seg bruken av det, ved å lese mer om historien. Noen nyttige nettsteder inkluderer:

Historien til nettlesere

Historien til nettet

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 streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

19 KiB Raw Blame History