19 KiB

Raw Blame History

Webbläsartillägg Projekt Del 1: Allt om Webbläsare

Sketchnote av Wassim Chegham

Förhandsquiz

Introduktion

Webbläsartillägg är små applikationer som förbättrar din webbläsarupplevelse. Precis som Tim Berners-Lees ursprungliga vision om en interaktiv web, utökar tillägg webbläsarens kapacitet bortom enkel dokumentvisning. Från lösenordshanterare som håller dina konton säkra till färgväljare som hjälper designers att hitta perfekta nyanser, löser tillägg vardagliga utmaningar vid surfning.

Innan vi bygger ditt första tillägg, låt oss förstå hur webbläsare fungerar. Precis som Alexander Graham Bell behövde förstå ljudöverföring innan han uppfann telefonen, kommer kunskap om webbläsarens grunder att hjälpa dig att skapa tillägg som integreras smidigt med befintliga webbläsarsystem.

I slutet av denna lektion kommer du att förstå webbläsarens arkitektur och ha påbörjat byggandet av ditt första tillägg.

Förstå Webbläsare

En webbläsare är i grunden en sofistikerad dokumenttolkare. När du skriver "google.com" i adressfältet utför webbläsaren en komplex serie operationer - begär innehåll från servrar världen över, och tolkar och renderar sedan den koden till de interaktiva webbsidor du ser.

Denna process speglar hur den första webbläsaren, WorldWideWeb, designades av Tim Berners-Lee 1990 för att göra hyperlänkade dokument tillgängliga för alla.

✅ Lite historia: Den första webbläsaren kallades 'WorldWideWeb' och skapades av Sir Timothy Berners-Lee 1990.

Några tidiga webbläsare, via Karen McGrane

Hur Webbläsare Bearbetar Webbinnehåll

Processen mellan att skriva in en URL och att se en webbsida involverar flera samordnade steg som sker inom några 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

Det här uppnår processen:

Översätter den människoläsbara URL:en till en server-IP-adress via DNS-uppslag
Upprättar en säker anslutning med webbservern med hjälp av HTTP- eller HTTPS-protokoll
Begär det specifika webbsidans innehåll från servern
Tar emot HTML-markup, CSS-styling och JavaScript-kod från servern
Renderar allt innehåll till den interaktiva webbsidan du ser

Webbläsarens Kärnfunktioner

Moderna webbläsare erbjuder många funktioner som tilläggsutvecklare kan dra nytta av:

Funktion	Syfte	Möjligheter för tillägg
Renderingsmotor	Visar HTML, CSS och JavaScript	Innehållsmodifiering, stylinginjektion
JavaScript-motor	Kör JavaScript-kod	Anpassade skript, API-interaktioner
Lokal lagring	Sparar data lokalt	Användarinställningar, cachelagrad data
Nätverksstack	Hanterar webbförfrågningar	Övervakning av förfrågningar, dataanalys
Säkerhetsmodell	Skyddar användare från skadligt innehåll	Innehållsfiltrering, säkerhetsförbättringar

Att förstå dessa funktioner hjälper dig att:

Identifiera var ditt tillägg kan tillföra mest värde
Välja rätt webbläsar-API:er för ditt tilläggs funktionalitet
Designa tillägg som fungerar effektivt med webbläsarsystem
Säkerställa att ditt tillägg följer webbläsarens säkerhetsriktlinjer

Överväganden för Utveckling av Tillägg för Flera Webbläsare

Olika webbläsare implementerar standarder med små variationer, på samma sätt som olika programmeringsspråk kan hantera samma algoritm på olika sätt. Chrome, Firefox och Safari har var och en unika egenskaper som utvecklare måste ta hänsyn till vid utveckling av tillägg.

💡 Tips: Använd caniuse.com för att kontrollera vilka webbteknologier som stöds i olika webbläsare. Detta är ovärderligt när du planerar funktionerna för ditt tillägg!

Viktiga överväganden för tilläggsutveckling:

Testa ditt tillägg i Chrome, Firefox och Edge-webbläsare
Anpassa till olika webbläsartilläggs-API:er och manifestformat
Hantera varierande prestandaegenskaper och begränsningar
Tillhandahåll alternativ för webbläsarspecifika funktioner som kanske inte är tillgängliga

✅ Analysinsikt: Du kan ta reda på vilka webbläsare dina användare föredrar genom att installera analysverktyg i dina webbutvecklingsprojekt. Denna data hjälper dig att prioritera vilka webbläsare du ska stödja först.

Förstå Webbläsartillägg

Webbläsartillägg löser vanliga utmaningar vid webbsurfning genom att lägga till funktionalitet direkt i webbläsarens gränssnitt. Istället för att kräva separata applikationer eller komplexa arbetsflöden, ger tillägg omedelbar tillgång till verktyg och funktioner.

Detta koncept speglar hur tidiga datorteknikpionjärer som Douglas Engelbart föreställde sig att förstärka mänskliga förmågor med teknik - tillägg förstärker webbläsarens grundläggande funktionalitet.

