19 KiB

Raw Blame History

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

Skica autora Wassim Chegham

Kviz prije predavanja

Uvod

Proširenja za preglednike su mini-aplikacije koje poboljšavaju vaše iskustvo pregledavanja interneta. Poput izvorne vizije Tima Berners-Leeja o interaktivnom webu, proširenja proširuju mogućnosti preglednika izvan jednostavnog prikaza dokumenata. Od upravitelja lozinki koji čuvaju vaše račune do alata za odabir boja koji pomažu dizajnerima da pronađu savršene nijanse, proširenja rješavaju svakodnevne izazove pregledavanja.

Prije nego što izradimo vaše prvo proširenje, razumjet ćemo kako preglednici funkcioniraju. Baš kao što je Alexander Graham Bell morao razumjeti prijenos zvuka prije nego što je izumio telefon, poznavanje osnova preglednika pomoći će vam da stvorite proširenja koja se besprijekorno integriraju s postojećim sustavima preglednika.

Na kraju ove lekcije, razumjet ćete arhitekturu preglednika i započeti izradu svog prvog proširenja.

Razumijevanje web preglednika

Web preglednik je u suštini sofisticirani interpretator dokumenata. Kada u adresnu traku upišete "google.com", preglednik izvodi složeni niz operacija - zahtijeva sadržaj sa servera širom svijeta, zatim analizira i prikazuje taj kod u interaktivne web stranice koje vidite.

Ovaj proces odražava način na koji je prvi web preglednik, WorldWideWeb, dizajnirao Tim Berners-Lee 1990. godine kako bi hiperpovezane dokumente učinio dostupnima svima.

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

Neki od ranih preglednika, prema Karen McGrane

Kako preglednici obrađuju web sadržaj

Proces između unosa URL-a i prikaza web stranice uključuje nekoliko koordiniranih koraka koji se odvijaju u sekundi:

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

Što ovaj proces postiže:

Prevodi URL koji je čitljiv ljudima u IP adresu servera putem DNS pretraživanja
Uspostavlja sigurnu vezu sa web serverom koristeći HTTP ili HTTPS protokole
Zahtijeva specifičan sadržaj web stranice od servera
Prima HTML oznake, CSS stilove i JavaScript kod od servera
Prikazuje sav sadržaj u interaktivnu web stranicu koju vidite

Osnovne značajke preglednika

Moderni preglednici pružaju brojne značajke koje programeri proširenja mogu iskoristiti:

Značajka	Svrha	Mogućnosti proširenja
Motor za prikazivanje	Prikazuje HTML, CSS i JavaScript	Modifikacija sadržaja, umetanje stilova
JavaScript motor	Izvršava JavaScript kod	Prilagođeni skripti, interakcije s API-jem
Lokalna pohrana	Sprema podatke lokalno	Korisničke postavke, predmemorirani podaci
Mrežni sloj	Upravljanje web zahtjevima	Praćenje zahtjeva, analiza podataka
Sigurnosni model	Štiti korisnike od zlonamjernog sadržaja	Filtriranje sadržaja, poboljšanja sigurnosti

Razumijevanje ovih značajki pomaže vam:

Identificirati gdje vaše proširenje može dodati najviše vrijednosti
Odabrati prave API-je preglednika za funkcionalnost vašeg proširenja
Dizajnirati proširenja koja učinkovito rade s sustavima preglednika
Osigurati da vaše proširenje slijedi najbolje prakse sigurnosti preglednika

Razmatranja za razvoj proširenja na više preglednika

Različiti preglednici implementiraju standarde s blagim varijacijama, slično kao što različiti programski jezici mogu različito obrađivati isti algoritam. Chrome, Firefox i Safari imaju jedinstvene karakteristike koje programeri moraju uzeti u obzir tijekom razvoja proširenja.

