# Naršyklės plėtinio 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ų funkcijų naršyklei. Tačiau prieš kuriant plėtinį, verta šiek tiek 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 sukursite naršyklės plėtinio struktūrą.
Bet kas iš tikrųjų yra naršyklė? Tai programinė įranga, leidžianti galutiniam vartotojui pasiekti turinį iš serverio ir rodyti jį tinklalapiuose.
✅ Šiek tiek istorijos: pirmoji naršyklė vadinosi „WorldWideWeb“ ir ją 1990 m. sukūrė seras Timotis Berners-Lee.
> Kai kurios ankstyvosios naršyklės, šaltinis [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šiojamasis 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“ (mažus duomenų fragmentus, kuriuose yra informacija apie vartotojo veiklą) ir dar daugiau.
Labai svarbu prisiminti, kad naršyklės nėra vienodos! Kiekviena naršyklė turi savo privalumų ir trūkumų, o profesionalus žiniatinklio kūrėjas turi suprasti, kaip užtikrinti, kad tinklalapiai gerai veiktų įvairiose naršyklėse. Tai apima mažų ekranų, tokių kaip mobiliojo telefono, palaikymą, taip pat vartotojų, kurie yra neprisijungę, poreikius.
Labai naudinga svetainė, kurią tikriausiai turėtumėte įtraukti į savo mėgstamos naršyklės žymes, yra [caniuse.com](https://www.caniuse.com). Kurdami tinklalapius, galite naudotis „caniuse“ palaikomų technologijų sąrašais, kad geriausiai palaikytumėte savo vartotojus.
✅ Kaip galite sužinoti, kurios naršyklės yra populiariausios tarp jūsų svetainės vartotojų? Patikrinkite savo analizės duomenis – galite įdiegti įvairias analizės programas kaip savo žiniatinklio kūrimo proceso dalį, ir jos 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 atlikti pasikartojančias užduotis. Pavyzdžiui, jei dažnai reikia tikrinti spalvas įvairiuose tinklalapiuose, galite įdiegti spalvų parinkiklio plėtinį. Jei sunku prisiminti slaptažodžius, galite naudoti slaptažodžių valdymo plėtinį.
Naršyklės plėtinius taip pat smagu kurti. Jie paprastai atlieka ribotą skaičių užduočių, kurias atlieka labai gerai.
✅ Kokie yra 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, procesas „Chrome“ ir „Firefox“ yra panašus į šį pavyzdį „Edge“ naršyklėje:
> 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 naujas diegimas, 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 atnaujinate jau įdiegtą plėtinį
✅ Šios instrukcijos taikomos jūsų pačių sukurtiems plėtiniams; norėdami įdiegti plėtinius, kurie jau yra išleisti naršyklės plėtinių parduotuvėje, turėtumėte apsilankyti šiose [parduotuvėse](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) ir įdiegti norimą plėtinį.
### Pradėkite
Jūs sukursite naršyklės plėtinį, kuris rodys jūsų regiono anglies pėdsaką, pateikdamas jūsų regiono energijos suvartojimą 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ą šiame puslapyje 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`; užbaigsite kodą šiame aplanke
- [NPM](https://www.npmjs.com) – NPM yra paketų valdymo įrankis; įdiekite jį lokaliai, ir paketai, išvardyti jūsų `package.json` faile, bus įdiegti naudojimui jūsų žiniatinklio projekte
✅ 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 kodo bazę:
dist
-|manifest.json (numatytosios reikšmės nustatomos čia)
-|index.html (HTML žymėjimas čia)
-|background.js (JS foninis kodas č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 kita – regiono anglies suvartojimo rodymui:
Pradėkime nuo formos HTML kūrimo ir jos stiliaus pritaikymo naudojant CSS.
Aplanke `/dist` sukursite formą ir rezultatų sritį. Faile `index.html` užpildykite nurodytą formos sritį:
```HTML
```
Tai yra forma, kurioje jūsų išsaugota informacija bus įvesta ir išsaugota 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 projektą. Į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. Šio proceso išvestį galite pamatyti aplanke `/dist/main.js` – pamatysite, kad kodas buvo sujungtas.
Kol kas 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
Apsilankykite naršyklės plėtinių parduotuvėje 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 galimybe 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 Timu Bernersu-Li](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
[Perdarykite 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.