Populära tilläggskategorier och deras fördelar:

Produktivitetsverktyg: Uppgiftsplanerare, anteckningsappar och tidsspårare som hjälper dig att hålla dig organiserad
Säkerhetsförbättringar: Lösenordshanterare, annonsblockerare och integritetsverktyg som skyddar dina data
Utvecklingsverktyg: Kodformaterare, färgväljare och felsökningsverktyg som förenklar utveckling
Innehållsförbättring: Läslägen, videonedladdare och skärmdumpsverktyg som förbättrar din webbupplevelse

✅ Reflektionsfråga: Vilka är dina favoritwebbläsartillägg? Vilka specifika uppgifter utför de, och hur förbättrar de din webbläsarupplevelse?

Installera och Hantera Tillägg

Att förstå installationsprocessen för tillägg hjälper dig att förutse användarupplevelsen när människor installerar ditt tillägg. Installationsprocessen är standardiserad över moderna webbläsare, med mindre variationer i gränssnittsdesign.

Viktigt: Se till att aktivera utvecklarläge och tillåta tillägg från andra butiker när du testar dina egna tillägg.

Utvecklingsinstallation av Tillägg

När du utvecklar och testar dina egna tillägg, följ detta arbetsflöde:

# Step 1: Build your extension
npm run build

Vad detta kommando uppnår:

Kompilerar din källkod till webbläsarklara filer
Paketerar JavaScript-moduler till optimerade paket
Genererar de slutliga tilläggsfilerna i /dist-mappen
Förbereder ditt tillägg för installation och testning

Steg 2: Navigera till Webbläsartillägg

Öppna webbläsarens sida för hantering av tillägg
Klicka på knappen "Inställningar och mer" (ikonen ...) längst upp till höger
Välj "Tillägg" från rullgardinsmenyn

Steg 3: Ladda Ditt Tillägg

För nya installationer: Välj ladda uppackat och välj din /dist-mapp
För uppdateringar: Klicka på ladda om bredvid ditt redan installerade tillägg
För testning: Aktivera "Utvecklarläge" för att få tillgång till ytterligare felsökningsfunktioner

Installation av Färdiga Tillägg

✅ Observera: Dessa utvecklingsinstruktioner är specifikt för tillägg du bygger själv. För att installera publicerade tillägg, besök de officiella webbläsartilläggsbutikerna som Microsoft Edge Add-ons store.

Förstå skillnaden:

Utvecklingsinstallationer låter dig testa opublicerade tillägg under utveckling
Butiksinstallationer tillhandahåller granskade, publicerade tillägg med automatiska uppdateringar
Sidoinstallation tillåter installation av tillägg från andra källor än officiella butiker (kräver utvecklarläge)

Bygga Ditt Koldioxidavtryckstillägg

Vi kommer att skapa ett webbläsartillägg som visar koldioxidavtrycket för energianvändningen i din region. Detta projekt demonstrerar viktiga koncept för tilläggsutveckling samtidigt som det skapar ett praktiskt verktyg för miljömedvetenhet.

Denna metod följer principen "learning by doing" som har visat sig vara effektiv sedan John Deweys pedagogiska teorier - att kombinera tekniska färdigheter med meningsfulla verkliga tillämpningar.

Projektkrav

Innan vi börjar utvecklingen, låt oss samla de nödvändiga resurserna och beroendena:

Nödvändig API-åtkomst:

CO2 Signal API-nyckel: Ange din e-postadress för att få din gratis API-nyckel
Regionskod: Hitta din regionskod med hjälp av Electricity Map (till exempel använder Boston 'US-NEISO')

Utvecklingsverktyg:

Node.js och NPM: Verktyg för paketadministration för att installera projektberoenden
Startkod: Ladda ner mappen start för att börja utvecklingen

✅ Läs Mer: Förbättra dina färdigheter inom paketadministration med denna omfattande Learn-modul

Förstå Projektstrukturen

Att förstå projektstrukturen hjälper till att organisera utvecklingsarbetet effektivt. Precis som Biblioteket i Alexandria var organiserat för enkel kunskapsåtervinning, gör en välstrukturerad kodbas utvecklingen 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

Vad varje fil gör:

manifest.json: Definierar metadata, behörigheter och startpunkter för tillägget
index.html: Skapar användargränssnittet som visas när användare klickar på ditt tillägg
background.js: Hantera bakgrundsuppgifter och webbläsarhändelselyssnare
main.js: Innehåller den slutliga paketerade JavaScript-koden efter byggprocessen
src/index.js: Innehåller din huvudsakliga utvecklingskod som kompileras till main.js

💡 Organisationsråd: Spara din API-nyckel och regionskod i en säker anteckning för enkel åtkomst under utvecklingen. Du kommer att behöva dessa värden för att testa ditt tilläggs funktionalitet.