💡 Savjet za profesionalce: Koristite caniuse.com kako biste provjerili koje web tehnologije podržavaju različiti preglednici. Ovo je neprocjenjivo prilikom planiranja značajki vašeg proširenja!

Ključna razmatranja za razvoj proširenja:

Testirajte svoje proširenje na preglednicima Chrome, Firefox i Edge
Prilagodite se različitim API-jima proširenja i formatima manifestacija preglednika
Rukujte različitim karakteristikama performansi i ograničenjima
Osigurajte rezervne opcije za značajke specifične za preglednik koje možda nisu dostupne

✅ Analitički uvid: Možete odrediti koje preglednike vaši korisnici preferiraju instaliranjem analitičkih paketa u svoje projekte web razvoja. Ovi podaci pomažu vam da odredite prioritete koje preglednike prvo podržati.

Razumijevanje proširenja za preglednike

Proširenja za preglednike rješavaju uobičajene izazove pregledavanja weba dodavanjem funkcionalnosti izravno u sučelje preglednika. Umjesto da zahtijevaju zasebne aplikacije ili složene radne procese, proširenja pružaju trenutni pristup alatima i značajkama.

Ovaj koncept odražava kako su rani pioniri računalstva poput Douglasa Engelbarta zamišljali proširenje ljudskih sposobnosti tehnologijom - proširenja proširuju osnovnu funkcionalnost vašeg preglednika.

Popularne kategorije proširenja i njihove prednosti:

Alati za produktivnost: Upravljanje zadacima, aplikacije za bilježenje i praćenje vremena koje pomažu u organizaciji
Poboljšanja sigurnosti: Upravitelji lozinki, blokatori oglasa i alati za privatnost koji štite vaše podatke
Alati za programere: Formatiranje koda, odabir boja i alati za otklanjanje pogrešaka koji olakšavaju razvoj
Poboljšanje sadržaja: Načini čitanja, preuzimanje videozapisa i alati za snimanje zaslona koji poboljšavaju vaše iskustvo na webu

✅ Pitanje za razmišljanje: Koja su vaša omiljena proširenja za preglednik? Koje specifične zadatke obavljaju i kako poboljšavaju vaše iskustvo pregledavanja?

Instalacija i upravljanje proširenjima

Razumijevanje procesa instalacije proširenja pomaže vam predvidjeti korisničko iskustvo kada ljudi instaliraju vaše proširenje. Proces instalacije standardiziran je u modernim preglednicima, s manjim varijacijama u dizajnu sučelja.

Važno: Obavezno uključite način rada za razvojne programere i omogućite proširenja iz drugih trgovina prilikom testiranja vlastitih proširenja.

Proces instalacije proširenja za razvoj

Kada razvijate i testirate vlastita proširenja, slijedite ovaj tijek rada:

# Step 1: Build your extension
npm run build

Što ova naredba postiže:

Kompilira vaš izvorni kod u datoteke spremne za preglednik
Pakira JavaScript module u optimizirane pakete
Generira konačne datoteke proširenja u mapi /dist
Priprema vaše proširenje za instalaciju i testiranje

Korak 2: Otvorite upravljanje proširenjima u pregledniku

Otvorite stranicu za upravljanje proširenjima u vašem pregledniku
Kliknite gumb "Postavke i više" (ikona ...) u gornjem desnom kutu
Odaberite "Proširenja" iz padajućeg izbornika

Korak 3: Učitajte svoje proširenje

Za nove instalacije: Odaberite load unpacked i odaberite svoju mapu /dist
Za ažuriranja: Kliknite reload pored već instaliranog proširenja
Za testiranje: Omogućite "Način rada za razvojne programere" za pristup dodatnim značajkama za otklanjanje pogrešaka

Instalacija proširenja za produkciju

✅ Napomena: Ove upute za razvoj specifične su za proširenja koja sami izrađujete. Za instalaciju objavljenih proširenja posjetite službene trgovine proširenja preglednika poput Microsoft Edge Add-ons trgovine.

