# Naršyklės plėtinių projektas 1 dalis: Viskas apie naršykles
> Eskizas sukurtas [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Klausimai prieš paskaitą
[Klausimai prieš paskaitą](https://ff-quizzes.netlify.app/web/quiz/23)
### Įvadas
Naršyklės plėtiniai prideda papildomą funkcionalumą naršyklei. Tačiau prieš kuriant plėtinį, verta sužinoti, kaip naršyklės atlieka savo darbą.
### Apie naršyklę
Šioje pamokų serijoje išmoksite kurti naršyklės plėtinį, kuris veiks „Chrome“, „Firefox“ ir „Edge“ naršyklėse. Šioje dalyje sužinosite, kaip veikia naršyklės ir kaip sukurti naršyklės plėtinio elementus.
Tačiau kas yra naršyklė? Tai programinė įranga, leidžianti galutiniam vartotojui pasiekti turinį iš serverio ir rodyti jį tinklalapiuose.
✅ Šiek tiek istorijos: pirmoji naršyklė buvo pavadinta „WorldWideWeb“ ir ją 1990 m. sukūrė seras Timothy Berners-Lee.
> Kai kurios ankstyvos naršyklės, per [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
Kai vartotojas prisijungia prie interneto naudodamas URL (Uniform Resource Locator) adresą, paprastai per Hypertext Transfer Protocol su `http` arba `https` adresu, naršyklė bendrauja su žiniatinklio serveriu ir gauna tinklalapį.
Šiuo metu naršyklės atvaizdavimo variklis rodo jį vartotojo įrenginyje, kuris gali būti mobilusis telefonas, stacionarus kompiuteris ar nešiojamas kompiuteris.
Naršyklės taip pat gali talpinti turinį, kad jo nereikėtų kiekvieną kartą gauti iš serverio. Jos gali įrašyti vartotojo naršymo istoriją, saugoti „sausainėlius“ (cookies), kurie yra maži duomenų gabalėliai, turintys informaciją apie vartotojo veiklą, ir dar daugiau.
Labai svarbu prisiminti, kad naršyklės nėra vienodos! Kiekviena naršyklė turi savo stipriąsias ir silpnąsias puses, o profesionalus žiniatinklio kūrėjas turi suprasti, kaip tinklalapiai veikia skirtingose naršyklėse. Tai apima mažų ekranų, tokių kaip mobiliojo telefono, palaikymą, taip pat vartotojo, kuris yra neprisijungęs, poreikius.
Labai naudinga svetainė, kurią tikriausiai turėtumėte įsiminti savo mėgstamoje naršyklėje, yra [caniuse.com](https://www.caniuse.com). Kurdamas tinklalapius, galite naudotis „caniuse“ technologijų palaikymo sąrašais, kad geriau palaikytumėte savo vartotojus.
✅ Kaip sužinoti, kurios naršyklės yra populiariausios jūsų svetainės vartotojų bazėje? Patikrinkite savo analizės duomenis – galite įdiegti įvairius analizės paketus kaip savo žiniatinklio kūrimo proceso dalį, ir jie parodys, kurios naršyklės yra dažniausiai naudojamos.
## Naršyklės plėtiniai
Kodėl verta kurti naršyklės plėtinį? Tai patogus įrankis, kurį galima pridėti prie naršyklės, kai reikia greitai pasiekti užduotis, kurias dažnai kartojate. Pavyzdžiui, jei dažnai tikrinate spalvas įvairiuose tinklalapiuose, galite įdiegti spalvų rinkiklio plėtinį. Jei jums sunku prisiminti slaptažodžius, galite naudoti slaptažodžių valdymo plėtinį.
Naršyklės plėtinius taip pat smagu kurti. Jie paprastai valdo ribotą skaičių užduočių, kurias atlieka gerai.
✅ Kokie jūsų mėgstamiausi naršyklės plėtiniai? Kokias užduotis jie atlieka?
### Plėtinių diegimas
Prieš pradėdami kurti, pažvelkite į naršyklės plėtinio kūrimo ir diegimo procesą. Nors kiekviena naršyklė šiek tiek skiriasi, kaip ji tvarko šią užduotį, procesas „Chrome“ ir „Firefox“ yra panašus į šį pavyzdį „Edge“:
> Pastaba: Įsitikinkite, kad įjungėte kūrėjo režimą ir leidote plėtinius iš kitų parduotuvių.
Iš esmės procesas bus toks:
- sukurkite savo plėtinį naudodami `npm run build`
- naršyklėje eikite į plėtinių skydelį naudodami mygtuką „Nustatymai ir daugiau“ (piktograma `...`) viršutiniame dešiniajame kampe
- jei tai nauja diegimo versija, pasirinkite `load unpacked`, kad įkeltumėte naują plėtinį iš jo kūrimo aplanko (mūsų atveju tai yra `/dist`)
- arba spustelėkite `reload`, jei iš naujo įkeliate jau įdiegtą plėtinį
✅ Šios instrukcijos taikomos plėtiniams, kuriuos kuriate patys; norėdami įdiegti plėtinius, kurie jau yra išleisti naršyklės plėtinių parduotuvėje, turėtumėte pereiti į šias [parduotuves](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) ir įdiegti norimą plėtinį.
### Pradėkite
Jūs ketinate sukurti naršyklės plėtinį, kuris rodys jūsų regiono anglies pėdsaką, parodydamas jūsų regiono energijos naudojimą ir energijos šaltinį. Plėtinys turės formą, kuri surinks API raktą, kad galėtumėte pasiekti CO2 Signal API.
**Jums reikės:**
- [API rakto](https://www.co2signal.com/); įveskite savo el. pašto adresą į laukelį šioje svetainėje, ir jums bus atsiųstas raktas
- [kodo jūsų regionui](http://api.electricitymap.org/v3/zones), atitinkančio [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone naudoju „US-NEISO“)
- [pradinio kodo](../../../../5-browser-extension/start). Atsisiųskite aplanką `start`; jūs užbaigsite kodą šiame aplanke.
- [NPM](https://www.npmjs.com) - NPM yra paketų valdymo įrankis; įdiekite jį vietoje, ir paketai, nurodyti jūsų `package.json` faile, bus įdiegti naudojimui jūsų žiniatinklio turte
✅ Sužinokite daugiau apie paketų valdymą šiame [puikiame mokymosi modulyje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
Skirkite minutę peržiūrėti kodų bazę:
dist
-|manifest.json (numatytosios nuostatos čia)
-|index.html (HTML žymėjimas čia)
-|background.js (foninis JS čia)
-|main.js (sukurtas JS)
src
-|index.js (jūsų JS kodas čia)
✅ Kai turėsite savo API raktą ir regiono kodą, išsaugokite juos kur nors užrašuose, kad galėtumėte naudoti ateityje.
### Sukurkite HTML plėtiniui
Šis plėtinys turi dvi peržiūras. Viena skirta API rakto ir regiono kodo surinkimui:
Ir antra, skirta regiono anglies naudojimui rodyti:
Pradėkime nuo formos HTML kūrimo ir jos stiliaus pritaikymo naudojant CSS.
Aplanke `/dist` sukurkite formą ir rezultatų sritį. Faile `index.html` užpildykite nurodytą formos sritį:
```HTML
```
Tai forma, kurioje bus įvesti ir išsaugoti jūsų duomenys vietinėje saugykloje.
Toliau sukurkite rezultatų sritį; po paskutinės formos žymos pridėkite keletą div elementų:
```HTML
loading...
Region:
Carbon Usage:
Fossil Fuel Percentage:
```
Šiuo metu galite pabandyti sukurti plėtinį. Įsitikinkite, kad įdiegėte šio plėtinio paketų priklausomybes:
```
npm install
```
Ši komanda naudos npm, „Node Package Manager“, kad įdiegtų „webpack“ jūsų plėtinio kūrimo procesui. „Webpack“ yra paketų tvarkyklė, kuri apdoroja kodo kompiliavimą. Galite peržiūrėti šio proceso rezultatą aplanke `/dist/main.js` - pamatysite, kad kodas buvo sujungtas.
Šiuo metu plėtinys turėtų būti sukurtas, ir jei jį įdiegsite „Edge“ kaip plėtinį, pamatysite tvarkingai rodomą formą.
Sveikiname, jūs žengėte pirmuosius žingsnius kuriant naršyklės plėtinį. Kitose pamokose padarysite jį funkcionalesnį ir naudingesnį.
---
## 🚀 Iššūkis
Pažvelkite į naršyklės plėtinių parduotuvę ir įdiekite vieną plėtinį į savo naršyklę. Galite įdomiais būdais išnagrinėti jo failus. Ką atrandate?
## Klausimai po paskaitos
[Klausimai po paskaitos](https://ff-quizzes.netlify.app/web/quiz/24)
## Apžvalga ir savarankiškas mokymasis
Šioje pamokoje sužinojote šiek tiek apie žiniatinklio naršyklės istoriją; pasinaudokite šia proga sužinoti, kaip Pasaulinio tinklo išradėjai įsivaizdavo jo naudojimą, skaitydami daugiau apie jo istoriją. Naudingos svetainės:
[Žiniatinklio naršyklių istorija](https://www.mozilla.org/firefox/browsers/browser-history/)
[Žiniatinklio istorija](https://webfoundation.org/about/vision/history-of-the-web/)
[Interviu su Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
## Užduotis
[Perstilizuokite savo plėtinį](assignment.md)
---
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.