✅ Säkerhetsråd: Lämna aldrig in API-nycklar eller känsliga uppgifter till din koddatabas. Vi visar dig hur du hanterar dessa säkert i nästa steg.

Skapa Tilläggets Gränssnitt

Nu ska vi bygga användargränssnittskomponenterna. Tillägget använder en tvåskärmsmetod: en konfigurationsskärm för första inställningen och en resultatskärm för datavisning.

Detta följer principen om progressiv avslöjande som används i gränssnittsdesign sedan datorernas tidiga dagar - att avslöja information och alternativ i en logisk sekvens för att undvika att överväldiga användare.

Översikt över Tilläggets Vy

Inställningsvy - Första gången användaren konfigurerar:

Resultatvy - Visning av koldioxidavtrycksdata:

Bygga Konfigurationsformuläret

Inställningsformuläret samlar användarkonfigurationsdata vid första användningen. När det är konfigurerat, sparas denna information i webbläsarens lagring för framtida sessioner.

I filen /dist/index.html, lägg till denna formulärstruktur:

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

Vad detta formulär gör:

Skapar en semantisk formulärstruktur med korrekta etiketter och inmatningsassociationer
Aktiverar webbläsarens autofyllfunktion för förbättrad användarupplevelse
Kräver att båda fälten fylls i innan inskickning med attributet required
Organiserar inmatningar med beskrivande klassnamn för enkel styling och JavaScript-mål
Tillhandahåller tydliga instruktioner för användare som konfigurerar tillägget för första gången

Bygga Resultatvisningen

Skapa sedan resultatområdet som ska visa koldioxidavtrycksdata. Lägg till denna HTML under formuläret:

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

Vad denna struktur tillhandahåller:

loading: Visar ett laddningsmeddelande medan API-data hämtas
errors: Visar felmeddelanden om API-anrop misslyckas eller data är ogiltig
data: Innehåller rådata för felsökning under utveckling
result-container: Presenterar formaterad information om koldioxidavtryck för användare
clear-btn: Tillåter användare att ändra sin region och konfigurera om tillägget

Ställa in Byggprocessen

Nu ska vi installera projektberoenden och testa byggprocessen:

npm install

Vad denna installationsprocess gör:

Laddar ner Webpack och andra utvecklingsberoenden som anges i package.json
Konfigurerar byggverktygskedjan för att kompilera modern JavaScript
Förbereder utvecklingsmiljön för att bygga och testa tillägg
Aktiverar kodpaketering, optimering och funktioner för webbläsarkompatibilitet

💡 Insikt om Byggprocessen: Webpack paketerar din källkod från /src/index.js till /dist/main.js. Denna process optimerar din kod för produktion och säkerställer webbläsarkompatibilitet.

Testa Din Framgång

Vid denna punkt kan du testa ditt tillägg:

Kör byggkommandot för att kompilera din kod
Ladda tillägget i din webbläsare med utvecklarläge
Verifiera att formuläret visas korrekt och ser professionellt ut
Kontrollera att alla formulärelement är korrekt justerade och funktionella

Vad du har uppnått:

Byggt den grundläggande HTML-strukturen för ditt tillägg
Skapat både konfigurations- och resultatgränssnitt med korrekt semantisk markup
Ställt in ett modernt utvecklingsarbetsflöde med branschstandardverktyg
Förberett grunden för att lägga till interaktiv JavaScript-funktionalitet

Du har slutfört den första fasen av utvecklingen av webbläsartillägg. Precis som Wright-bröderna först behövde förstå aerodynamik innan de kunde flyga, förbereder förståelsen av dessa grundläggande koncept dig för att bygga mer komplexa interaktiva funktioner Beskrivning: Förbättra webbläsartillägget genom att lägga till formulärvalidering och användarfeedback för att förbättra användarupplevelsen vid inmatning av API-nycklar och regionkoder.

Uppgift: Skapa JavaScript-valideringsfunktioner som kontrollerar om fältet för API-nyckeln innehåller minst 20 tecken och om regionkoden följer rätt format (som 'US-NEISO'). Lägg till visuell feedback genom att ändra färgen på inmatningsfältets kantlinje till grönt för giltiga inmatningar och rött för ogiltiga. Lägg också till en växlingsfunktion för att visa/dölja API-nyckeln av säkerhetsskäl.

Läs mer om agentläge här.

🚀 Utmaning

Ta en titt på en webbläsartilläggsbutik och installera ett tillägg i din webbläsare. Du kan undersöka dess filer på intressanta sätt. Vad upptäcker du?

Quiz efter föreläsningen

Granskning & Självstudier

I denna lektion lärde du dig lite om webbläsarens historia; ta tillfället i akt att lära dig mer om hur uppfinnarna av World Wide Web föreställde sig dess användning genom att läsa mer om dess historia. Några användbara webbplatser inkluderar:

Webbläsarnas historia

Webbens historia

En intervju med Tim Berners-Lee

Uppgift

Styla om ditt tillägg

Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.

19 KiB Raw Blame History