Razumijevanje razlike:

Instalacije za razvoj omogućuju testiranje neobjavljenih proširenja tijekom razvoja
Instalacije iz trgovine pružaju provjerena, objavljena proširenja s automatskim ažuriranjima
Ručno instaliranje omogućuje instalaciju proširenja izvan službenih trgovina (zahtijeva način rada za razvojne programere)

Izrada proširenja za ugljični otisak

Izradit ćemo proširenje za preglednik koje prikazuje ugljični otisak potrošnje energije u vašoj regiji. Ovaj projekt demonstrira osnovne koncepte razvoja proširenja dok stvara praktičan alat za podizanje svijesti o okolišu.

Ovaj pristup slijedi princip "učenje kroz rad" koji se pokazao učinkovitim još od obrazovnih teorija Johna Deweya - kombinirajući tehničke vještine s značajnim stvarnim aplikacijama.

Zahtjevi projekta

Prije početka razvoja, prikupimo potrebne resurse i ovisnosti:

Potrebni pristup API-ju:

CO2 Signal API ključ: Unesite svoju email adresu kako biste dobili besplatni API ključ
Kod regije: Pronađite kod svoje regije koristeći Electricity Map (na primjer, Boston koristi 'US-NEISO')

Alati za razvoj:

Node.js i NPM: Alat za upravljanje paketima za instalaciju ovisnosti projekta
Početni kod: Preuzmite mapu start za početak razvoja

✅ Saznajte više: Poboljšajte svoje vještine upravljanja paketima s ovim sveobuhvatnim modulom za učenje

Razumijevanje strukture projekta

Razumijevanje strukture projekta pomaže u učinkovitom organiziranju razvojnih zadataka. Kao što je Aleksandrijska knjižnica bila organizirana za jednostavno pronalaženje znanja, dobro strukturirana baza koda čini razvoj učinkovitijim:

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

Razlaganje onoga što svaka datoteka postiže:

manifest.json: Definira metapodatke proširenja, dozvole i ulazne točke
index.html: Stvara korisničko sučelje koje se pojavljuje kada korisnici kliknu na vaše proširenje
background.js: Upravlja pozadinskim zadacima i slušateljima događaja preglednika
main.js: Sadrži konačni JavaScript nakon procesa izgradnje
src/index.js: Sadrži vaš glavni razvojni kod koji se kompajlira u main.js

💡 Savjet za organizaciju: Spremite svoj API ključ i kod regije u sigurnu bilješku za jednostavno referenciranje tijekom razvoja. Trebat ćete te vrijednosti za testiranje funkcionalnosti vašeg proširenja.

✅ Sigurnosna napomena: Nikada ne pohranjujte API ključeve ili osjetljive vjerodajnice u svoj repozitorij koda. Pokazat ćemo vam kako ih sigurno upravljati u sljedećim koracima.

Izrada sučelja proširenja

Sada ćemo izraditi komponente korisničkog sučelja. Proširenje koristi pristup s dva ekrana: ekran za konfiguraciju za početno postavljanje i ekran za prikaz rezultata.

Ovo slijedi princip progresivnog otkrivanja koji se koristi u dizajnu sučelja od ranih dana računalstva - otkrivanje informacija i opcija u logičnom slijedu kako bi se izbjeglo preopterećenje korisnika.

Pregled prikaza proširenja

Prikaz postavki - Konfiguracija za prvi put:

Prikaz rezultata - Prikaz podataka o ugljičnom otisku:

Izrada obrasca za konfiguraciju

Obrazac za postavljanje prikuplja podatke o konfiguraciji korisnika tijekom prve upotrebe. Jednom konfigurirani, ovi podaci ostaju pohranjeni u memoriji preglednika za buduće sesije.

U datoteku /dist/index.html dodajte ovu strukturu obrasca:

<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 ovaj obrazac postiže:

Stvara semantičku strukturu obrasca s odgovarajućim oznakama i poveznicama za unos
Omogućuje funkcionalnost automatskog popunjavanja preglednika za poboljšano korisničko iskustvo
Zahtijeva da oba polja budu ispunjena prije slanja koristeći atribut required
Organizira unose s opisnim nazivima klasa za jednostavno stiliziranje i ciljanje JavaScriptom
Pruža jasne upute korisnicima koji prvi put postavljaju proširenje

Izrada prikaza rezultata

Zatim, stvorite područje rezultata koje će prikazivati podatke o ugljičnom otisku. Dodajte ovaj HTML ispod obrasca:

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

Razlaganje onoga što ova struktura pruža:

loading: Prikazuje poruku učitavanja dok se dohvaćaju podaci iz API-ja
errors: Prikazuje poruke o pogreškama ako API pozivi ne uspiju ili su podaci nevažeći
data: Sadrži sirove podatke za otklanjanje pogrešaka tijekom razvoja
result-container: Prikazuje formatirane informacije o ugljičnom otisku korisnicima
clear-btn: Omogućuje korisnicima promjenu regije i ponovno postavljanje proširenja

Postavljanje procesa izgradnje

Sada instalirajmo ovisnosti projekta i testirajmo proces izgradnje:

npm install

Što ovaj proces instalacije postiže:

Preuzima Webpack i druge razvojne ovisnosti navedene u package.json
Konfigurira alat za izgradnju za kompajliranje modernog JavaScripta
Priprema razvojno okruženje za izradu i testiranje proširenja
Omogućuje pakiranje koda, optimizaciju i značajke kompatibilnosti s različitim preglednicima

💡 Uvid u proces izgradnje: Webpack pakira vaš izvorni kod iz /src/index.js u /dist/main.js. Ovaj proces optimizira vaš kod za produkciju i osigurava kompatibilnost s preglednicima.

Testiranje vašeg napretka

U ovom trenutku možete testirati svoje proširenje:

Pokrenite naredbu za izgradnju kako biste kompajlirali svoj kod
Učitajte proširenje u svoj preglednik koristeći način rada za razvojne programere
Provjerite da se obrazac ispravno prikazuje i izgleda profesionalno
Provjerite da su svi elementi obrasca pravilno poravnati i funkcionalni

Što ste postigli:

Izradili osnovnu HTML strukturu za svoje proširenje
**Stvorili Opis: Poboljšajte proširenje za preglednik dodavanjem validacije obrazaca i značajki povratnih informacija korisnicima kako biste unaprijedili korisničko iskustvo prilikom unosa API ključeva i kodova regije.

Zadatak: Kreirajte JavaScript funkcije za validaciju koje provjeravaju sadrži li polje za API ključ najmanje 20 znakova i slijedi li kod regije ispravan format (poput 'US-NEISO'). Dodajte vizualne povratne informacije mijenjanjem boje obruba polja za unos u zeleno za ispravne unose i crveno za neispravne. Također dodajte značajku za uključivanje/isključivanje prikaza API ključa radi sigurnosti.

Saznajte više o agent modu ovdje.

🚀 Izazov

Pogledajte trgovinu proširenja za preglednik i instalirajte jedno na svoj preglednik. Možete na zanimljive načine proučiti njegove datoteke. Što ste otkrili?

Kviz nakon predavanja

Pregled i samostalno učenje

U ovoj lekciji ste naučili nešto o povijesti web preglednika; iskoristite ovu priliku da saznate kako su izumitelji World Wide Weba zamislili njegovu upotrebu čitajući više o njegovoj povijesti. Neke korisne stranice uključuju:

Povijest web preglednika

Povijest weba

Intervju s Timom Berners-Leeom

Zadatak

Promijenite stil vašeg proširenja

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 proizlaze iz korištenja ovog prijevoda.

19 KiB Raw Blame History